如何将消息从 popup.html 发送到内容脚本？

Question

I am making an extension and want to pass the message from the popup.html to content.js but the following code alert undefined .我正在做一个扩展，并希望将消息从popup.html 传递到content.js但以下代码警告undefined 。 Please give me a simple script that send message from popup.html to content.js and vice versa, further i will handle it.请给我一个简单的脚本，将消息从popup.html发送到content.js ，反之亦然，我会进一步处理它。 I want to access the DOM through this extension for modifying and designing the website layouts.我想通过这个扩展访问 DOM 来修改和设计网站布局。

Manifest显现

{
  "manifest_version": 2,
  "name": "Extension",
  "description": "Description",
  "version": "1.0",
  "background": {
   "scripts": ["background.js"],
   "persistent": true
  },
  "content_scripts": [{
    "matches": ["*"],
    "js": ["content.js"]
  }],
  "browser_action": {
   "default_icon": "icons/icon.png",
   "default_popup": "popup.html"
  },
  "permissions":["tabs"]
}

popup.js popup.js

document.addEventListener('DOMContentLoaded',function(){

document.getElementById('button').onclick=function(){

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
            alert(response);
        });
    });

}

});

Content.js内容.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");

        if (request.greeting == "hello")
            sendResponse({farewell: "goodbye"});
});

Answer 1

Try this simple code.试试这个简单的代码。

manifest.json清单.json

{
  "name": "test",
  "version": "0.1",
  "manifest_version": 2,

  "description": "Test Extension",

  "permissions": [ "tabs" ],

  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts" : [{
        "matches" :  ["*://*/*"],
        "js" : ["content.js"]
    }]
}

popup.html popup.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
</head>
<body>
  <div id="data"></div>
  <input type="text" id="text"></input>
  <button id="set">Set</button>
  <script src="popup.js"></script>
</body>
</html>



>

popup.js popup.js

document.getElementById("set").onclick = function() {

  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
            alert(response.farewell);
        });
    });
}

content.js内容.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");

        if (request.greeting == "hello")
            sendResponse({farewell: "goodbye"});
});

alert警报

如何将消息从 popup.html 发送到内容脚本？

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-03-27 12:14:08

如何将消息从 popup.html 发送到内容脚本？

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-03-27 12:14:08

解决方案1
3 已采纳 2018-03-27 12:14:08