Developing a really simple browser extension

Question

I'm looking to developing a browser extension.

This extension once installed will tell the browser to include a javascript file on all page loads from a list of specific domains.

This type of extension is called "Content Scripts" by Google Chrome.

From what I read, to create this type of extensions for Chrome you simply put this code in "Manifest" File

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

Once the extension is installed jquery.js and myscripts.js will be included on every page load of google.com

This approach to extension development adopted by Chrome seems really easy.

My question is how difficult would it be to replicate this type of extension for the other major browsers?

Answer 1

Firefox itself doesn't provide a simple way to load content scripts. However, the GreaseMonkey add-on does and there is a large collection of example scripts to choose from on http://userscripts.org/. Add to this that GreaseMonkey scripts can be compiled into a "real" extension that no longer needs GreaseMonkey, and they can be installed in Chrome as well (without needing an extension).

Another possibility for Firefox is using the Add-on Builder or SDK and the page-mod module. Something like this should work:

var pageMod = require("page-mod");

pageMod.PageMod({
  include: ["http://www.google.com/*"],
  contentScriptFile: [data.url("jquery.js"), data.url("myscript.js")]
});

With the Add-on Builder it should be fairly easy to turn this code into an actual extension. I have no experience with the Add-on SDK however and so I cannot offer you any additional help.

Answer 2

Try Kango Framework. This is a cross-browser extensions framework. You can develop extensions for all major browsers working with single source code. Supports IE, Firefox, Chrome, Opera and Safari.