Question

我在Chrome中使用了一个扩展程序，它使用chrome.storage.local.set和.get。在如何将存储代码移植到Firefox方面，我无法理解WebExtensions API文档。

部分引用from the WebExtensions API doc的示例代码使用browser.storage.local.set和.get，但是当我在Chrome中运行的扩展程序中使用它们时，这些行返回“浏览器未定义”。 WebExtensions API移植文档here表明chrome.storage.local.set和.get应该可以在Firefox和Safari中使用，但是，也许我正在错误地阅读它们？

我还没有在Firefox扩展中尝试过chrome.storage.set和.get。他们应该工作吗？

Answer 1

在Chrome中，可以在chrome命名空间下访问JavaScript API。在Firefox和Edge中，可以在浏览器命名空间下访问它们。

来自https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities

因此，对于您的情况，您似乎必须将所有 chrome。 更改为浏览器。无论

Answer 2

expireDate和chrome.storage.set适用于Firefox扩展，但最好使用storage API。

以下是使用示例：https://github.com/mdn/webextensions-examples/blob/master/navigation-stats/popup.js#L26

与Chrome的区别在于它是基于Promised的API。

对于Safari，您可以查看settings API。

此外，您始终可以在BG页面或内容脚本上使用chrome.storage.get或cookies。

Answer 3

嗯，事实是名称空间是不同的。因此，浏览器无法在Chrome上运行。我想您可以在背景/内容代码的开头添加一行，如下所示：

var browser = (window.browser)? window.browser : window.chrome;

这样，您就可以使用Chrome和Firefox扩展程序中的“浏览器”。但是仍然存在问题。也许您已经观察到API之间存在一些差异，例如Chrome在某些消息中使用回调，而Firefox在Promises中使用。

因此，我建议您使用webextension-polyfill库，该库将允许您在任何浏览器中使用“浏览器”对象和Promises。

https://github.com/mozilla/webextension-polyfill

如果使用的是npm，则可以使用以下命令导入生产版本：

"webextension-polyfill": "^0.2.1"

之后，您应该先导入库，然后再执行其他操作：

  "background": {
    "scripts": [
      "node_modules/webextension-polyfill/dist/browser-polyfill.js",
      "background/your-code-goes-here.js"
    ]
  },

  "content_scripts": [{
      "matches": ["*://*/*"],
      "js": [
        "node_modules/webextension-polyfill/dist/browser-polyfill.js",
        "content/your-code-goes-here.js"
      ]
    }

如果您使用的是iframe，也应该从那里导入它。例如

<script src="../node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>

希望有帮助。

跨浏览器扩展存储：chrome.storage或browser.storage或？

3 个答案: