I am having a hard time trying to build a Firefox Extension. What did I miss from Javascript?

[pdelfino]

Hi campers,

FCC has been great for me so far. I finished the following certificates: Responsive Design (HTML &CSS) and Javascript Algorithm and Data Structures. In addition, I also almost finished the front-end certificate. I did all the exercises and 3 projects with React but I still need to finish 2 of them (they are 5 in total).

Moreover, I have been using the knowledge provided by FCC to build some real projects. One of them is my personal blog at www.pdelfino.com.br (Portuguese content only). I used HTML, CSS, and vanilla Javascript to build it. I also used Amazon S3, Amazon CLI, Git, and Github to provide continuous deployment over the Github repo.

However, even with this “experience”, I am having a hard time trying to build an extension (add-on) for firefox. Currently, Firefox extensions are cross platforms, so the code is also going to work for browsers like Chrome.

The challenges I am facing have nothing to do with Firefox. I would have a hard time if I tried something for Chrome too.

If firefox is not the problem, what am I struggling with?

I am having problems with javascript. For instance, take a look at the second tutorial made by the Mozzila Foundation teaching you how to build an extension

I can follow some of it. The architecture is fine. Basically, they use HTML, CSS, Javascript, and JSON. A firefox extension is like a tiny webpage having the JSON file as the Maestro or the heart of the application. The JSON file organizes everything and indicates the pointers.

I am ok with the CSS, HTML and JSON. I am almost totally fine with the architecture.

Nonetheless, I am really struggling with the javascript code. Things like the built-in functions bellow are hard for me:

  document.addEventListener("click", (e) => {

 return browser.extension.getURL("beasts/frog.jpg");

browser.tabs.insertCSS

browser.tabs.sendMessage

browser.tabs.query

document.querySelector

browser.tabs.executeScript

window.hasRun

browser.runtime.onMessage.addListener

These are all built-in commands. They all came kind of out of the darkness for me. I would not even know they are what I need.

My problem is not to solve technical interview questions in Javascript. I can do bubble sort and Project Euler number theory problems. I am struggling with the commands above.

1 - Since there are better developers here, what I am lacking?

2 - What should I study?

3 - Where can I find more structured knowledge on this topic?

Thanks in advance.

[ilenia]

@pdelfino

These are all built-in commands. They all came kind of out of the darkness for me.

the fcc curriculum doesn’t have them

you can find documentation to learn about them, what they do and how to use them

it’s totally expeced that you need to research on your own
you can google them, research what they do

[pdelfino]

Ok, thanks!

But how do I know what I need to build my project?

I am afraid I am going to spend a lot of time reading the documentation on stuff that I do not need to build the project I have in mind.

Is there a course you would recommend?

[ilenia]

I don’t know of any course
but if you have in mind what your extension should do, and break it down to small steps, you should be able to google the DOM methods or browser api methods you need

[pdelfino]

Va bene, grazie mille!