gpt4 book ai didi

javascript - 在 Chrome 扩展的后台页面的 onClick 事件上向内容脚本发送消息

转载 作者:行者123 更新时间:2023-11-28 00:01:46 25 4
gpt4 key购买 nike

我知道消息传递是用于此目的,但不知何故它不适用于我的后台页面的 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)

代码如下:

list .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>

Script.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"});
});

background.js

$(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 的 onClick 事件

最佳答案

首先,您需要将已弃用的 chrome.extension.onMessage 替换为 chrome.runtime.onMessage script.js 中。

主要问题是 send messages to content scripts 你需要使用 chrome.tabs.sendMessage (这还需要知道标签 ID)。
实现此功能的一种简单方法是在打开 dashboard.html View 时将选项卡 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);
}
});
});
}
});

如上所示,检查 chrome.runtime.lastError 总是一个好主意 在 chrome API 回调中查看是否有任何问题。在您的情况下,您会看到一个错误,指出没有接收端,这将指向正确的方向。

关于javascript - 在 Chrome 扩展的后台页面的 onClick 事件上向内容脚本发送消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20917905/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com