Yannick Weiss

Safari Extension

My Notes on writing a Safari Extension. Writing a Safari Extension is really simple, you access Safari properties and interact with your custom UI elements by writing Javascript. Documentation

Toolbar Button

Every open window has his own instance of your toolbar button. If you want the active (front most) you have to filter it safari.application.activeBrowserWindow.

var items = safari.extension.toolbarItems;
var item = items.find(function(v) {return v.browserWindow == safari.application.activeBrowserWindow})

Even better if you listen for the buttons validate event. Validate gets called everytime the user interacts with Safari (load page, reload, new tab etc).

safari.application.addEventListener("validate", validateCommand, false);

function validateCommand(e) {
    // setting the image of my custom button
    if (e.command == "buttonCommand") {
        e.image = safari.extension.baseURI + 'Icon-Off.png';
    }
}

Reloading a page

var activeTab = safari.application.activeBrowserWindow.activeTab;
activeTab.url = activeTab.url;

Common Mistakes

  • Check the types when reading from the settings. I found they are not consistent.
  • Check if the URL bar is not blank.

Companion

To break out of the Safari Sandbox you can create a standalone OS X application with an included Safari Extension Companion. This allows you to add functionality outside of Safari.

The only downside the user has to download and start an additional application for this to work.

download instructions

Extension Gallery

You can submit you extension to the official gallery. It requires you to sign the extension and host it by yourself. You also have to host an .plist file for updates, so you can publish new versions directly to the extension gallery.

Icon

You need your Icon Icon.png in multiple sizes, I would recommend starting with a 256x256 for the extension gallery and and a 128x128 version for the extension.

If you provide multiple icons for display at different sizes, name the 64 x 64 icon file Icon-64.png. For best results, include an Icon-48.png and Icon-32.png for optimized display at smaller sizes. To optimize the appearance of your icons on high-resolution displays, include an Icon-96.png and an Icon-128.png as well.

My Extensions

Open in Chrome uses a separate application to open an URL in Google Chrome.

Third Party Blocker uses the Content Blocker API to block all third party scripts, but lets the user add exception for by clicking on the toolbar button.