我有一个相当简单的扩展和内容脚本:
manifest.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>
一个示例页面，在该页面中插入了内容脚本:
<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)的脚本发送到扩展程序的信息...只需从扩展程序页面打开后台控制台即可。
希望这会有所帮助，如果您稍微改变一下结构。让我知道是否有帮助