Tuj Tries to Make a Firefox Extension 3

After reading the examples, Tuj felt that he understood them well except that Tuj was still at a loss as to how to write his own extension.

Well, Tuj decided to start with the pop-up. He wanted a button to reset a variable for easier debugging. He quickly made an html file which contains a button with an ID and which pulls in a js file. Tuj wanted to add an event listener for the click event of the button, so that when clicked, the variable is set to a default value. Tuj has been quite spoiled by jquery. Still he refrained from pulling in a large library, at least not before making his trivial extension work. He attempted plain js, by adding listener to document's load event. Nothing happened. It seemed that this event did not exist?! Well, Tuj had no idea. Later Tuj figured out that he could listen for window's load event or document's DOMContentLoaded event. Well, Tuj's mental map of how a web page loads was a mess. ¯_(ツ)_/¯

However it seems that people simply load the js file at the end of body in popup...

By now he has become tired of typing document.createElementById and started missing the jquery $. Any solutions?

One important thing about debugging pop-up is that either one should either make the logs persist or disable auto-hide of the pop-up. Otherwise one sees nothing in the add-on debug console. Another note is that the add-on debug console is not the web developer's tool, though they look identical to Tuj. The add-on debug console can be accessed via the about:debugging page.

Tuj Kept experimenting.