Search code examples
javascriptgoogle-chrome-extensionstoragecontent-script

Options-enabled content-script Chrome extension without background page?


I'm making a content script extension for Google Chrome, it adds functionality to a website's page. I want to add a couple of options, not big deal really, I'd just need two strings (none of which are sensitive user data).

From this answer, I assume I need a background page, which I'd rather not add to my extension - I don't want it to gain unnecessary weight.

Do I really need a background page, or I could have an options page without it (and which storage could I use)?


Solution

  • UPDATE
    As of Chrome 20 you can now use the Storage api.....
    http://code.google.com/chrome/extensions/storage.html

    Old way
    What I do is create an iframe that points to a page in my extension that has a script that gets the settings I need from local storage and then sends that to its parent in a message which the content script then gets.....well that was a crap explanation, the code says it better ;).......

    Content Script

    // create the iframe for our page that sends the settings
    var el = document.createElement("iframe");
    el.setAttribute('src', chrome.extension.getURL("gimmeSettings.html"));
    el.style.visibility="hidden";
    document.body.appendChild(el);
    
    // create the listner that listens for a message from our page that sends the settings
    window.addEventListener("message", receiveSettings, false);
    
    // function that gets called when we recieve a message from the page that sends the settings  
    function receiveSettings(event) {
            //check to make sure the message came from our page
            if (event.origin !== "chrome-extension://"+chrome.i18n.getMessage("@@extension_id")) return;
    
            //message came from our extension, do stuff with it  
            console.debug(event.data);
    
            // clean up
            window.removeEventListener("message", receiveSettings, false);
            el.parentNode.removeChild(el);
    }
    

    gimmeSettings.html's JS

    // post the message with our settings
    parent.postMessage( localStorage.getItem("testing"), "*" );
    

    Options.html's JS

    localStorage.setItem("testing","bleh");
    

    Manifest

    {
        "name": "Getting at an extensions local storage from a content script",
        "description" : "Getting at an extensions local storage from a content script.  Be aware that other pages/extensions can use this to get at your settings, but not change them...so dont include sensitvie data.",
        "content_scripts": [
            {
                "matches": ["<all_urls>"],
                "js" : ["myscript.js"],
                "run_at":"document_idle"
            }
        ],
        "permissions": [
            "tabs", "<all_urls>"
        ],
        "manifest_version": 2,
        "web_accessible_resources": [
        "gimmeSettings.html"
      ],
      "options_page": "options.html",
        "version":"1.0"
    }
    

    Some things to note....
    Other pages and extensions can easily use this to also get the settings from your extension, so dont use any sensitive data with this method.
    From the best I can tell there is no way for them to alter your settings through that page tho, if anyone knows different please explain.
    Im using manifest version 2 and have set the page gimmeSettings to be accessible. If you dont know the differences manifest version 2 add you really should read up on it.... http://code.google.com/chrome/extensions/trunk/manifestVersion.html

    And if you want a working example then go here.....
    http://forum.valorsolo.com/viewtopic.php?f=36&t=375