javascript - 如何从 chrome 扩展中的多个 HTML 文件访问 chrome 存储

Question

我的 chrome 扩展程序上已经有一个选项页面，我正在尝试在我的扩展程序目录中创建其他几个页面，这些页面需要使用 popup.html 收集的 chrome 存储数据。

我已尝试将新的 HTML 页面添加到 manifest.json 文件中的选项页面属性，但这会阻止加载扩展。在新的非选项 HTML 页面上使用“DOMContentLoaded”事件访问 chrome 存储时，如下所示:

document.addEventListener("DOMContentLoaded", function () {
    getData();
}, false);

function getData() {
    chrome.storage.local.get(['data'], function (result) {
        console.log(result.data);
        setFormData(result.data[0])
    });
}


function setFormData(data){
    console.log(data)
}

我收到这个错误:

未捕获的类型错误:无法读取未定义的属性“本地”

我假设 newHTML.html 没有使用 list 文件，但我很清楚我是如何告诉 list 文件有关 newHTML 的。

这是 list 文件:

{
    "name": "ExtensionName!",
    "version": "1.0",
    "description": "A Chrome Extension!",
    "permissions": ["activeTab", "declarativeContent", "storage","<all_urls>"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "options_page": "formMenu.html",
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png"
    },
    "manifest_version": 2,
    "content_security_policy": "script-src 'self' https://code.jquery.com https://cdnjs.cloudflare.com https://stackpath.bootstrapcdn.com https://use.fontawesome.com; object-src 'self'",
    "externally_connectable": {
      "ids": ["*"]
    }
  }

Answer 1

当您的代码在您的扩展上下文中运行时，您的代码可以访问 chrome.storage。
如果您打开 file://.../newHTML.html，它只是一个普通的 javascript 上下文。

使用 chrome.runtime.getURL("newHTML.html") 获取如下所示的扩展程序 url:chrome-extension://[id]/newHTML.html.

也无需等待 DOMContentLoaded 访问 localStorage。