如何解决将数据从网页发送到Chrome扩展程序的问题? [英] How to fix issues sending data from web page to chrome extension?
问题描述
我正在尝试将网页中的数据传递给chrome扩展程序.
I am trying to pass data from my webpage to the chrome extension.
manifest.json(我首先尝试在本地环境中执行此操作)
manifest.json (I am trying to do this in my local environment first)
"externally_connectable": {
"matches": ["*://localhost/*"]
}
在listen.js(后台脚本)中:
In listen.js (a background script):
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (sender.url == blacklistedWebsite)
return; // don't allow this web page access
if (request.openUrlInEditor)
alert('test2');
alert(request.openUrlInEditor);
});
上面没有任何警报显示.
None of the alerts display above.
当我导航至chrome://extensions/时，通过查看ID获得了解压后的chrome扩展程序的扩展程序ID.在我在localhost环境中的网页中
I got the extension ID of the unpacked chrome extension by viewing the ID when I navigate to chrome://extensions/. In my webpage in localhost environment
// DEVELOPMENT extension ID
var editorExtensionId = "fppgjikaoolnlcmdjalbfkmlcadcckmb";
var url = 'test';
// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
function(response) {
if (!response.success)
handleError(url);
});
运行此命令时.在浏览器中，我收到一条错误消息:
When I run this. in the browser, I get an error saying:
Error in event handler for (unknown): TypeError: Cannot read property 'success' of undefined
我不确定从哪里开始调试.
I'm not sure where to begin debugging this.
推荐答案
在代码中进行了一些更改之后，我就能实现您的目标.
After making a few changes in your code I am able achieve your goal.
请参阅下面的完整代码.
See below the complete code.
manifest.json
manifest.json
{
"manifest_version": 2,
"name": "CS to Bg Communication",
"version": "0.1",
"background": {
"scripts": ["listen.js"]
},
"content_scripts": [
{
"all_frames" : true,
"matches": ["<all_urls>"],
"js": ["contentscript.js"]
}
],
"browser_action": {
"default_popup": "popup.html"
},
"externally_connectable": {
"matches": ["*://localhost/*"]
}
}
listen.js-后台脚本
listen.js - the background script
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
blacklistedWebsite = 'http : / / yourdomain . com /';
if (sender.url == blacklistedWebsite)
return; // don't allow this web page access
if (request.openUrlInEditor) {
alert('test2 - ' + request.openUrlInEditor);
sendResponse({"success": true, "AckFromBG": "I have received your messgae. Thanks!"}); // sending back the acknowlege to the webpage
}
});
contentscript.js-内容脚本-实际上什么也没做
contentscript.js - the content script - actually does nothing
console.log("this is content script");
web-page.html-本地网页
web-page.html - The local web page
<html>
<body>
This page will will send some message to BG script
<script type="text/javascript">
// DEVELOPMENT extension ID
var editorExtensionId = "fjaedjckfjgifecmgonfmpaoemochghb"; // replace with your extension ID
var url = 'test';
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url}, function(response) {
console.log(response);
if (!response.success)
handleError(url);
});
function handleError(url) {
console.log(url);
}
</script>
</body>
</html>
更改摘要:
-
定义了
blacklistedWebsite-这是未定义的.
添加了sendResponse({"success": true, "AckFromBG": "I have received
your messgae. Thanks!"});以将确认发送回给
网页.
Added sendResponse({"success": true, "AckFromBG": "I have received
your messgae. Thanks!"}); to send back the acknowledgment to the
webpage.
定义function handleError(url) {
console.log(url);
}这是未定义的.
Define function handleError(url) {
console.log(url);
} this was not defined.
就是这样.希望这能解决您的问题.
That's it. Hope this will solve your issue.
这篇关于如何解决将数据从网页发送到Chrome扩展程序的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
