没有从网页接收任何数据到Chrome扩展的content.js [英] Not receiving any data from webpage to content.js of chrome extension
问题描述
我试图通过点击按钮发送消息，即使在我的网站上，也是通过Chrome扩展程序在标签中打开的。
但是，我无法从网页获取任何消息，并且出现端口错误。
我的content.js：
var port = chrome.extension .connect（）;
port.onMessage.addEventListener（message，function（event）{
//我们只接受来自自己的消息
if（event.source！= window）
return;
if（event.data.type&&（event.data.type ==FROM_PAGE））{
console.log（Content script received： + event.data.text）;
port.postMessage（event.data.text）;
}
}，false）;
chrome.tabs.onMessage.addListener（function（tabId，changeInfo，tab）{
alert（changeInfo）;
}）;
Popup.js
$（＃linkify）。click（function（）{
chrome.tabs.create（{
'url'：'http：// localhost：3000 / signin'
}，函数（tab）{
// Tab打开。
chrome.tabs.executeScript（tab.id，{
file：jquery.js
}，function（）{
console.log（'all injected'）;
chrome.tabs.executeScript（tab.id，{
file：content.js
}，function（）{
console.log（'all injected'）;
chrome.tabs.sendMessage（tab.id，function（）{
console.log（'all injected' ）;
}）;
}）;
}）;
}）;
// getlink（）;
}）;
}）;
函数checkUserAuth（）{
console.log（localStorage.getItem（apiKey））;
if（localStorage.getItem（apiKey）！= null）{
document.getElementById（'openBackgroundWindow'）。style.visibility ='hidden';
var port = chrome.extension.connect（{
name：Sample Communication
}）;
port.postMessage（Hi BackGround）;
port.onMessage.addListener（function（msg）{
console.log（message received+ msg）;
}）;
我的background.js
chrome.extension.onMessage.addListener（
函数（request，sender，sendResponse）{
console.log（sender.tab？
来自内容脚本： + sender.tab.url：
from the extension）;
}）;
从网址发送消息的脚本：
document.getElementById（theButton）。addEventListener（click，function（）{
console.log（message sent）;
window.postMessage（{type：FROM_PAGE，text：Hello from the webpage！}，*）;
}，false）;
我在哪里错了，我没有收到任何消息？
在对脚本进行一些更改之后，我将它运行为：）
这个问题涉及从扩展页面传递的消息 - >背景，内容页面 - >背景，扩展页面 - >内容页面
目标网页输出（在我的情况下，它是 http：/ /www.google.co.in/ 对你来说它是 http：// localhost：3000 / signin ）
来自popup.js的输出
background.js输出
我为 var port = chrome.extension.connect（{name：Sample Communication}）添加了一个连接侦听器; 代码在你的popup.js中 background.js 它解决了接收结束不存在的问题
background.js
chrome.extension.onConnect.a ddListener（function（port）{
port.onMessage.addListener（function（content）{
console.log（Connected ...+ content）;
}）;
}）;
chrome.extension.onMessage.addListener（
函数（request，sender，sendResponse）{
console.log（sender.tab？$ b $from a content script：+ sender .tab.url：
from the extension）;
}）;
在新标签页创建时删除脚本注入权，并在标签页状态完成后注入脚本for tabs.onUpdated 听众
popup.js
flag = false;
函数customFunction（）{
chrome.tabs.create（{$ b $'url'：'http://www.google.co.in/'
}，function（标签）{
flag = true;
// Tab tab。
}）;
chrome.tabs.onUpdated.addListener（function（tabId，changeInfo，tab）{
if（flag）{
if（changeInfo.status == ='complete'）{
console.log（Inject is called）;
injectScript（tab）;
}
}
}）;
函数injectScript（tab）{
chrome.tabs.executeScript（tab.id，{
file：jquery.js，
runAt： document_start
，function（）{
console.log（'all injected'）;
chrome.tabs.executeScript（tab.id，{
file：content。 js，
runAt：document_start
}，function（）{
console.log（'all injected'）;
chrome.tabs.sendMessage（tab。 id，function（）{
console.log（'all injected'）;
}）;
}）;
}）;
window.onload = function（）{
document.getElementById（linkify）。onclick = customFunction;
};
var port = chrome.extension.connect（{
name：Sample Communication
}）;
port.postMessage（Hi BackGround）;
port.onMessage.addListener（function（msg）{
console.log（message received+ msg）;
}）;
从网页中消除 window.postMessage（）页面，并注入了一个自定义脚本来发送消息到popup.js上点击按钮（这里我选择了谷歌标志）
content.js
function bindFunction（）{
console.log（messages sent） ;
chrome.extension.sendMessage（{type：FROM_PAGE，text：Hello from the webpage！}）;
window.onload = function（）{
document.getElementById（hplogo）。onclick = bindFunction;
};
其中 linkify 按钮的示例页面与登入按钮
popup.html $ b
< HTML>
< head>
< script src =popup.js>< / script>
< / head>
< body>
< button id =linkify> Linkify< / button>
< / body>
< / html>
确保所有代码在 manifest.json 为注入脚本文件，标签等完整的 manifest.json 文件
清单.json
{
name：Complex Calls，
description：Complex Calls Demo，
manifest_version：2，
background：{
scripts：[background.js]
}，
browser_action：{
default_popup：popup.html，
default_icon：screen.png
}，
权限：[
标签，< all_urls>
]，
版本：1
}
I am trying to send a message from a button click even on my website which is opened in a tab by chrome extension.
But, I'm not able to get any message from the webpage and I get a port error.
My content.js:
var port = chrome.extension.connect();
port.onMessage.addEventListener("message", function(event) {
// We only accept messages from ourselves
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Content script received: " + event.data.text);
port.postMessage(event.data.text);
}
}, false);
chrome.tabs.onMessage.addListener(function(tabId, changeInfo, tab) {
alert(changeInfo);
});
Popup.js
$("#linkify").click(function() {
chrome.tabs.create({
'url': 'http://localhost:3000/signin'
}, function(tab) {
// Tab opened.
chrome.tabs.executeScript(tab.id, {
file: "jquery.js"
}, function() {
console.log('all injected');
chrome.tabs.executeScript(tab.id, {
file: "content.js"
}, function() {
console.log('all injected');
chrome.tabs.sendMessage(tab.id, function() {
console.log('all injected');
});
});
});
});
//getlink();
});
});
function checkUserAuth() {
console.log(localStorage.getItem("apiKey"));
if (localStorage.getItem("apiKey") != null) {
document.getElementById('openBackgroundWindow').style.visibility = 'hidden';
}
}
var port = chrome.extension.connect({
name: "Sample Communication"
});
port.postMessage("Hi BackGround");
port.onMessage.addListener(function(msg) {
console.log("message recieved" + msg);
});
My background.js
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
});
Script that sends message from the web url:
document.getElementById("theButton").addEventListener("click", function() {
console.log("message being sent");
window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
}, false);
Where am I going wrong here that I am not receiving any message?
After making some changes to your scripts i got it running :)
This question covers message passing from extension page -- > background, content page -- > background, extension page --> content page
Output from destination page (In my case it is http://www.google.co.in/ for you it is http://localhost:3000/signin)
Output from popup.js
Output from background.js
I have added a connection listener for var port = chrome.extension.connect({name: "Sample Communication"}); code in your popup.js in background.js it solved problem of Receiving end do not exist
background.js
chrome.extension.onConnect.addListener(function(port) {
port.onMessage.addListener(function(content) {
console.log("Connected ..." + content);
});
});
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
});
Eliminated script injection right at the time of new tab creation and injected script after tab status is complete by looking for tabs.onUpdated Listener
popup.js
flag = false;
function customFunction() {
chrome.tabs.create({
'url': 'http://www.google.co.in/'
}, function(tab) {
flag = true;
// Tab opened.
});
}
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (flag) {
if (changeInfo.status === 'complete') {
console.log("Inject is called");
injectScript(tab);
}
}
});
function injectScript(tab) {
chrome.tabs.executeScript(tab.id, {
file: "jquery.js",
"runAt": "document_start"
}, function() {
console.log('all injected');
chrome.tabs.executeScript(tab.id, {
file: "content.js",
"runAt": "document_start"
}, function() {
console.log('all injected');
chrome.tabs.sendMessage(tab.id, function() {
console.log('all injected');
});
});
});
}
window.onload = function() {
document.getElementById("linkify").onclick = customFunction;
};
var port = chrome.extension.connect({
name: "Sample Communication"
});
port.postMessage("Hi BackGround");
port.onMessage.addListener(function(msg) {
console.log("message recieved" + msg);
});
Eliminated window.postMessage() from web page and injected a custom script to send message to popup.js on click of button(Here i have chosen google logo)
content.js
function bindFunction() {
console.log("message being sent");
chrome.extension.sendMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" });
}
window.onload = function() {
document.getElementById("hplogo").onclick = bindFunction;
};
Sample Page where linkify button is similar to login button
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<button id="linkify">Linkify</button>
</body>
</html>
Ensured all code has permissions in manifest.json for injected script files,tabs etc in a complete manifest.json file
manifest.json
{
"name": "Complex Calls",
"description": "Complex Calls Demo",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": "screen.png"
},
"permissions": [
"tabs", "<all_urls>"
],
"version": "1"
}
这篇关于没有从网页接收任何数据到Chrome扩展的content.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
