Writing Your Own Firefox Plugin

Firefox plugin basically is a Javascript program with XUL – XML User Interface Markup Language. This post will create a simple Firefox plugin which will highlight a specific word in a HTML. The following example is base on the work done by Robert Nyman @ How to develop a Firefox extension.

1. Open Firefox User Profile Manager by entering the following command in Terminal

  • /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P


 

2. Open Firefox with the new profile (dev is the profile name)

  • /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &

 

3. Enter about:config in the url address bar and set the following attributes

  • javascript.options.showInConsole = true
  • nglayout.debug.disable_xul_cache = true
  • browser.dom.window.dump.enabled = true
  • javascript.options.strict = true
  • extensions.logging.enabled = true


 

3. Go to your Firefox Profile folder. It should be located in /Users/<user>/Library/Application Support/Firefox/Profiles. The folder for the dev profile is vlgvsit9.dev below.

 

4. Under your profile folder, go to extensions, create a folder and name it to linktargetfinder@robertnyman.com. Then download the source and extract all the files. You should have a hierarchy as follow.

 

5. Here are some descriptions on the above files. If you want to get more details for the function of each file, please refer to the Robert Nyman @ How to develop a Firefox extension.

  • linkTargetFinder.js – Javascript controlling the behaviour of your plugin
  • browser.xul – XML User Interface Language defining the plugin layout elements on the browser
  • options.xul – Define the options/preferences dialog for your plugin
  • install.rdf – Installation profile of your plugin
  • locale/* – Plugin localization
  • skin/* – CSS and Images for layout

 

6. Edit the install.rdf and modify the maxVersion to 4.0.* such that it could work in the latest Firefox version

<?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>linktargetfinder@robertnyman.com</em:id>
		<em:name>Link Target Finder</em:name>
		<em:version>1.0</em:version>
		<em:type>2</em:type>
		<em:creator>Robert Nyman</em:creator>
		<em:description>Finds links that have a target attribute</em:description>
		<em:homepageURL>http://www.robertnyman.com/</em:homepageURL>
		<em:optionsURL>chrome://linktargetfinder/content/options.xul</em:optionsURL>

		<em:targetApplication>
			<Description>
				<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
				<em:minVersion>2.0</em:minVersion>
				<em:maxVersion>4.0.*</em:maxVersion>
			</Description>
		</em:targetApplication>
	</Description>      
</RDF>

 

7. Restart the Firefox with dev profile

  • /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &

 

8. There is a link target finder on the bottom right corner. click it and see what happen.

 

9. So whenever you make any code changes to the plugin, just restart the Firefox and your changes will take effect immediately.

Thanks again for the great work by Robert.

Done =)

Reference:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.