October 1, 2012 at 11:48

Writing and Publishing a Safari Web Browser Plugin

After switching to OS X, I began using Safari as the main browser. Using the browser for several years, there were no problems working with it. That's the truth plugins to it are much smaller than to Chrome or Firefox, and therefore the convenience of viewing certain sites in different browsers is very different.

Since I’m just used to Safari and don’t want to switch to another browser, I decided that I could write all the plugins that didn’t reach me. Plus, it turned out to be very simple.

Under the cat is an example of creating a plugin and publishing it in extensions.apple.com

Training


First you need to choose what you will develop. Due to the fact that I often listen to music from Soundcloud , and the “jumping” comments on the site annoy me very much, I decided to write a plug-in that will automatically turn off comments when playing.
How it looks:

Included comments
image

Turning off comments
image

To develop the plugin, you need an Apple dev account. You can register it here .
Then you need to get a certificate to sign your plugins. There should not be any problems when registering and obtaining a certificate, just follow the instructions on the site.

Development


After installing the developer certificate, you can begin to develop. First you need to activate the developer mode in Safari-> Settings-> Extras-> Put a checkmark “Show development menu”

image

Now open the menu item Development-> Extension builder and configure your plugin, and then save it.
I wrote a js plugin using jQuery. You can read more about supported programming languages ​​and the capabilities of plug-ins for the Safari browser here .

image

In the folder where you saved the script, create the plugin.js file in it and the plugin code will be stored.
My code for an example
function soundcloud() {
    $(document)
        .ready(function () {
        $(".player")
            .each(function () {
            $(this)
                .children() != undefined && $(this)
                .toggleClass("no-comments");
        })
    })
};
soundcloud();


In Extension builder, in the "Final Scripts" section, select your script and click on Install.
Your plugin is created and installed in Safari.

Preparation for publication


Preparation for publication took me the most time. There are many little things to do:
  • Create icons with sizes 32x32, 48x48, 64x64, 100x100 pixels and put in the folder with the plugin under the name Icon-32.png, and so on.
  • Screenshot of the plugin with a size of 425x275 px.
  • Write a short and long description of the plugin.
  • Create a web page for the plugin. (For example, a blog post describing this plugin.)
  • Create a plugin update manifest file (described below as)
  • Upload the plugin to the server to be able to download it via a direct link.


With the icons, description and page of the plugin, I think everything is clear that regarding the manifest, it’s just an XML file which describes the current version of the plugin.

Template for such a file
Extension UpdatesCFBundleIdentifiercom.yourCompany.safari.yourExtensionNameDeveloper IdentifierYourCertificateIDCFBundleVersionYour current bundle versionCFBundleShortVersionStringYour current display versionURLYour-.safariextz-URL


My file example
Extension UpdatesCFBundleIdentifiercom.bukashk0zzz.safari.soundcloudcommenthiderDeveloper Identifier123456ABCDCFBundleVersion1CFBundleShortVersionString1.0URLhttp://mysimple.name/wd/Soundcloud_Comment_Hider.safariextz


The Safari Developer parameter is the number of your DEV account at Apple. It can be found in the Extension builder in the upper right corner.
Also, before publishing, do not forget to add the .safariextz type to MIME on your web server.
Example for Apache:
AddType application / octet-stream .safariextz

Publication


If you have prepared everything, you can safely open and send your creation to Apple for review.
I published the plugin the second time, at first it didn’t work, because I did not add icons to the plugin. The plugin under consideration by Apple was both the first and second time of 7 days. I liked that they give a clear answer why the plugin is not published, as it is clear what needs to be fixed.

This plugin is published in the Entertainment section called “Soundcloud Comment Hider”.

The source code of the plugin and the rest is available on github .
Link to download the plugin.
Tags:

Also popular now: