This article explains the basics of creating an add-on for FireFox using the FireFox Add-on Builder and Add-on SDK. Read more about them on the Mozilla website. As an example, I’ll use the GroupDocs add-on. (You can download the source code from Github.) It’s an advanced extension so I’ll focus on the basics and highlight a couple of interesting aspects communication between scripts. I’ll mainly look at the add-on folders data and lib in the /resources/groupdocsviewer/ folder.
Creating an add-on: main.jsThe main.js file, located in the lib folder, is the entry point for the extension. It is executed when you install the add-on and then each time the browser is launched. At the top of the file is a ;ist of libraries linked in using the SDK command require():
- The widget library is used to create the icon that users click to open the GroupDocs add-on’s main window.
- The panel library creates the GroupDocs window that contains the add-on interface.
- The passwords library stores personal information in the FireFox Password Manager.
[caption id=“attachment_1460” align=“aligncenter” width=“393” caption=“Linking libraries, creating widget and panel”]
Communication between scriptsI mentioned that the scripts that run in the add-on interface do not have access to the main.js file’s context. They also can’t call the FireFox API: the FireFox API only works within the main.js context. This means that the add-on has two execution contexts: the main.js file, which as access to the FireFox API, and script files that work with the add-on window’s DOM model. Since main.js and the scripts that run in the panel don’t have direct access to each other’s content, we need to use messages to communicate between the two. To send a messages from main.js, use the panel object’s port.emit() method. It takes two parameters: the message, as a string, and the object the message is for. [caption id=“attachment_1461” align=“aligncenter” width=“581” caption=“Use panel.port.emit function for sending message from main.js”]
[/caption] To receive messages from the main.js file, use the panel class’ port.on() method. This too takes two parameters: the message, as a string, and the parameter handling function. When a message arrives, this function can take the second parameter of the sent object – port.emit(). [caption id=“attachment_1464” align=“aligncenter” width=“282” caption=“Use panel.on function for receiving message from main.js”]
Credential managementGroupDocs defines a message handler for storing and removing credentials in FireFox’s Password Manager. This process illustrates how to pass messages between main.js and the GroupDocs window. The first message is received when a user logs in and has selected the Remember me option. The second message is received when a user clicks Logout. You’ll notice, in the main.js file, in the first function, that the script checks whether the user is already logged in. If they are, the panel sends a message containing the login data. This way, users do not have to log in every time they restart the browser.
SummaryThis is how it works: widgets and panels are created in main.js. Then we have a message handler that ensures that a “show” message is generated when the panel is displayed. Code in main.js catches the message and sends a similar message to popup.js. Code in popup.js catches the message and initialises the extension. [caption id=“attachment_1465” align=“aligncenter” width=“573” caption=“Transit of the message of ‘show’”]