[英]Chrome extension message passing between content and background not working
I am developing a chrome extension, here are the main files: 我正在开发一个chrome扩展,这里是主要文件:
background.js
getPageDimension = function (){
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, { message: "DIMENSION" }, function(response){
if (response != null) {
console.log(response.x);
console.log(response.y);
console.log(response.w);
console.log(response.h);
}else{
console.log('Response is null');
}
});
});
};
content.js
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.message && (msg.message == "DIMENSION")) {
var dimension = getPageDiemension(document.documentElement);
console.log(dimension.x);
console.log(dimension.y);
console.log(dimension.w);
console.log(dimension.h);
sendResponse({x: dimension.x, y: dimension.y,w: dimension.w,h: dimension.h});
}
});
getPageDiemension = function(currentDom){
var dimension = new Object();
dimension.x = 0;
dimension.y = 0;
dimension.w = currentDom.scrollWidth;
dimension.h = currentDom.scrollHeight;
return dimension;
}
So my aim is to get the full height and width of page loaded in current active tab. 所以我的目标是在当前活动选项卡中加载页面的完整高度和宽度。 When I debug my content script, I get the proper response in my background.js , but if run the script without debugging, I get an
undefined
response in my background.js
. 当我调试我的内容脚本时,我在我的background.js中得到了正确的响应,但是如果在没有调试的情况下运行脚本,我在我的
background.js
得到一个undefined
响应。
Here is the declaration of my cotent.js
in my manifest.json
file: 这是我的
manifest.json
文件中我的cotent.js
的声明:
"content_scripts": [{
"all_frames": true,
"matches": [
"http://*/*", "https://*/*"
],
"js": ["content.js"]
}],
Kindly help me, where am I going wrong?. 请帮助我,我哪里错了? Let me know if you need any further data.
如果您需要任何进一步的数据,请告诉我。
There are two little problems in your code, which I found after a wile, since that it looks perfectly working (when it isn't at all). 你的代码中存在两个小问题,我发现它们是在一个诡计之后发现的,因为它看起来非常有效(当它完全没有时)。
chrome.tabs.getSelected(...)
method, which you should avoid. chrome.tabs.getSelected(...)
方法,您应该避免使用该方法。 Use chrome.tabs.query({active: true, highlighted: true}, ...)
instead. chrome.tabs.query({active: true, highlighted: true}, ...)
。 In your chrome.runtime.onMessage
listener, in the content script, you are doing some calculations before sending the response: this makes the message channel close before you can send a response, and will result in a null
response. 在
chrome.runtime.onMessage
侦听器中,在内容脚本中,您在发送响应之前正在进行一些计算:这使得消息通道在您发送响应之前关闭,并且将导致null
响应。
Quoting from the official documentation : 引自官方文件 :
This function (
sendResponse
) becomes invalid when the event listener returns, unless you returntrue
from the event listener to indicate you wish to send a response asynchronously (this will keep the message channel open to the other end untilsendResponse
is called).当事件侦听器返回时,此函数(
sendResponse
)变为无效,除非您从事件侦听器返回true
以指示您希望异步发送响应(这将使消息通道保持打开到另一端,直到调用sendResponse
)。
Now that you know what the problems are, you can easily replace the old tabs.getSelected()
with tabs.query()
, and add a return true;
现在你知道有什么问题,你可以很容易地取代旧
tabs.getSelected()
与tabs.query()
并添加return true;
statement in the handler of the runtime.onMessage
event in your content script. 内容脚本中
runtime.onMessage
事件的处理程序中的语句。 The solution is the following, I also lightened the code a bit. 解决方法如下,我也稍微减轻了代码。
Your background.js
: 你的
background.js
:
getPageDimension = function (){
chrome.tabs.query({active: true, highlighted: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, { message: "DIMENSION" }, function(response){
if (response !== null) console.log('Response:', response);
else console.log('Response is null');
});
});
};
Your content.js
: 你的
content.js
:
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.message && (msg.message == "DIMENSION")) {
var dimension = getPageDiemension(document.documentElement);
console.log('Dimension:', dimension);
sendResponse(dimension);
}
return true;
});
getPageDiemension = function(currentDom){
return { x: 0, y: 0,
w: currentDom.scrollWidth,
h: currentDom.scrollHeight
}
}
You can find a working example I made for testing HERE . 你可以找到我在这里测试的一个工作示例。
Just for clarity, I'm leaving you some documentation links regarding the APIs involved in this extension that you may find helpful: 为了清楚起见,我将为您留下一些关于此扩展中涉及的API的文档链接,您可能会发现它们很有帮助:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.