Question

对于我想要制作的Chrome扩展程序，基本上我需要操纵当前打开的网页内容。我能够从插入内容的脚本发送消息，并在后台JS中接收它们并发送一个响应，我可以记录并检查内容JS。有3个JS文件，1个是内容JS - ＆gt; content.js（包含接收消息的代码），1是background.js（包含发送消息的代码），第三个脚本是dashboard.js，它包含在default_popup html页面的html中。我能够在页面上包含的脚本（dashboard.js）上的扩展弹出窗口中收听按钮的click事件。问题是，如果我包含从此文件dashboard.js向客户端脚本发送消息的代码，它不会触发或在内容脚本（content.js）上没有收到，无论是onMessage监听器不会触发按钮的点击。我已经尝试了类似问题的答案，但是我仍然无法在单击弹出窗口上的按钮时在内容脚本上收到消息。

此外，弹出窗口上的按钮事件的监听器永远不会在内容脚本中写入函数时触发，该按钮返回jQuery未定义，可能是因为内容脚本没有覆盖弹出窗口＆＃39; JS和它是一个范围问题？总的来说，我需要在单击弹出窗口上的按钮时向客户端脚本发送消息。这是我用过的代码

的manifest.json

{
"manifest_version": 2,
"name":    "Test Extension",
"version": "0.0",

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

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

"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "dashboard.html"
}
}

dashboard.js

var port   =   chrome.runtime.connect({name: "popup-body"});
$(document).ready(function(){

$('#button').click(function(){  
    console.log('button clicked');
    port.postMessage({status:"clicked on button"});

   });  
});

background.js

chrome.runtime.onConnect.addListener(function(port){
  console.log('onConnect');
  port.postMessage({status:"background Js active"});
});

content.js

// content script, works on the page open
var port = chrome.runtime.connect({name:"mycontentscript"});
port.onMessage.addListener(function(message,sender){
   console.log('got message');
   console.log(message);
});

dashboard.html

<!DOCTYPE html>
<html>
    <head>
        <title>Dashboard</title>
        <script src="jquery.js"></script>
        <script src="dashboard.js"></script>
    </head>
    <body>
        <form>
            <input type="button" id="button" value="Click To Send" />
        </form>
    </body>
</html>

现在打开一个新选项卡，我可以在后台发送的页面控制台（使用content.js）中看到消息对象（background.js）。如何通过点击按钮＆＃39;点击发送＆＃39;？使同样的事情发生此外，background.js和content.js之间可以进行双向通信，但是如何使用弹出窗口上的事件来控制它？最终，我需要对打开的网页的DOM进行更改，但我认为一旦在content.js中收到消息，我就可以这样做。

如何在内容脚本上的Google Chrome扩展程序的HTML上收听按钮的点击事件，并操纵打开的网页的DOM？

0 个答案: