将变量从 Content.js 传递到 Background.js答案

【问题标题】：Passing variable from Content.js to Background.js将变量从 Content.js 传递到 Background.js
【发布时间】：2020-11-04 00:01:23
【问题描述】：

我正在尝试在我的 background.js 文件中使用我在 content.js 中创建的变量。

目前，当我尝试在我的 content.js 中创建的 background.js 中使用一个变量时，我收到一个 chrome 错误，提示“意外标识符”（在 background.js 中引用 ContentTag1）

你知道我该怎么做吗？

来自我的 Background.js 文件的代码

function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                if data[i].DBTag == ContentTag1 {
                    var div = document.createElement("div");
                    div.innerHTML = 'Name: ' + data[i].Name + ' ' + data[i].Price;
                    mainContainer.appendChild(div);
                }
            }
        }

我的内容脚本中的代码

var ContentTag1 = "test";
var ContentTag2 = "test";
var ContentTag3 = "test";

清单如下：

{
  "name": "App",
  "version": "1.0",
  "description": "Description",
  "permissions": [ "activeTab", "declarativeContent", "storage", "http://localhost:3000/brands"],
  "background": {
    "scripts": [ "js/lib/jquery.min.js", "js/app/background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": [ "https:/somesite*" ],
      "css": ["style.css"],
      "js": [ 
        "js/lib/jquery.min.js",
        "js/app/content.js"
        ],
      "all_frames": false
    }
  ],
  "web_accessible_resources": ["content.html", 
                               "content.css",
                               "css/popup.css"
                             ],
  "browser_action": {
    "default_popup": "views/popup.html",
    "default_icon": {
      "16": "images/someimage.png",
      "32": "images/someimage.png",
      "48": "images/someimage.png",
      "128": "images/someimage.png"
    }
  },
  "icons": {
    "16": "images/someimage.png",
    "32": "images/someimage.png",
    "48": "images/someimage.png",
    "128": "images/someimage.png"
  },
  "manifest_version": 2
}

【问题讨论】：

这些脚本在不同的页面中运行。后台脚本在其自己的隐藏后台页面中运行。您可以使用messaging 进行交流。顺便说一句，您似乎也在弹出窗口中使用后台脚本，这是一个错误，不要那样做，做this instead。如果您需要更多帮助，请添加更多信息，例如 manifest.json、弹出窗口（如果存在）和其他任何内容。
我想将我在 Content Script 中声明的变量（例如 ContentTag1）用于我在 Background.js 中创建的函数。基本上，如果在 Background.js 中获取的 DatabaseTag1 与我的 ContentScript 中的 ContentTag1 匹配，我将执行我的功能。此时没有使用弹出窗口。如何将我在内容脚本中创建的变量传递给我的 background.js 以供使用？我弄乱了您提供的“消息传递”链接，但无济于事。
消息文章显示了它是如何完成的，所以我不知道问题是什么。再次猜测，您可以使用 {ContentTag1, ContentTag2} 而不是 {greeting: "hello"} （那里的第一个示例），然后在后台脚本的 onMessage 侦听器中读取这些属性。但是，您的 background.js 仍然没有意义，因为后台脚本在隐藏的背景页面中运行，因此您无法在那里显示 HTML/DOM。所以显示你的 manifest.json 并更详细地解释你在做什么。
我已经用我的清单更新了帖子。背景本质上被用作将数据附加到 html 中的脚本。每当我从 dom 中提取的标签与数据库中的标签匹配时，后台脚本就会从我的产品中提取数据并在 html 中填充一个内框。
好的，那么只需发送 {ContentTag1, ContentTag2, ContentTag3} 以便在后台脚本的 onMessage 中使用它们作为 message.ContentTag1 等等。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

您应该从内容发送消息并在后台添加监听器

here 一个例子的答案。

您还可以找到here chrome 扩展中有关消息传递的文档。

【讨论】：