跨浏览器扩展存储：chrome.storage or browser.storage or?

Question

我有一个在 Chrome 中工作的扩展，它使用 chrome.storage.local.set 和 .get。关于如何将该存储代码移植到 Firefox，我无法理解 WebExtensions API 文档。

引用的一些示例代码 from the WebExtensions API doc uses browser.storage.local.set and .get, but those lines return 'browser is not defined' when I use them in my extension running in Chrome. The WebExtensions API porting doc here 建议 chrome.storage.local.set 和 .get 应该在 Firefox 和 Safari 中工作，但是，也许我没有正确阅读它们？

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

Answer 1

chrome.storage.set 和 chrome.storage.get 将在 Firefox 扩展中工作，但最好使用 storage API。

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

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

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

此外，您始终可以在 BG 页面或内容脚本中使用 cookies 或 localStorage。

Answer 2

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

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

所以对于你的情况，听起来你必须将所有 chrome.whatever 更改为浏览器。随便什么

Answer 3

好吧，事实是名称空间不同。所以不，浏览器无法在 Chrome 上运行。我想您可以在 background/content 代码的开头添加一行，例如：

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

这样您就可以使用 Chrome 中的 "browser" 和 Firefox 扩展。但是还有一个问题。也许您已经注意到 API 中存在一些差异，例如Chrome 在某些消息中使用回调，而 Firefox 使用 Promises。

因此，我建议您使用 webextension-polyfill 库，它将允许您在任何浏览器中使用 "browser" 对象和 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 or browser.storage or?

Cross-browser extension storage: chrome.storage or browser.storage or?

storage

firefox-addon

google-chrome-extension