Google chrome extension 使用内容脚本将消息从第1页发送到第2页+；背景脚本

我正在尝试编写一个chrome扩展来将一些数据从站点1发送到站点2。我创建了两个内容脚本（每个站点）和一个背景脚本。下面是脚本和我对所得到的错误所做的解释

清单文件：

{
  "name": "Testing",
  "version": "0.0.5",
  "manifest_version": 2,
  "description": "Testing",
  "homepage_url": "https://www.test.co.uk",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [ "src/bg/background.js" ],
    "persistent": true
  },
  "page_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "page action demo",
    "default_popup": "src/page_action/page_action.html"
  },
  "permissions": [
    "tabs",
    "*://www.site1.co.uk/*",
    "*://site1.co.uk/*",
    "*://www.site2.co.uk/*",
    "*://site2.co.uk/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://www.site1.co.uk/*",
        "*://site1.co.uk/*"
      ],
      "js": [
        "src/inject/inject-pg1.js"
      ]
    },
    {
      "matches": [
        "*://www.site2.co.uk/*",
        "*://site2.co.uk/*"
      ],
      "js": [
        "src/inject/inject-pg2.js"
      ]
    }
  ]
}

chrome.runtime.sendMessage({
    data: 'pg1'
});


chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {    
      if (request.data) {
          if (request.data == "pg2") {
              console.log("from page 2")
          }
      }
  });

chrome.runtime.sendMessage({
    data: 'pg2'
});


chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {    
      if (request.data) {
          if (request.data == "pg1") {
              console.log("from page 1")
          }
      }
  });

背景脚本：

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {

  if (request.data) {
      console.log(request.data);

      if (request.data == "pg1") {
          chrome.tabs.query({ active: true },
              function (tabs) {
                  chrome.tabs.sendMessage(tabs[0].id, { data: "from page 1" }, function (response) { });
              });
      }

      if (request.data == "pg2") {
          chrome.tabs.query({ active: true },
              function (tabs) {
                  chrome.tabs.sendMessage(tabs[0].id, { data: "frome page 2" }, function (response) { });
              });
      }
  }

  chrome.pageAction.show(sender.tab.id);
  sendResponse();
});

第1页inject-pg1.js:

{
  "name": "Testing",
  "version": "0.0.5",
  "manifest_version": 2,
  "description": "Testing",
  "homepage_url": "https://www.test.co.uk",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [ "src/bg/background.js" ],
    "persistent": true
  },
  "page_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "page action demo",
    "default_popup": "src/page_action/page_action.html"
  },
  "permissions": [
    "tabs",
    "*://www.site1.co.uk/*",
    "*://site1.co.uk/*",
    "*://www.site2.co.uk/*",
    "*://site2.co.uk/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://www.site1.co.uk/*",
        "*://site1.co.uk/*"
      ],
      "js": [
        "src/inject/inject-pg1.js"
      ]
    },
    {
      "matches": [
        "*://www.site2.co.uk/*",
        "*://site2.co.uk/*"
      ],
      "js": [
        "src/inject/inject-pg2.js"
      ]
    }
  ]
}

chrome.runtime.sendMessage({
    data: 'pg1'
});


chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {    
      if (request.data) {
          if (request.data == "pg2") {
              console.log("from page 2")
          }
      }
  });

chrome.runtime.sendMessage({
    data: 'pg2'
});


chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {    
      if (request.data) {
          if (request.data == "pg1") {
              console.log("from page 1")
          }
      }
  });

第2页inject-pg2.js:

{
  "name": "Testing",
  "version": "0.0.5",
  "manifest_version": 2,
  "description": "Testing",
  "homepage_url": "https://www.test.co.uk",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [ "src/bg/background.js" ],
    "persistent": true
  },
  "page_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "page action demo",
    "default_popup": "src/page_action/page_action.html"
  },
  "permissions": [
    "tabs",
    "*://www.site1.co.uk/*",
    "*://site1.co.uk/*",
    "*://www.site2.co.uk/*",
    "*://site2.co.uk/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://www.site1.co.uk/*",
        "*://site1.co.uk/*"
      ],
      "js": [
        "src/inject/inject-pg1.js"
      ]
    },
    {
      "matches": [
        "*://www.site2.co.uk/*",
        "*://site2.co.uk/*"
      ],
      "js": [
        "src/inject/inject-pg2.js"
      ]
    }
  ]
}

chrome.runtime.sendMessage({
    data: 'pg1'
});


chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {    
      if (request.data) {
          if (request.data == "pg2") {
              console.log("from page 2")
          }
      }
  });

chrome.runtime.sendMessage({
    data: 'pg2'
});


chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {    
      if (request.data) {
          if (request.data == "pg1") {
              console.log("from page 1")
          }
      }
  });

这方面有两个网站，每个网站都有自己的内容脚本。加载第1页时，它会向后台脚本发送一条消息，后台脚本会根据从第1页收到消息或从第2页收到消息的情况向第2页发送一条消息

但是在第2页上没有收到消息，这是因为它在另一个选项卡中吗？我有时在background.js

中收到一个错误，这是对选项卡的响应。query:TypeError:无法读取
选项卡[0]中未定义的
的属性“id”。id

---

这是实现这一目标的正确方法，还是可能？如果有更好的解决方案，请给我指出正确的方向。谢谢

当前，您的后台脚本会在所有窗口中获取一个活动选项卡列表，其中可能加载了不相关的站点，并从第1页发送

，

，即使您的内容脚本需要

“pg1”

。是否希望两个站点中第一个打开的站点为以后打开的另一个站点提供数据？在这种情况下，即使没有背景页面，您也可以这样做：只需在内容脚本中使用

chrome.storage

来写入和读取数据。首先，感谢您指出内容脚本需要

pg1

和bg脚本发送其他内容的问题。是的，我会试试chrome.storage，看看效果如何。