Question

我正在创建一个供我自己使用的扩展程序，但我遇到了问题。我想为 background.js 到 content.js 的变量赋值。尽管刷新了内容页面，但 background.js 中的变量必须始终存在。怎么做？

的manifest.json

{

  "manifest_version": 2,
  "name": "Slownik",
  "version": "1.0",

  "description": "Slownik",

  "background": {
  "scripts": ["background.js"]
  },

  "content_scripts": [
    {
      "matches": ["*://*.sjp.pl/*"],
      "js": ["content.js"]
    }
  ]
}

background.js ：

var test = "test";

content.js ：

test = "testA";

Answer 1

另一种方法是使用browser.runtime.sendMessage() API。

在内容脚本中：

document.addEventListener('DOMContentLoaded', function() {
    browser.runtime.sendMessage({
        type: "getText"
    }).then(function(message) {
        console.log("Value of text is: ", message.result);
    });

    browser.runtime.sendMessage({
        type: "setText",
        value: "Yes, I can get you!!"
    }).then(function(message) {
        console.log("New value of text is: ", message.result);
    });
});

在后台脚本中：

var text = "Can you get me??";

browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type == "getText") {
        sendResponse({result: text});
    } else if (request.type == "setText") {
        text = request.value;
        sendResponse({result: text});
    }
});

在浏览器控制台中，我们可以看到输出为：

Value of text is:  Can you get me??
New value of text is:  Yes, I can get you!!

Answer 2

正是你想要的是不可能的。后台脚本和内容脚本在不同的上下文中执行，在某些情况下，在不同的进程中执行。不可能在两个上下文之间直接共享变量。但是，您可以共享信息。

.storage.local的存在是为了能够以所有脚本都可访问的方式在您的扩展程序中存储信息。¹ .storage.local中存储的数据通过浏览器保留正在重新启动。您可以在 background.js 中使用.storage.local.set()设置值，然后使用 content.js 中的.storage.local.get()获取值

在上面链接的MDN页面上有使用.storage.local的示例。还有很多Stack Overflow questions/answers which provide examples。

^{1。除了您插入页面上下文的脚本。这些不是内容脚本，但您可以使用内容脚本插入它们。它们用于访问通常在网页上运行的页面脚本中存在的变量和函数。}

如何从内容脚本访问后台脚本变量

2 个答案: