A recipe for instant extensions for popular browsers

    0147 (1)

    The problem arose of writing a simple extension for all (if possible) popular browsers. The activity of the extension is to inject javascript into the body of the document.

    Doctor prescribed javascript injections


    It would seem simple, we execute the code in the browser line:

    1. javascript: var s = document.createElement('script');
    2. s.type='text/javascript';
    3. document.body.appendChild(s);
    4. s.src='script.js';
    5. void(0);
    But what to do if your script should process all pages of another site. Do not force the user to constantly click on the tab with the injection code after each transition to a new page. The naive search for a simple solution was unsuccessful:
    • It was the interception of all links on the page and the addition of its “javascript:” code, of course the code was executed as part of an open page and then moved to a new “clean” page through (location.href).
    • The option with setTimeout was generally in the order of nonsense ... execution fell off after the start of loading a new page.
    Writing extensions for many browsers scared me the most, but what to do, I began to recall the most popular ones:
    • IE 7+ (for 6-ku decided to just score, a lot of costs for the sake of a small audience of users - excuse me)
    • Firefox 1.5+
    • Chrome 4+
    • Opera 9+ (as a result, extension turned out to be written only under Opera 11)
    • Safari 3+
    “Firefox and Chrome should have no problems,” I thought.

    Google chrome


    An extension for Chrome was written in an hour - a lot of documentation on the official site, a lot of examples. In general, a paradise for the developer.

    Examples and  Guide

    snippet from  background.html

    1. function onRequest(tabId, changeInfo, tab) {
    2.         if (changeInfo.status == 'complete'){
    3.                 chrome.tabs.executeScript(tabId, { code:"код без javascript:" });
    4.         };
    5. };
    6. chrome.tabs.onUpdated.addListener(onRequest);

    Everything turned out simple and tasteful. Insert directly into the document body 

    Also popular now: