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.