A quick start in developing Firefox add-ons

I know little about creating Firefox add-ons, but it took me a few days to learn this little. I have not had the opportunity to apply this knowledge for a real task, and who knows when it is necessary. There is a lot of information on the topic in English, but due to the scarcity of my English, this information was difficult for me to perceive. The articles I have seen in Russian are mostly translations in which much attention is paid to the details, but after reading them there does not appear a complete picture. My article is an attempt to create a small but holistic knowledge: where to start and how to work with it.


I think everyone knows that Firefox add-ons are distributed as xpi files. An xpi file is a zip archive, within which there are a number of files and directories. Files can be js, css, xul, image files and, it seems, even jar. Directories usually have standard names, but no strict requirements.

As my first addition, I wanted to make a button, on clicking on which the message “Hello, World!” Would be displayed. The button should have been able to be placed on an arbitrary Firefox panel. And I did it. I wanted to make such additions also because it is usually more convenient to create new projects not from scratch, but from some kind of template. In addition, I was wondering whether it is possible to work with the file system, since this is probably the most significant limitation of javascript.
')
I think it will not be interesting for you to follow the same path that I took to create only “Hello, World”, and you can take the accumulated information and immediately move on.

Preparation for work

I like to work comfortably. Therefore, I was puzzled by the search for suitable tools for my usual work style. I work under Windows 7, I write about it.

Create a separate Firefox profile:
close Firefox, press win + r and execute firefox -P
When creating a profile, you need to select a folder that will be easily accessible, for example:
D: \ experiments \ firefox
Download and install my template project helloworld.xpi . After installation inside the directory

D: \ experiments \ firefox \ extensions

A folder with the name will appear

helloworld@ru.wikiversity.org.xpi

May the community forgive me, the information about my achievements first appeared on Wikiversity. But this article is not a copy-paste, and, I hope, has a slightly different semantic coloring.

Archive content helloworld.xpi

I don’t know very well what each file is intended for and especially each word in it. I single out only those moments to which I paid attention.

content \ overlay.xul

<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://helloworld/skin/overlay.css" type="text/css"?> <!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/overlay.dtd"> <overlay id="helloworld-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="helloButton" label="&helloworld;" oncommand="alert('Hello, World!');"/> </toolbarpalette> </overlay> 

This is the main file, it says that the button should be added to the BrowserToolbarPalette panel. I saw somewhere that all panels have identifiers. In such a file, you can create not only a button, but also your own panel. The code is written in XUL.

Inside XUL can contain javascript or javascript can connect from external files.

 <script> function showHello(){ alert('hello!'); } </script> ... <toolbarbutton id="helloButton" label="&helloworld;" oncommand="showHello();"/> 

locale \ en-US \ overlay.dtd

 <!ENTITY helloworld "Hello World!"> 

This is just a reference to text constants.

skin \ ...

This folder contains the image for the button and the file with the styles.

chrome.manifest

 content helloworld content/ overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul locale helloworld en-US locale/en-US/ skin helloworld classic/1.0 skin/ style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css 

Obviously, this is an important file that configures the operation of the application. More did not understand.

install.rdf

 <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>helloworld@ru.wikiversity.org</em:id> <em:name>Hello World extension for Firefox</em:name> <em:version>1.0</em:version> <em:description>Demo Hello World extension.</em:description> <em:creator>Wikiversity student</em:creator> <em:unpack>true</em:unpack> <!--      --> <!-- Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.6</em:minVersion> <em:maxVersion>8.0.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF> 

In accordance with this file, the installation of the add-on. Interesting is the id tag, the identifier of Firefox as a product and without it will not work, and Seamonkey has a different identifier.

The working process

I think that the workflow of most JS developers looks like mine: I wrote a few lines - I looked at what happened. To see what has changed in XUL, you need to restart Firefox. This is a bit annoying ... just a little bit. Because I want to read the documentation on the Internet in parallel. And overload does not work quickly.

I found Extension Developer . After installation on the Firefox control panel, you need to pull out the 'Reload all Chrome' button. Changes within the code of the developed supplement will take effect immediately after clicking on the button.

Read function

In terms of working with the file system, I had a function (mostly copied from somewhere):

 function read(path) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("Permission to read file was denied."); } var file = Components.classes["@mozilla.org/file/local;1"] .createInstance(Components.interfaces.nsILocalFile); file.initWithPath( path ); if ( file.exists() == false ) { alert("File does not exist"); } var is = Components.classes["@mozilla.org/network/file-input-stream;1"] .createInstance( Components.interfaces.nsIFileInputStream ); is.init( file, 0x01, 00004, null); var sis = Components.classes["@mozilla.org/scriptableinputstream;1"] .createInstance( Components.interfaces.nsIScriptableInputStream ); sis.init( is ); return sis.read( sis.available() ); } alert(read("D:\\1.txt")); 

As I understand it, it is also possible to write to files, but I did not understand it anymore.

Conclusion

That's basically all that I was able to find out in a few days (a few free evenings) about the development of Firefox add-ons. I hope those who come across this topic for the first time will find the article useful. In my opinion, you have everything for a quick start: initial information, tools and process.

The request to the readers not to criticize strongly, I do not pretend to the role of a “knowledgeable” person and I can hardly answer additional questions.