By
@Itz_coco
Well I made an AI water footprint calculator earlier and have decided to take it to the next level by turning it into a browser extension. Why? Someone suggested it to me, and I was up for the challenge so here we are. Besides instead of calculating on a whim, you could do it in real-time from a widget ri? More convenient if I do say so myself.
@Itz_coco
on
AI Water Calc Extension
This is like a sort of sequel to my first project, the AI water calculator. The difference? As shown in the picture, this is a browser extension. Which means you do not have to open it live to use it but instead you have a lil version at the side of your screen, cute innit? What’s even better is it can detect whether you’re on an AI site, tho ofc only the AI I outlined in it but that’s basically the main AI that I added so…not exactly worried. My issues? THE EXTENSION UPLOADING. Likeeeeee it was the 2nd hardest aspect of it all, the hardest was the JavaScript and easiest was the manifest, or no, the content.css. To be more specific the uploading was an issue because the emojis were loading as awkward symbols and I didn’t know why. I first saved it on VS code as UTF-8 since my friend told me to, then it didn’t change a thing. They then said I should save encoding as “UTF-8 with BOM” tell me what even is the difference. I guess there was one, but it wasted my time so much so that the frustration made me not ship this even though I was more or less done. Another issue was icon designing since designs aren’t my thing but for some reason it turned out alright. Then, I had to get it resized, nearly lost my PC by visiting some rip-off resizer site that gave me some sketchy file to download, if I wasn’t cautious, this PC of mine wouldn’t have seen this moment. Though, all in all, this was fun, not nerdy fun but the thought that I could build this is motivation because my goal seems more feasible now. So ironic that what I am anticipating isn’t related to Sustainability at all, but kinda is? It’s complicated, but yes visit my repo please and use the extension so you can track your Water Use live on the go.
@Itz_coco
on
AI Water Calc Extension
53m 23s logged
I’M DONE. This last bit was so difficult. The code was sorted out and the content.css didn’t take me long it was debugging the icons that became my issue even now I don’t know why the icon is refusing to load on the extension page, it’s really frustrating me and I have tried many things but it’s not complying, but I’m leaving it as is since the main thing is actually working pretty well, no bugs whatsoever. Then I had to install chrome on my PC since I actually just got this last week ( I mentioned this before in my first project). Anyways, the folder can be viewed in my GitHub repo which will prolly come soon if I ship it. I implore y’all to give it a shot. Both on edge and Chrome. Please look forward to my next two projects, I mean it.
@Itz_coco
on
AI Water Calc Extension
59m 3s logged
Just finished the content.js file. It did take me a while cause of formatting I ended up overcrowding lines, and I am very sure I still have that issue but Imma sort it out during debugging. I see my files in this way: popup.html is my mockup structure, popup.js is the brain for that that gives it basic function, which is why from my screenshot earlier, you could see like the calculator working but other things weren’t. The purpose of my content.js is to enable REAL TIME TRACKING. It silently runs on the ai site (butchu gotta get the extension first, obviously) Which reminds me that I am yet to finish the github repository for all this neither have I added it to chrome extensions but that’s meant to be the last part since I need the folder itself complete so lemme not rush. So basically, manifest.json tells chrome this is an extension, Ive explained the popup duo, also the content.js I just finished. Of course, icons are self- explanatory. Then, content.css is just to spruce the whole thing up. Can’t wait to finish this. So, I can handle the next 2.
@Itz_coco
on
AI Water Calc Extension
43m 30s logged
Oh, so the reason for the issue back then was because they were not on the same line. I was very puzzled, so I visited my calculator code and then it just kinda clicked to try, and I did then the errors stopped. I am now finished with the popup.js file. Took me a while but I guess it’s kinda changing the extension a bit more. It can now perform the basic calculation aspect, still isn’t loading the dashboard values though, but I’mma handle that in the last two files: content.js and content.css. There is no particular order (I think) I am merely following the easy building block guide
@Itz_coco
on
AI Water Calc Extension
43m 9s logged
I am kinda stuck rn, after persevering using the sound of rain in my area as motivation in the dark, I have come to a major block, I first had storage issues since I needed the right storage set up for a chrome extension so I kept deleting and reenacting over and over again. Well, I dealt with allat and now I’m here. The code looks fine to me tbh I don’t even understand.
@Itz_coco
on
AI Water Calc Extension
28m logged
Finally started the script, hopefully it makes up for that sorry looking thing I showed earlier; to make this an improved version of the calculator, I added more cheeky remarks (yes, I said that). I was feeling odd so they may be weird buh I didn’t add emojis this time unlike the calculator and these remarks are…harsh? Yeah, pretty much, whereas the calculator remarks praise you for using a model other than ChatGPT. The remarks here are a lottttt.
@Itz_coco
on
AI Water Calc Extension
43m 50s logged
… Finished debugging the html, I now need to move on to the script. But man, this looks mad corny…incredibly so. But I was warned and went through with it anyways, so that’s definitely on me so I shall trust the process. Let’s see how better it looks when I add the content files and the JS to all this
@Itz_coco
on
AI Water Calc Extension
52m logged
Well, I am completely done with the style section of my code. Made sure it was really personalized, added a mascot concept, bouncing text animation and implemented the Font package Fredoka One and Nunito, I am hoping it’ll turn out nicely because I feel I prolly have bugs buh I am not debugging just yet so warrever. Prop tip: Evn if you lowkey wanna bank up on hours, it’s best to separately plan code and test on a different device so when retyping elsewhere, you’re immersed in the code and efficent. (I am in no place say allat, buh yeah, it helped me a lto to pull this off)
@Itz_coco
on
AI Water Calc Extension
41m 54s logged
Well, the manifest file wrapped up pretty quickly, so I had to move on to the icon, I used Canva to create a mildish icon then had it resized 16x 16, 48x48 and the OG Canva design was 128x128. I needed these 3 since they’re like the essential sizes the icon will be viewed in for the browser extension, well it took me a while, but I finished and I am currently like dealing with the popup.html document, my backbone. Taking my time, I drafted the main code on paper earlier today via phone, so I am converting it by finger on laptop, I have become a faster code typer with my glasses so at this speed and consistency I will prolly be finished really soon, but here’s the icon look, very basic tbh but to me it’s perfect. I am taking my time styling the html because my first site was WAY TOO plain. Therefore, the flaw with this one will be that the site in itself looks like it’s high…. Anyways, I hope not but my friend reviewed my code and thinks otherwise. Ah yes, here’s my icon
@Itz_coco
on
AI Water Calc Extension
21m 26s logged
Under the oh-so calm guidance of resources and my friend dearest, I am doing devlogs. I realized I didn’t fully understand the concept of devlogs during my last project and now I do. Then again, I could not do much since the code was finished way before StarDance. Anyways, the first step of extension creation is supposedly like creating different files. Like 5 in total: manifest.json , popup.html, popup.js, content.css and content.js. Not sure if this is the standard way but SoloLearn and other sites told me so and then a friend said this is the best route for a beginner like myself, lowkey hope they’re right tho cuz mehn tbh the site visits I have had to make for this manifest.json file ain’t for the weak. (Sorry for the abbreviations, it’s a bad habit, it’s even worse on my phone tbh) oh yeah so like this is basically me after my eyes couldn’t stand the laptop ray anymore and I took a screenshot of my progress rn, and will be gathering more info for next steps on my phone so I can go get my glasses and pull an all-nighter cause I have other programs I am a part of like the Eco-Ambassadors Solutions Lab stuff,anywaysssss. Behold 🥹🥹🥹🥹🥹🥹🥹🥹
