How to Develop Safari Extensions

build safari extension tips

Image credit:

build safari extensionIf you have Apple gadgets, you are for sure familiar with Safari. Safari web browser has created extensions that enable plugin developers to develop add-ons and plugins that enhance user experience. If you are familiar with CSS, HTML, and JavaScript or any of these three, you can easily develop Safari extensions.

Creating Safari extensions can be intimidating. But here’s a simple tutorial to walk you through the process of building Safari extensions:

  • Get Apple’s free developer certificate

Before you can create your Safari extensions, Apple requires you to get certified as their Safari Developer. The Safari Developer Program is free. You will be directed to the Member Center after you have signed up. Open the Developer Certificate Utility and launch the Keychain access.

  • Launch the Develop Menu

Enable the Develop menu to start building your Safari extensions. Go to Safari menu, open Preferences, and select the advanced tab and check mark the Show Develop menu found in the menu bar.

  • Develop the extension

Create your extension from the develop menu. Select the Show extension builder and click on the plus button located at the bottom left corner. Select New Extension in the dropdown. A dialog box will open. Save your new extension by naming it whatever you like.

  • Fill out your extension details

Fill up the extension builder with the necessary details including your name, description, and website link. This information will show once you made your extension public. You should also place your company name under the Tweak the Bundle Identifier.

It is also necessary to indicate whether you want your extension to load on all web pages or just on a certain URL. You can do this in the Extension Website Access section.

  • Encode the Code

Start loading your codes. Load your own external HTML, CSS, and JavaScript. Find the extensive folder you saved earlier and build the file under the macworld.css folder. Once you have loaded the file, go back to the Extension builder. Select the New Stylesheet button and upload your CSS file.

  • Add the CSS

Install the extension after you have added your custom CSS. You can still make changes if necessary. You can see the changes by using the Extension Builder’s reload button instead of using the Safari’s refresh button.

  • Edit via JavaScript

If you are not yet satisfied with you extension, the JavaScript can help you tweak the codes to make it look better. Go to the CSS file folder, select the Injected Extension content, and open the New Script button. Select your custom-made script.

  • Save your extension

If you are satisfied with your extension, you can already save it by clicking on the Build Package Button at the Extension Builder Window. Once done, you can now share your extension online.

Now that you are done creating your first extension, feel free to recreate the steps and do the process again to create another extension for Safari and be your own Safari extensions developer.

Develop Safari extensions like a pro by following the above steps!