没有背景页面的启用选项的内容脚本 Chrome 扩展？答案

【问题标题】：Options-enabled content-script Chrome extension without background page?没有背景页面的启用选项的内容脚本 Chrome 扩展？
【发布时间】：2012-02-20 11:26:00
【问题描述】：

我正在为 Google Chrome 制作内容脚本扩展，它为网站页面添加了功能。我想添加几个选项，其实没什么大不了的，我只需要两个字符串（都不是敏感的用户数据）。

来自this answer，我假设我需要一个背景页面，我不想将其添加到我的扩展程序中 - 我不希望它增加不必要的重量。

我真的需要一个背景页面，或者我可以有一个没有它的选项页面（以及我可以使用哪个存储）？

【问题讨论】：

标签： javascript google-chrome-extension storage options content-script

【解决方案1】：

更新
从 Chrome 20 开始，您现在可以使用 Storage api.....
http://code.google.com/chrome/extensions/storage.html

老办法
我所做的是创建一个 iframe，该 iframe 指向我的扩展程序中的一个页面，该页面具有一个脚本，该脚本从本地存储中获取我需要的设置，然后在一条消息中将其发送给它的父级，然后内容脚本会获取.....好吧这是一个废话解释，代码说得更好;).......

内容脚本

// 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 的 JS

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

Options.html 的 JS

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

清单

{
    "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"
}

注意事项....
其他页面和扩展程序可以很容易地使用它来从您的扩展程序中获取设置，所以不要使用这种方法使用任何敏感数据。
据我所知，他们无法通过该页面更改您的设置，如果有人知道不同，请解释。
我使用清单版本 2 并将页面 gimmeSettings 设置为可访问。如果您不知道清单版本 2 的差异添加，您真的应该阅读它....http://code.google.com/chrome/extensions/trunk/manifestVersion.html

如果你想要一个可行的例子，那就去这里.....
http://forum.valorsolo.com/viewtopic.php?f=36&t=375

【讨论】：

谢谢，这是个好消息。另外，我只是认为它可能被包装在一个库中（如果我碰巧之前发现它有用/如果 Chrome 开发人员制作了一个更漂亮的 API，我会这样做）。实际上，这个答案让我想仅仅为了它而使用选项页面进行扩展:) 恭喜。
哦，我有一个想法：也许可以使用一些asymmetric encription 发送敏感设置（该链接没有实现解密，但它是一个起点）。然而，这似乎是大量的黑客工作。但听起来很有趣！我们一天应该有更多的时间来做这样的事情。

【解决方案2】：

我只是有一个想法，但我不知道它是否合理或有意义。

我相信我可以从我的content_script 访问 HTML5 localStorage，并将两个字符串存储在那里。通过Message Passing，我应该能够告诉content_script其中一个发生了变化（从选项页面），然后让它更新它的localStorage。

这是唯一的选择吗？如果它有效，听起来还不错......

【讨论】：