Question

点击工具栏按钮时，我将通过本地html创建一个新标签页：

background.js ：

chrome.browserAction.onClicked.addListener(() => {
    chrome.tabs.create({url: "MyExtension.html"});
});

我在 MyExtension.html 中提供了一些简单的HTML：

<!DOCTYPE html>
<html>
    <body>
        <p>Hello, Items!</p>
        <script src="getItems.js"></script>
    </body>
</html>

我在 manifest.json 中声明了存储权限：


{
    "name": "MyExtension",
    "description" : "MyExtension",
    "version": "0.1.0",
    "manifest_version": 2,
    "background": {
        "persistent": false,
        "scripts": ["background.js"]
      },
      "browser_action": {
        "default_title": "Open Tab"
      },
      "permissions": [
        "storage"
      ]   
  }

当我单击浏览器工具栏中的扩展图标时，新选项卡确实打开。在打开的选项卡上，我想在getItems.js中执行以下操作：

function loadItems() {
    chrome.storage.sync.get({items: []}, (items) => {
        console.log(`There are ${items.length} items.`);
    });
}

document.addEventListener('DOMContentLoaded', loadItems);

但是，我遇到此错误：

未捕获的TypeError：无法读取未定义的属性'sync'

这使我认为，扩展名本地页面上的脚本如果没有其他步骤就无法访问chrome.storage？

作为替代方案，我尝试将getItems.js作为内容脚本注入。但是这个SO问题中的评论提到， chrome-extension 并不是用于内容脚本匹配的有效方案（我的努力也是如此）。我怀疑在该问题上选择的答案也可以解决我的问题。但我不太了解如何应用它：

Create a tab and inject content-script in it gives permission error

我可以做我打算做的事情还是应该尝试一种完全不同的方法来在此扩展程序中存储项目？

有没有办法从浏览器操作中打开的本地选项卡使用storage.sync

0 个答案: