#programming project

[izicodes]

Coding A Simple Firefox Extension

Hiya! Today I want to share my experience creating a simple Firefox extension. I was a bit intimidated by the idea of creating an extension, but I was determined to give it a try! Been on my 'projects to-do' list for a long time! 😅

I found that the process was actually quite straightforward, and with some guidance from a couple of YouTube videos, I was able to create a working (temporary) extension in just an hour. My hope is that this post will serve as a helpful guide for anyone who is interested in creating their own Firefox extension~!

What exactly are we making?

We will be making a simple temporary extension - an extension that only you have access to e.g. end-users will not be able to use the extension. This is a way to test if your extension works and find issues. I might make another post on how to actually upload it for other people to use, but for now, this method is for you to use the extension.

This is the link to the official Mozilla Firefox 'Temporary installation' Guide' for extenisions - LINK

Now, for the steps into making the extension:

Setting up the development environment

Creating a manifest file

Adding a pop-up window

Attaching JavaScript functionality to a button

Load your extension in Firefox

Let's get started~!

Step 1 - Setting up the development environment

Obviously, you will need to have Firefox installed on your computer. You will also need a code editor, such as Visual Studio Code or Sublime Text, to write your code. I'm going to use VS Code.

In your code editor, create a new folder where you will store your extension files. You can name this folder whatever you like. For this example, I will call it 'Firefox Extension'. I also recommend adding the following files in the folder:

index.html (or in this case popup.html file)

icon image in .png or .jpg or similar formats

manifest.json - talked about in the next step

script.js

Step 2 - Creating a manifest file

The most important file I believe when creating an extension is the manifest JSON file. This file will contain metadata about your extension, including its name, version, and permissions. In your new folder, create a new file called "manifest.json".

This is the general structure of the file. The icon size you need to have is 48x48 pixel size image and then you can have others to be responsive to screensizes, I just added one extra. The 'browser_action' part includes the default icon image that will display an icon in the Firefox toolbar and the popup html file. In 'scripts', that is where we will add the JavaScript code to run.

Step 3 - Adding a pop-up window

The code simply displays the text "Hello World" and a button in the center of the window. I assume you're good at your HTML and CSS so I won't go into too much detail here but the CSS is in the style tags within the head tags and what we can see also is what is between the body tags - the 'Hello World' and the 'Click me!' button.

Don't forget to include the script tag at the end of the body tag so it'll link to the script.js file in your folder AND include "scripts": ["script.js"] in the manifest.json for the javascript code.

Step 4 - Attaching JavaScript functionality to a button

Again, I hope you very basic JavaScript. This code basically adds an event listener to the button with the ID "myBtn" (which is the button with 'Click me!' on it). When the button is clicked, it changes the heading 1 text from 'Hello World' to 'The button was clicked!'.

And that it! Done with all the coding part and now to upload it for you to use~!

Step 5 - Load your extension in Firefox

Open Firefox and type "about:debugging" in the address bar. This will open the Firefox Developer Tools page. Click the "This Firefox" section to the left of the page, then click "Load Temporary Add-on". Navigate to your extension folder and select the manifest.json file.

The extension is now loaded in Firefox! Click the icon in the toolbar to see your pop-up window!

Whenever you make changes to the extension, back on the Firefox Developer Tools page, click the 'Reload' button on your extension section and changes should show up!

I hope that this post has been helpful to you and that it has inspired you to create your own Firefox extension! 👩🏾‍💻💗 Remember, the most important thing is to have fun and experiment with different ideas - play with the colours or sizes or the javascript code! Don't be afraid to try new things and explore!!

Extra links that helped me learn:

How to build an extension for Firefox in less than 5 minutes [video]

Temporary installation in Firefox [webpage]

Thanks for reading 🥰💗

#xc: programming blog post #programming project #coding #programming #studying #studyblr #codeblr #progblr #firefox #extensions #computer science #project #tech #developer #web dev #add ons #comp sci #html5 tutorial #tutorial #learn how to code #my resources

[d0nutzgg]

Tonight I am hunting down venomous and nonvenomous snake pictures that are under the creative commons of specific breeds in order to create one of the most advanced, in depth datasets of different venomous and nonvenomous snakes as well as a test set that will include snakes from both sides of all species. I love snakes a lot and really, all reptiles. It is definitely tedious work, as I have to make sure each picture is cleared before I can use it (ethically), but I am making a lot of progress! I have species such as the King Cobra, Inland Taipan, and Eyelash Pit Viper among just a few! Wikimedia Commons has been a huge help!

I'm super excited.

Hope your nights are going good. I am still not feeling good but jamming + virtual snake hunting is keeping me busy!

#programming #data science #data scientist #data analysis #neural networks #image processing #artificial intelligence #machine learning #snakes #snake #reptiles #reptile #herpetology #animals #biology #science #programming project #dataset #kaggle #coding

[sivaniverse]

POV you are working on a project. Lots of code and multiple datasets and processed datasets and files later when your code isn't working the way it is supposed to. So you have decided to delete everything and restart. It hurts to delete all these things after working so hard on them. But another part of me feels relieved to declutter and once again start afresh with a clean slate.

#code #coding #programming project #project #sign language to text project #coding project #programming #programmer #python programmer #python #python projects

[hermit-frog]

#Interview with the Vampire #loudaniel #danlou #Louis de Pointe du Lac #daniel molloy #iwtv #iwtvedit #tvedit #Vampterview #*gif #truth and reconciliation #there are so many parallels between them in s1 but i'll probably wait for s2 to make it #it will be a huge project. idk how to fit it all #this gifset would work better in video format but i got no programs nor experience #flashing gif

[fawfulydoo]

babies first toon boom harmony animation

#honestly this program is a lot simpler than i remember it being #once i finish my current projects its bye bye flash #fawfulanimates #invader zim #dib membrane #toon boom harmony #dib #iz #jhonen vasquez #2d animation

[ihatebrainstorm]

Quick little thingy I made for an assignment,, The sheer blood boiling turmoil this assignment gave me last week holy crap ToT

#speedran the animation/clean up/colouring process #but then after a program crashed my entire project folder disappeared??????? which set me back a whole day???? #also fighting the export settings bc for over an hour it would only export blank videos imghhhhhfhg im never touchign this ever again #transformers #maccadam #maccadams #transformers fanart #frootertooter archive #arcee

[muffinlance]

Oh so the clown ads are over? Too late Tumblr I already cancelled ad free uninstalled your app and discovered the power of ublock in mobile FireFox. AND tags are editable in the web version?

There's no going back

#fuck you and the clown you rode in on Tumblr #I gave you money in misguided token support #now I dream of someone setting up a social media site AO3 style #non-profit that shit #no ads ever #(but yeah let's agree to perma ban the nazis and the terfs) #(haters already bought themselves the bird site) #oh for the programming knowledge to set up a permanent ad-free home for fandom #is there a GitHub project for this? #Tumblr #one piece #Luffy #ad free #which is anything but

[critterpdf]

some lesbians having music moments <3

#its not necessarily pearlina but i drew it so theyre gay for each other. tbh #splatoon #splatoon 2 #pearlina #pearl splatoon #marina splatoon #my art #art.pdf #this was part of a project i did for my bf that was DEFINITELY not custom amiibo cards. tbh #program: procreate #digital art #artists on tumblr

[pantherloid]

The duality of Kaito.

#vocaloid #kaito #he was a cat...then he was a dog #do i tag the games? NAH #i installed project sk just so i can hate on it more accurately #i drew this on my phone/different program so thats why it may look a little different #idk kaito looks a little far from my usual art style #he just has the most typical bishounen face shape i usually always avoided that 🗿

[lonestarflight]

Armstrong and Scott with Hatches Open

"Astronauts Neil A. Armstrong and David R. Scott sit with their spacecraft hatches open while awaiting the arrival of the recovery ship, the USS Leonard F. Mason after the successful, but early, completion of their Gemini VIII mission. They are assisted by USAF Pararescuemen Eldrige M. Neal, Larry D. Huyett, and Glenn M. Moore. The overhead view shows the Gemini 8 spacecraft with the yellow flotation collar attached to stabilize the spacecraft in choppy seas. The green marker dye is highly visible from the air and is used as a locating aid."

Date: March 16, 1966

NASA ID: S66-18602

#GT-8 #GT-VIII #Gemini 8 #Gemini VIII #SC8 #NASA #Gemini Program #Project Gemini #splash down #recovery #March #1966 #Pacific Ocean #USS Leonard F. Mason #USS Leonard F. Mason (DD-852) #Gearing class #Destroyer #ship #United States Navy #US Navy #Navy #USN #my post

[humanoidhistory]

Snapshots from the Gemini 7 mission, December 4-18, 1965.

#gemini 7 #gemini 6 #earth #space #history #nasa #project gemini #gemini program #1965 #1960s #december 4

[doctorsiren]

every time I mention Ace Attorney around my (defense lawyer) father, he asks if I’ll be going to law school now

the best bit was me telling him that if I did that, I would be fulfilling the Phoenix Wright prophecy because I’d be dropping my art degree to pursue law

#doctorsiren #not art #siren speaks #ace attorney #I go to the same college that he went to law school at and the view from my dorm is literally the law school #see if I wasn’t trying to be an artist #I *would* be going into law or criminology #I did mock trial all throughout high school #went to state for courtroom art all 4 years #i feel like Phoenix defo would have done courtroom art for mock trial when he was in high school #I’m just projecting because I know how the California Mock Trial Association works (I’m from California) #it’s pretty interesting to me that it took me until after my freshman year in COLLEGE to get into AA #when I did law stuff all throughout high school #maybe it was better than I didn’t get into back then HAHA #I feel like I can appreciate it more as an 18/19 year old sophomore in college than I could’ve as an 13/14 year old freshman in high school #also I made a joke that if I don’t get into my program this next year when i apply then I’ll go to law school instead haha

[d0nutzgg]

Life Updates: buildspace, an Idea, and some Concepts

Hey everyone, thanks for all the support on my prior posts having to do with machine learning! I know I didn't mention this really but recently I was accepted into S4 of buildspace which is like a "school" for creatives. I am doing Nights & Weekends but it has been a lot of fun since I started! We just did our first project which was creating the idea we will be working on throughout this "season" of buildspace. This was mine:

I know you all can tell I am really passionate about helping others with the research I do with machine learning / AI. I am wanting to make it into a nonprofit type business while I am in buildspace for s4.

I have some Proof of Concepts already which you can check out on my Kaggle here:

However, I am working on another project today that uses Logistic Regression and XGBoost models stacked together to predict heart failure mortality. I plan on doing a full walk through of the project to help show investors and buildspace what my goal is for my business.

What are your ideas on this? Do you think I should go for it? What are your dreams if you are a software engineer yourself? I want to hear from you all!

#programming #programmer #technology #coding #huntingtons disease #buildspace #machine learning #ai #aicommunity #artificial intelligence #python programming #python projects #programming project #health #medical industry #medical field #medical research

[sivaniverse]

I completed a project today!

I did a small scale, self assigned project, but nevertheless a project. Something I wanted to do. And it turned out so well. Chef's kiss. I restarted it three times after starting it in the morning. But it was worth spending a whole day on it!!

I'm going to make my next YouTube video about it!

#coding #coder #blog #programmer #programming #programming project #project #youtube video

[alwaysbewoke]

#universal basic income #UBI #social welfare #unconditional transfer payment #means test #guaranteed minimum income #poverty line #full basic income #partial basic income #pilot projects #Mongolia #Iran #child benefit #pension #Bolsa Familia #Thamarat Program #economic crisis #COVID-19 pandemic #direct payments #Alaska Permanent Fund #negative income tax #NIT

[l3viathanss]

24 HOURS UNTIL THE TOMB OPENS—PAUL GETS BORN

#nona the ninth #the locked tomb #comic #tlt #camilla hect #palamedes sextus #camilla the sixth #palamedes the sixth #Paul tlt #my art #art #I went to a comics program it was awesome!! #this was my final project #not a single person there had read the locked tomb #but there was nothing I would have rather made #horrifically wonky and etc.... but I can hold the printed version in my hands #and my compositions are pretty sick #in love forever and always!!