A Different Way of Developing Browser Extensions

Developing browser extensions can be a daunting task. If you want to release a version of your extension for each major browser in the market, you basically have to develop a different extension for each one of them. Sometimes you'll be able to reuse code (e.g., between Chrome and Safari extensions), and sometimes not (e.g., between Firefox and IE extensions).

Let's present three different ways of developing an extension for different browsers. Each way basically represents a different compromise between the amount of effort you have to put in the development of your extension and the control you get over its functionality. The first two ways are well-known, but I believe the third way is not, so let's compare the three of them.



Three Different Ways of Developing Browser Extensions

  •  The normal way: This is how each major browser manufacturer thought we should be developing its extensions. Examples of such extensions are Stumbleupon and Cooliris. For more details check this post.
  •  The fast way: You can use a cross-browser extension development framework. Examples of such extensions are Oxfam and The Free Dictionary. For more details check this post.
  • The injected way: Leave the extension very simple, make it inject a JavaScript (JS) file in each page the user visits, and let the code in this JS file do the magic.  Examples of injected toolbars are  Browseye  and MiniBar. More details to come in further posts. 
The following picture shows a snapshot of Browseye, and extension Adolfo and I have developed:


Notice that the toolbar does not appear in the browser window, but inside the page (in this case at the bottom). This toolbar is entirely created from JavaScript, and the same code is reused for all browsers. 

Comparing the Three Ways

It is clear that on the one hand the normal way gives you maximum control over what your extension can do at the cost of a non negligible effort to develop the extension for each browser. On the other hand, the fast way gives you high-speed cross-browser extension development at the cost of limited control. But where does the injected way stand in this compromise between control and development effort?

Let's compare the normal and the injected ways. Each approach has advantages and disadvantages for the different stakeholders.


From the user's perspective:
  • Extensions developed with the normal way present faster load times, since with the injected way an extension must wait for the DOM to be loaded in order to insert the toolbar in it.
  • Extensions developed with the injected way require less frequent updates because part of their code is dynamically downloaded in the JavaScript file that draws the toolbar.
From the developer's perspective:
  • Extensions developed with the injected way allow for shorter development times since most of the functionality can be put into a common JavaScript file written once for all browsers.
  • Extensions developed with the injected way allow for an easier extension update policy, since changes that are made in the injected JavaScript code do not require releasing a new extension version.
From the toolbar owner's perspective:
  • Extensions developed with the injected way consume requests to donwload the JavaScript code that the extension inserts in every page, while extensions developed with  the normal way consume no such requests.

Conclusions

Compared to the normal way, the injected way provides shorter developing times and less frequent updates at the cost of slower GUI loading times and higher request consumption. 




4 comments:

  1. Wow Great information about toolbar. Toolbar is best way to increase your internet work speed and also increase online profit. Custom toolbar increase your online reputation and branding also. Learn more about Toolbar development then visit our website.

    ReplyDelete
  2. Hi Miguel, i loved your article and would be very interested to dig further the "injected Way". I've noticed you didn't publish the full article about it. I've managed to do it for FF, Chrome, Safari and Opera, but i would be interested to see how you did with IE BHOs.
    I saw a nice article about it here : http://stackoverflow.com/questions/5817003/how-can-i-run-a-script-tag-that-i-just-inserted-dynamically-from-a-bho

    i'm looking forward to read you.
    Thanks for your work !

    ReplyDelete
    Replies
    1. Thanks Bill,
      yes I asked that question in stackoverflow :D
      The basic way I do it is like this:
      VARIANT vrt = {0};
      CComBSTR bstrScript = L"if (document.getElementsByTagName('head')[0]) { if(!document.getElementById('bho_js')) {var html_doc = document.getElementsByTagName('head')[0]; var _js = document.createElement('script'); _js.setAttribute('type', 'text/javascript'); _js.setAttribute('id', 'bho_js'); _js.setAttribute('src', 'http://myPath/myJS.js'); html_doc.appendChild(_js);}}";
      CComBSTR bstrLanguage = L"javascript";
      HRESULT hrexec = win->execScript(bstrScript,bstrLanguage, &vrt);

      If you want more details and code just ask (perhaps we can connect in Google+)

      Delete
    2. Hi Miguel,

      first it's really refreshing to receive replies :)
      I've been looking also for code examples in stackoverflow and other resources, but couldn't find a complete article about the "inejected Way" accross all Browsers.
      You seem to have IE covered and it seems very elegant, i've only found examples with huge code and my C++ knowledge being close to Zero, i would really appriciate your help and guidance to learn and complete a full "injected way" extension working on all browsers :)

      I've added you on Google+ feel free to send me more info and let me know if i can do something for you.

      Delete