How do I get this very simple pageAction Chrome Extension ported to run on Firefox and Safari

Question

This is a very simple Chrome Extension that uses pageAction. It evaluates the current URL, places an icon in the address bar if the URL matches a condition (location, really) and changes the URL (using a bit from the original location) to a new location when the user clicks the icon.

This was simple and straightforward to build the Chrome Extension. The docs are simple and Google provide some code examples that could be adapted and built upon. Finally, the CWS is easy to deploy to and from.

However, I have no experience whatsoever trying to do the same in FF or Safari.

Can someone please give me some guidance with some code examples and packaging advice?

Thanks!

Background.js

function checkForValidUrl(d, c, e) {
    if (c.status === "loading") {
        var b = e.url.split("/")[2];
        var a = e.url.split("/")[3];
        if (b === "www.somewhere.com" && a === "unfiled") {
            chrome.pageAction.show(d)
        }
    }
}
chrome.tabs.onUpdated.addListener(checkForValidUrl);
chrome.pageAction.onClicked.addListener(function (b) {
    var a = b.url.split("/")[4].split("+").slice(0, 1);
    chrome.tabs.update(b.id, {
        url: "http://www.somewhere.com/filed/" + a
    })
});

Manifest

{
  "name": "MyExtension",
  "version": "1.0",
  "description": "This is nifty",
  "background": { "scripts": ["background.js"] },
  "page_action" :
  {
    "default_icon" : "icon-19.png",
    "default_title" : "Click to do your stuff"
  },
  "permissions" : [
    "tabs"
  ],
  "icons" : {
    "48" : "icon-48.png",
    "128" : "icon-128.png"
  },
  "manifest_version": 2
}

Answer 1

This answer is for Safari only.

For a Safari version of this extension, the raw materials you will need are:

• a "global" HTML page (Safari's equivalent of a Chrome extension's background page)
• a script that runs on the global page, provided either as an inline <script> or as a .js file
• an icon for the toolbar button, called a "toolbar item" in Safari extension parlance

After creating a new, empty extension with Extension Builder, create the aforementioned files in, or move them into, the extension's folder. In Extension Builder, select your global page. Create a toolbar item, give it a label and an identifier, and select the toolbar button image. You'll also need to specify a command for the toolbar item; just enter any string, like "munge-url".

In your global script, you will add a listener for the "command" event, which Safari will send to the global page when the user clicks your toolbar button. The listening function will read the URL of the current tab, munge it, and set the URL of the tab to the munged one. Like this:

safari.application.addEventListener('command', function (evt) {
    if (evt.command == 'munge-url') {
        var currentTab = safari.application.activeBrowserWindow.activeTab;
        var oldUrl = currentTab.url;
        var newUrl = mungeUrl(oldUrl);
        currentTab.url = newUrl;
    }
}, false);

The mungeUrl function needs to be defined, of course.

That should be about it. If you want to get fancy, you can add code that will disable or enable the toolbar button based on the URL of the current tab; for that you will need a listener for the "validate" event, which is discussed on this page of the Safari Extensions Development Guide.