How To Create A Custom Safari Extension Bar

Standard

Safari-extension

Almost 2 years ago, I posted how to deploy a custom Safari Toolbar. But until now I have not posted on how to make the Toolbar (READ: Extension Bar) until now.

The reason for the delay was due to me not really being literate with the technology used to create an Extension Bar, 2 years on & i’m still not!

We use the Extension Bar to deploy links to company websites & resources. As it seems most web based products we have only support Safari on a Mac, we’ve found this is a good way to drive people to use Safari to access these sites, even  if they use other browsers for general browsing.

I hope the below helps you to create your own.

Prerequisites

To begin, you’ll need to follow the below  steps:

  1. Follow the steps here to create a Safari Developer account & enable Safari’s Developer Tools
  2. Download the macmule Toolbar example.

Once downloaded, the folder should contain:

Screen Shot 2014-05-18 at 23.00.46

To install, open Extension Builder, click the + button. Then select “Add New Extension”  & navigate to the location of the “macmule Toolbar.safariextension” folder. Once added, click “Install.” The Extension Bar should be added to Safari, like the below:

macmuleToolbar

What does what?

As mentioned I am not particularly literate with the technologies used, so I’m going to explain in a luddite-esque manner which bit relates to what.

Toolbar Button

macmuleToolbar copy

Once the example Extension Bar has been installed, you should see a new Toolbar Button. Some of the settings for this button including the Tooltip that appears on hover over & the icon used can be found in Extension Builder within the following section

Screen Shot 2014-05-19 at 23.04.53

The “toolbar_icon.png” is the icon within the Toolbar button, this image needs to be of limited dimensions & in the example is a png with dimensions of 64 x 64. But as Extension bars are essentially websites, you’ll need to copy the image to use within the examples .safariextension folder, then you can select a new image from the “Image” drop down.

If you press the Toolbar button, it should toggle showing/hiding the example Extension Bar. I really like this (as do the people that have this on their macs) as it can free up screen estate when needed.

This is actually JavaScript, & the file “toolbar_button.js” found within the examples .safariextension folder is what is controlling this behaviour. It’s also shown below for reference.

Extension Bar

macmuleToolbar copy 3

The Extension bar itself is just a 30px high web site, as such we have a html file which in the example is called “extension_bar.html” & is shown below. The macmule icon is called “extension_bar_icon.png” & can also be found in the examples folder.

The 30px height is very important, I’ve spent too much time trying to create a drop down menu like the standard Safari Bookmark folders, only to find that the drop down has been constrained by the 30px  with no way of overriding it.

This html file is specified within Extension Builder under the “Extension Global Page” section, if you place another html file within the .safariextension folder you can select it from the drop down.

Screen Shot 2014-05-19 at 23.21.08

With the Extension Bar being a website, we can then style it using CSS. In the example this is called “extension_bar.css” & is shown below.

This CSS file is reference by the html file as normal as well as being defined within Extension Builder. Again as with the other files, if you place another CSS file within the .safariextension folder you can select it from the drop down.

Screen Shot 2014-05-19 at 23.21.18

The below is our current toolbar, just being shown to give an example of what you can when editing the CSS & html files alone.

macmuleToolbar v2

Editing & Viewing Changes 

I make the needed changes within TextWrangler to the html & css files directly, then make any changes within Extension Builder (for Tooltips, css files to use etc). But work in whatever way suits you best.

Then within Extension Builder click “Reload,” this affectively refreshes the Extension Bar with the changes made.

Deployment

Once you are happy with your Extension Bar, click “Build Package.” This will create a complied version of the Extension Bar, then you’ll need to deploy it to your Macs using your favourite packaging too to the ~/Library/Safari/Extensions/ folder for any account you’d like to deploy to.

I use Composer, & create a DMG. Once uploaded to Casper we deploy using FEU & FUT’s.

But this only copies the files into the correct place, into order to install the Extension Bar run the script here.

For more information, please see the Apple Safari Extensions Development Guide.

One thought on “How To Create A Custom Safari Extension Bar

Leave a Reply

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