javascript - 如何在扩展后台页面访问localStorage？

Question

我有一个 chrome 扩展，它在内容脚本的 JavaScript localStorage 中设置一个字符串值。我已经通过捕获它并显示它来测试它是否被设置。加载后在同一页面上，我仍然可以在 javascript 控制台中访问存储的字符串。如果我转到任何其他选项卡 js 控制台，或者当我尝试在我的其他扩展后台页面中访问它时(单击浏览器操作后)，它返回 null。

扩展 1 contentscript.js

embeded.addEventListener
(
 "message",
 function(message)
 {
  localStorage.setItem("pdf", message.data);
  loadPDF(message.data);
 },
 false
);

扩展 2 background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  if (tab.url.substr(tab.url.length - 4) === ".pdf")
  {    
    if (localStorage.getItem("pdf") !== null)
    {
      alert("boomy"); 
    }
  }
});

Answer 1

localStorage 在扩展页面(背景、选项、弹出窗口)之间共享，但不是内容脚本。 而且肯定不会在 2 个扩展之间共享!

您有两个半的选择。有 2 个单独的扩展，只有一个选项。

---

选项一:依靠消息传递。

当您需要在后台和内容脚本之间传递一些值时，您可以使用消息传递来实现。如果您只需要向一个方向传递它，效果会特别好。

contentscript.js:

embeded.addEventListener(
  "message",
  function(message)
  {
    chrome.runtime.sendMessage(extensionTwoId, {pdf: message.data});
    loadPDF(message.data);
  },
  false
);

background.js:

chrome.runtime.onMessageExternal.addListener(
  function(message, sender, sendResponse) {
    if(sender.id !== extenstionOneId) return;
    if(message.pdf) localStorage.setItem("pdf", message.pdf);
  }
);

/* ... */

---

选项二:chrome.storage。不适用于 2 个扩展。