javascript - 在注入(inject)的脚本中使用扩展的 localStorage 包装函数

Question

我的扩展程序的内容脚本通过 <script> 将脚本注入(inject)到 gmail 页面中元素(main.js)。注入(inject)的脚本需要来自存储在扩展的 localStorage 中的设置的一些数据。通过 options.js选项页面的脚本。

选项页面脚本可以成功使用loadDomain()读取 localStorage.domain 的函数值(value)。此函数在通用函数脚本中定义 storage.js这也通过 <script> 注入(inject)到 gmail 页面上元素以及 main.js .

问题是loadDomain()返回 undefined在注入(inject)时调用 main.js而不是存储在选项页面上的实际值。

list .json:

  "permissions": [
    "tabs", "https://mail.google.com/*", "http://*/*, https://*/*"
  ],
  "background": {
    "scripts": ["js/background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_icon": {
      "38": "icon.png"
    },
    "default_title": "SalesUp",
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "matches": ["https://mail.google.com/*"],
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    "js/jquery-1.10.2.min.js",
    "js/gmail.js",
    "main.js"
  ]
}

Answer 1

聊天讨论表明loadDomain()从 <script> 调用-注入(inject) main.js。

问题的一部分是由于 Chrome 将网页(及其脚本，以及注入(inject)的脚本)与内容脚本以及背景页面隔离开来造成的。另一部分是 localStorage在每个域上都是不同的(实际上是 origin )，因此无论存储在扩展选项页面内的什么内容，在网页上下文中运行并可以访问其 localStorage 的内容脚本中都不可用。只是，不是扩展的 localStorage .

解决方案包括两件事:

1. 代替localStorage使用 chrome.storage.sync存储扩展设置或 chrome.storage.local存储不应同步到 Google 服务器的临时内容。

2. 使用自定义 DOM 事件在注入(inject)脚本和内容脚本之间进行通信。

---

代码:

注入(inject)的 main.js:

• 发送请求(detail 键可用于传递一些数据):

  document.dispatchEvent(new CustomEvent("getDomains", {detail: {something: "hello"}}));
  

• 监听响应:

  document.addEventListener("receiveDomains", function(e) {
      var domains = e.detail;
      console.log("Received domains", domains);
      ...............
  });
  

内容脚本 content.js:

document.addEventListener("getDomains", function(e) {
    chrome.storage.sync.get("domains", function(result) {
        document.dispatchEvent(new CustomEvent("receiveDomains", {detail: result.domains}));
    });
});

选项页面options.js:

function save_options() {
    chrome.storage.sync.set({domains: ["domain1", "domain2"]});
}