时间戳

首页 > 解决方案 > chrome 扩展背景、js 到 content.js 之间的消息传递

javascript - chrome 扩展背景、js 到 content.js 之间的消息传递

问题描述

我想在 chrome 扩展background.js到content.js之间发送消息。

背景看起来像这样：

setInterval(function(){
  chrome.tabs.query({active: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {"message": "sample_msg"});
 });
},
1000);

content.js 看起来像这样：

chrome.runtime.onMessage.addListener(function(message, sender) {
  console.log('blablabla');
});

manifest.json 看起来像这样：

{
  "manifest_version": 1,
  "name": "Chrome Extension",
  "description": "",
  "version": "0.0.1",
  "background": {
    "scripts": [
      "/src/background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "*://google.com/*"
      ],
      "js": [
        "/src/content.js"
      ],
      "all_frames": true
    }
  ],
  "browser_action": {
    "default_popup": "/src/popup.html"
  },
  "permissions": [
    "<all_urls>",
    "activeTab",
    "tabs",
    "cookies",
    "background",
    "contextMenus",
    "unlimitedStorage",
    "storage",
    "notifications",
    "identity",
    "identity.email",
    "webRequest",
    "webRequestBlocking"
  ]
}

我读了很多，但我不明白为什么它不起作用？我可以帮忙吗？方向？评论？

标签： javascriptgoogle-chromegoogle-chrome-extension

解决方案

sendMessage API 似乎是正确的，但似乎 URL 匹配存在问题。

正如您在清单文件中的键中提到的那样，您的内容脚本将仅在google.com域中注入。matches

打开google.com并检查地址栏您可以看到 URL
https://www.google.com/，因此要将您的内容脚本注入到 google 域，您需要更改您的matches

"matches": [
    "https://*.google.com/*"
]

另外，如下更改您的onMessage侦听器

chrome.runtime.onMessage.addListener( 
  function(request, sender, sendResponse) {
    console.log("Received message", request.message);
  }
);

现在转到google.com并刷新页面。

推荐阅读