Javascript 在Chrome'的后台页面的onClick事件上向内容脚本发送消息；s扩展_Javascript_Html_Google Chrome Extension

Javascript 在Chrome'的后台页面的onClick事件上向内容脚本发送消息；s扩展

javascript html google-chrome-extension

Javascript 在Chrome'的后台页面的onClick事件上向内容脚本发送消息；s扩展,javascript,html,google-chrome-extension,Javascript,Html,Google Chrome Extension,我知道消息传递用于此目的，但不知何故，它在我的后台页面的onClick事件上不起作用。我得到以下例外情况： Error in event handler for (unknown): TypeError: Cannot read property 'data' of undefined at chrome-extension://aimjdbbnlgjodealdppjdpligkbjbmmb/background.js:27:31 at disconnectListener (

我知道消息传递用于此目的，但不知何故，它在我的后台页面的onClick事件上不起作用。我得到以下例外情况：

Error in event handler for (unknown): TypeError: Cannot read property 'data' of undefined
    at chrome-extension://aimjdbbnlgjodealdppjdpligkbjbmmb/background.js:27:31
    at disconnectListener (extensions::messaging:338:9)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at Event.dispatchToListener (extensions::event_bindings:386:22)
    at Event.dispatch_ (extensions::event_bindings:371:27)
    at Event.dispatch (extensions::event_bindings:392:17)
    at dispatchOnDisconnect (extensions::messaging:293:27)

代码如下：

manifest.json

{
    "manifest_version": 2,
    "name" : "My Ext",
    "description" : "XXX",
    "version" : "1.0",
    "permissions": [
        "tabs"
  ],
    "content_scripts" : [{
        "matches" : ["http://example.com/"],
        "js" : ["jquery.js","script.js"]
    }],
"background":{
  "scripts": ["jquery.js","background.js"]
},
    "browser_action": {
        "default_title": "XX"
      }
}

dashboard.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery.js"></script>
    <script src="background.js"></script>
  </head>
  <body>
      <form>
      <textarea id="search"></textarea>
      <input id="button" type="button" value="Search" />
      </form>
  </body>
</html>

background.js

var currentURL = document.location.href;
$(document).ready(function(){

    $("#button").click(function()
    {
        alert( "Handler for .click() called." );
    });
});

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse)
{
    alert(msg);
    if (msg.method == "getHTML")
      sendResponse({data: "Welcome from Content Script"});
});

$(document).ready(function()
{
    chrome.browserAction.onClicked.addListener(function(activeTab){
  var loaderURL = chrome.extension.getURL("dashboard.html");
  _tab = activeTab;
  chrome.tabs.create({ url: loaderURL });
});
    $("#button").click(function()
    {
        chrome.extension.sendMessage({method: "getHTML",param:"myParam"}, function(response)
        {
                alert(response.data);
        });
    });

});

我无法使用chrome.tabs.sendMessage，因为一旦单击事件，我就无法找到选项卡Id。首先，您需要将

script.js

中不推荐使用的

chrome.extension.onMessage

替换为

主要问题是要您需要使用（这也需要知道选项卡ID）。
一种简单的方法是在打开

dashboard.html

视图时，将选项卡ID作为查询参数传递，例如

dashboard.html？tabId=XX

（请参见下面修改的

background.js

）

background.js:

var queryStr = '?tabId=';
var loaderURL = chrome.extension.getURL('/popup/popup.html') + queryStr;
$(document).ready(function () {
    chrome.browserAction.onClicked.addListener(function (tab) {
        chrome.tabs.create({ url: loaderURL + tab.id });
    });

    if (location.search && (location.search.indexOf(queryStr) === 0)) {
        var tabID = parseInt(location.search.substring(queryStr.length));
        $('#button').click(function () {
            chrome.tabs.sendMessage(tabID, {
                method: 'getHTML',
                param:  'myParam'
            }, function (response) {
                if (chrome.runtime.lastError) {
                    alert('ERROR: ' + chrome.runtime.lastError.message);
                } else {
                    alert(response.data);
                }
            });
        });
    }
});

如上所示，最好检查ChromeAPI回调中的，看看是否出了问题。在您的情况下，您会看到一个错误，指出没有接收端，这将指向正确的方向。

我没有看到任何清单或关于如何使用上述文件的任何信息（我也不想猜测）…@ExpertSystem对不起，它被跳过了。问题已更新所以在哪里使用了

dashboard.html

？这是一个背景页面。单击按钮，它将加载dashboard.html，其中包含一个搜索按钮。单击此按钮后，它会将TEXTAREA内容发送到内容脚本抱歉，我只是仔细查看了

background.js

。好的，我测试了它。我是否需要在内容\脚本末尾进行任何更改？只需我在回答中提到的更改（即使用

chrome.runtime.onMessage

而不是

chrome.extension.onMessage

），谢谢！成功了！但是我不确定我是否在这里提问或提出另一个问题。。如果background.js在接收端呢？我如何在类似于上面提到的buttin click事件上接受内容脚本中的数据？文档中非常清楚如何执行消息传递（我建议仔细查看）。要收听bg页面，请使用

chrome.runtime.onMessage

。在这种情况下，我建议发布一个带有相关代码的新问题（以及问题描述）。