A Step-By-Step tutorial on building your own Safari extension (part 2)

EmailGoogle+0LinkedIn0Twitter2Facebook0tumblrDigg

PART 2: Building the extension

Getting started

This is the second part of the tutorial, If you missed the first part of this tutorial, you can find it here.

Open listed files using your preferred IDE or text editor:

  • global.hml
  • popover.html
  •  listner.js

Sublime Text 2

The End Script

The main goal of using an End Script,because it has access to the DOM of the web page. This is the only place where we can put ourJS code with the ability to addthe event listener on the visited page elements.

listener.js souce code

 As you can see in the source code above in line 28, the advantage of using JQuery.on() that the attached click Event handler clickHandler() will work for both current and FUTURE elements (like a new element created by a script). The purpose is that when the user clicks on an element clickHandler() will be executed and the clicked element (the object) itself will be passed as parameter to this function. Inside this function we check the element type. If it is a link or an element wrapped by a link tag <a> we dispatch a message containing link information to the Global Page.

The Global Page

global.html source code:

 As show above in the Global Page source code, the event listener in line 13 is executed once Safari launches or when enabling the extension, it tells handleMessage() to catch incoming messages from external scripts. When dispatchMessage() is executed inside “listener.js”, the message will be immediately cached by handleMessage() from the global page. Inside this function the message type is checked then addLink() from “popover.html” is called with passing the link URL as parameter. addLink() will update the container from the Popover by adding a new row. You should know that you can’t update Popover interface from the global page because it hasn’t got access to Popover DOM.

The Popover

The popover.html is the user interface. It’s based on usual Web scripting technologies HTML, CSS and JavaScript. As mentioned earlier we placed addLink() inside this script file because this is the only place we can access the Popover DOM.

popover.html source code:

 The picture below summarizes the above text. safarituto-arch

Testing Extension Package

The development of Visited Links Logger Safari extension has come to the end and it’s now time to test it. Ready?  So, go to the Extension Builder then click on Reload button which will update our extension by new the modifications we made.

Safari extension builder reload button

Now everything should be fine, try to visit a few web pages and click on the links inside, you will get a result like in the picture below.

Final Safari Extension

Building Extension Package

At this point we are still in the development stage and we haven’t made a finished extension yet, the extension is stored as a folder that contains some source files and an icon, for the moment it can’t be delivered to any end-users. All we need to do next is to generate a compact package. Once again the Extension Builder makes this task very easy to do by a single click on the Build Package button (see the picture below) then choose where you want to save your package.

Extension builder build package As a result, you should have a new package named: “VistedLinksLogger.safariextz”, it can be installed by opening the file or dragging it to Safari. You can also publish this extension in the Apple extension gallery.

Here is the project (zipped) : VisitedLinksLogger.safariextension.zip

I hope this tutorial was very helpful. If you need more help, please don’t hesitate to contact me or leave a comment and I will try to reply ASAP. To end off, I would like to thank Paola Pereira for the English review.

EmailGoogle+0LinkedIn0Twitter2Facebook0tumblrDigg
Tagged , , , , , , , , . Bookmark the permalink.

3 Responses to A Step-By-Step tutorial on building your own Safari extension (part 2)

  1. Weiter says:

    Please let me know if you’re looking for a writer for your weblog.
    You have some really great articles and I believe I would be a good asset.
    If you ever want to take some of the load off, I’d absolutely love to write some articles for your blog in exchange for a link back to mine.
    Please blast me an e-mail if interested.

    Kudos!

  2. Stormy says:

    Hello, Neat post. There is a problem with your web site in web explorer, might check
    this? IE nonetheless is the marketplace chief and a big section of folks will leave out your excellent writing due to this problem.
    Stormy

  3. Ι like it when folks get together and share thoughts.
    Great website, continue the good work!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre user="" computer="" escaped="" class="" title="" data-url=""> <span class="" title="" data-url="">