Before you can build and install your custom extensions, you’ll need to get a free developer certificate from Apple. Go here, and sign up for the Safari Developer Program. After registering as a Safari Developer, you’ll get redirected to the Member Center. Then, you can click to launch the Developer Certificate Utility. Apple will walk you through the process, which will include launching Keychain Access on your Mac at one point. Once you finish this step, you don’t have to worry about it anymore.
Step 2: Enable the Develop menu
Step 3: Create the Extension
From the Develop menu, choose Show Extension Builder. Click the Plus button in the bottom left corner of the window and choose New Extension. In the Save dialog box that appears, name your extension (I called mine Daring Macworldball) and save it wherever you’d like.
Step 4: Start filling out details
The first few fields you’ll see in the Extension Builder window are mostly self-explanatory; you provide the display name for the extension, your name, a description, and a link to your Website. That information becomes useful if you publicize your extension and share it with others.
Tweak the Bundle Identifier, too. Replace the “yourcompany” text with your name or your company’s name.
Then scroll further down to the Extension Website Access section. You need to indicate whether your extension should load itself on every Web page you visit, or only on specific URLs. For this example, choose Some from the dropdown.
We want this extension to work on every macworld.com URL, so in the Allowed Domain field that appears, type in *.macworld.com—the asterisk ensures that any subdomains are covered, too.
Step 5: Prepare to code
Once the file’s in place, switch back to Safari and the Extension Builder window. Scroll down to Injected Extension Content and hit the New Stylesheet button. Choose your newly-created CSS file from the dropdown that appears.
Step 6: CSS magic
Now, go back into your editor and start adding some custom CSS. Here’s a snippet of the code that I dropped in.
Save your changes, then switch back to Safari again. Click the Install button at the top of the Extension Builder window. This—surprise!—installs your extension; you can see it in the Extensions panel of Safari’s Preferences now, too.
As you make tweaks to your CSS files (or other files that you create for your extension), the Extension Builder’s Reload button will become your best friend. Rather than hitting Safari’s Refresh button each time you tweak your extension, you simply hit Reload, and that causes Safari to re-inject your custom code into the page without your needing to refresh.
Note that because of the way Safari prioritizes extensions’ CSS, you’ll need to make liberal use of the !important operator to ensure that your custom code has the intended effect.
First, go back to the folder where you created your CSS file. Create a new file there called macworld.js. Then head back into the Extensions Builder, find Injected Extension Content, and hit the New Script button next to End Scripts. (Start Scripts execute before the page loads; End Scripts wait until the DOM is finished rendering.) Choose your newly created script.
Step 8: Give it away
If you’re ready to package up your new extension to share with others, just hit the Build Package button at the top right of the Extension Builder window. That will create a standalone .safariextz file that you can post online or share via e-mail.
Extensions, of course, can also take advantage of other Safari interface options, like custom bars, context menu items, and toolbar entries, but those are a bit beyond the scope of this tutorial. Now that you’re this far, though, you should be able to make more sense of Apple’s documentation on them. Armed with the information you already have, however, you’re well-equipped to create all sorts of Safari extensions to manipulate the Web pages you visit.