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)?

回答1:

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

回答2:

I just had an idea, but I don't know if it's sound or makes sense.

I believe I can access HTML5 localStorage from my content_script, and store the two strings there. Through Message Passing I should be able to tell the content_script that one of them changed (from the options page) and then have it update its localStorage.

Would this be the only option? It doesn't sound too bad if it works...

来源：https://stackoverflow.com/questions/9033873/options-enabled-content-script-chrome-extension-without-background-page

标签

javascript

google-chrome-extension

storage

options

content-script