October 14, 2010 at 3:00 PM by Dr. Drang
That code—with two small cosmetic changes to make the popup wider and to give it a contrasting background color—can be found at this GitHub repository. I turned it into an extension by following the instructions in Apple’s Safari Extensions Development Guide
First, I enrolled in the (free) Safari Developer Program and followed the instructions to get a Safari Developer Certificate. This is a several-step process that bounces you back and forth between Safari itself and the Keychain Access program, but the process is fairly straightforward
Then, certificate installed in my Keychain, I opened Extension Builder in Safari and clicked the + popup menu button in the lower left corner to create a New Extension. This created a new folder, which I named
df-footnotes.safariextension. If you want to start from my repository instead of from scratch, make a local copy of the repository—by either cloning or downloading the zip—rename the folder to
df-footnotes.safariextension, and choose Add Extension… from the + popup menu button in the Extension Builder window.
Next, I filled in the informational fields with my name, the extension’s name, and so forth. (If you’re starting from my repository, this information will already be filled in from the repository’s
Then I set the Extension Website Access Level to Some and set the Allowed Domains pattern to
to match every page in the DF domain.
df-footnotes.js and saved it in the
df-footnotes.safariextension folder. I then clicked the New Script button in the End Scripts portion of the Injected Extension Content section and selected that file.
Again, this file will already be present and the selection already made for you if you start from my repository.
At this point, it’s just a matter of building the extension (click the Build Package button at the top) and installing it in Safari.
If you want the extension but don’t want to go through the hassle of building it, you can download a zip file with a prebuilt copy. But where’s the fun in that?
I should mention that the popups from this extension don’t work as nicely as the jQuery-based popups here or on Mathis’s site. On Daring Fireball, you’ll find that the popup goes away as soon as you move the mouse off the footnote marker, which means you can’t click links in the popup.2 There’s some incentive for you to download the repository and make some improvements.
This was a gentle way to get my feet wet in the Safari extensions pool. Just one script; no toolbars or context menu items. Now that I sort of understand the process, I can move on to more complicated extensions.
I added three icons in 32-, 48-, and 100-pixel sizes. I didn’t use these template files but chose the sizes based on them.