gpt4 book ai didi

javascript - Chrome 扩展和内容脚本只能在 "inspect popup"模式下通信

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:42:59 24 4
gpt4 key购买 nike

我有这个相当简单的扩展和内容脚本:

list .json:

{
"name": "My.First.App.Uses.Native.Api",
"version": "1.0",
"manifest_version": 2,
"description": "My app uses my first Native Api",
"icons": {
"128": "icon-128__2.png"
},
"permissions": [
"nativeMessaging", "activeTab"
],
"browser_action": {"default_popup": "ext-page.htm"},
"content_scripts": [
{
"matches": ["file:///*"],
"js": ["content-script.js"]
}
]
}

ext-script.js:

// Listen for messages that come from the client script.
chrome.runtime.onMessage.addListener(
function( request, sender, sendResponse ) {
if( request.greeting ) {
//connectToNative();
sendResponse( { farewell: request.greeting + ' -> received' } );
}
} );

content-script.js:

var btn = document.getElementById( 'mybutton' );
if( btn ) {
btn.addEventListener( 'click', function() {
var msg = document.getElementById( 'mytext' ).value;
if( msg ) {
chrome.runtime.sendMessage( { greeting: msg }, function( response ) {
console.log( response.farewell );
} );
//port.postMessage({joke: "Knock knock"});
}
else {
alert( "content script could not send message" );
}
} );
}

ext-page.htm:

<!DOCTYPE html>
<html>
<head>
<script src='./ext-script.js'></script>
</head>
<body>
This is a test Extention.
</body>
</html>

内容脚本注入(inject)的示例页面:

<html>
<head>
<title>Connecting to a Chrome Extention using Content Script</title>
</head>

<body>
<p>
<!--<input id="btn" type="button" value="open document" />-->
<input id="mytext" type="text" />
<input id="mybutton" name="mybutton" type="button" value="open document" />
</p>
</body>
</html>

我的问题:如果我选择扩展并“检查弹出窗口”(意味着启动 Debug模式),然后单击我的示例页面上的 mybutton 按钮,然后我会收到来自扩展的消息,我可以在我页面的控制台。我想要的是在我的示例页面中单击该按钮后立即获得该消息——当然没有调试扩展。如果我不“检查弹出窗口”扩展,那么我会收到此错误消息:

(未知)的事件处理程序错误:TypeError:无法读取未定义的属性“告别”

谢谢!

最佳答案

我认为因为您在弹出窗口内的 main.js 中执行警报,所以需要打开弹出窗口。尝试在 background.js 中插入警报。因为 background.js 作为 content_script 插入到您的示例页面中,所以警报应该显示在您的示例页面中。

而不是在 background.js 中

    if( msg ) {
chrome.extension.sendRequest( msg );
}

var msg = document.getElementById( 'mytext' ).value;
if( msg ) {
alert( msg );
}

文档建议有一个像这样的 list :

{
"manifest_version": 2,
"name": "Test",
"version": "0.1",
"background": {
"scripts": ["background.js"],
//this script is the main one which your extension communicates with
"persistent": false
},
"browser_action": {
"default_title": "BET",
"default_popup": "popup.html"
//this html file is the one that will be shown when clicked on your extension icon
},
"content_scripts": [{
//this file will get injected into the tabs
"matches": ["file:///*"],
"js": ["content.js"]
}],
"permissions": [
"tabs",
"<all_urls>"
]

所以在你的 content.js 里面你应该有

chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});

在 background.js 中你会收到消息

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request.greeting);
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});

这样做,您将能够记录从注入(inject)脚本发送到扩展程序的内容...只需从扩展程序页面打开后台控制台即可。

如果您稍微更改一下结构,希望这会对您有所帮助。让我知道是否有帮助

关于javascript - Chrome 扩展和内容脚本只能在 "inspect popup"模式下通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30884451/

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