问题描述
我有一段时间试图让我的内容脚本中的代码与我的面板交谈。 (这个扩展为开发工具添加了一个新面板。)从我的内容脚本中,我可以这样做:
chrome.extension。 sendMessage({greeting:hello},function(response){
console.log(response.farewell);
});
我可以在后台脚本中找到它。
chrome.extension.onMessage.addListener(
函数(request,sender,sendResponse){
if(request.greeting ==hello )sendResponse({farewell:JSON.stringify(sender)});
});
但是我需要在我的devtools JS中找到我的消息。这样我可以对我添加到开发工具的面板说话。
建立和多个页面,用作中介。所以,想法是从 devtools
到 background
和从 background
到内容脚本
。这是通用方法,用于处理内容脚本的变量性质执行时间
。
您可以使用以下脚本作为 devtools.js
与内容脚本
之间通信的参考。
$ b manifest.json
注册背景
, devtools
和内容脚本
清单文件
<$ p $
name:Insulated Windows Demo,
description:这将演示Inspected window API,
devtools_page:devtools。 html,
manifest_version:2,
version:2,
permissions:[
experimental,
tabs
,
background:{
scripts:[
background.js
]
},
content_scripts :[
{
符合:[
< all_urls>
],
js:[
myscript.js
}
]
}
code>
devtools.html
已注册 devtools.js
符合CSP
< html>
< head>
< script src =devtools.js>< / script>
< / head>
< body>< / body>
< / html>
devtools.js
//创建一个带有后台页面的端口用于连续的消息通信
var port = chrome.extension.connect({
name:Sample Communication/ /给定名称
});
//将消息发布到后台页面
port.postMessage(请求标签数据);
//从后台页面收到Hanlde响应
port.onMessage.addListener(函数(msg){
console.log(标签数据收到的是+ msg);
});
myscript.js
//来自后台页面的处理程序请求
chrome.extension.onMessage.addListener(function(message,sender){
console.log(In content接收到的脚本消息是+ message;
//将需要的信息发送到背景页面
chrome.extension.sendMessage(我的URL是+ window.location.origin);
}) ;
background.js
//处理来自devtools的请求
chrome.extension.onConnect.addListener(function(port){
port.onMessage.addListener(function(message) {
//请求标签发送所需信息
chrome.tabs.query({
status:complete,
currentWindow:true,
url:http://www.google.co.in/
},功能(标签){
(标签中的标签){
/ /发送消息到内容脚本
chrome.tabs.sendMessage(tabs [tab] .id,message);
}
});
});
//返回Devtools
chrome.extension.onMessage.addListener(函数(message,sender){
port.postMessage(message);
});
});
输出
您可以看到 http://www.google.co.in/
收到 devtools
页面
参考资料
您可以参考以下文件获取更多信息。 b
I'm having a heck of a time trying to get code in my content script to talk to my panel. (This extension adds a new panel to the Dev Tools.) From my content script I can do this:
chrome.extension.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
and I can pick it up in a background script no problem.
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello") sendResponse({farewell: JSON.stringify(sender)});
});
But I need my message to be picked up in my devtools JS. That way I can speak to the panel I've added to dev tools. How can I do that?
To Establish connection between Devtools Page and multiple content script pages, Background Page is used as a mediator. So, idea is to have a channel from devtools
to background
and from background
to content scripts
. This is a generic method needed to handle variable nature of content scripts execution time
.
You can use following script as a reference for communication between devtools.js
to content scripts
.
manifest.json
Registered background
,devtools
and content scripts
to manifest file
{
"name": "Inspected Windows Demo",
"description": "This demonstrates Inspected window API",
"devtools_page": "devtools.html",
"manifest_version": 2,
"version": "2",
"permissions": [
"experimental",
"tabs"
],
"background": {
"scripts": [
"background.js"
]
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"myscript.js"
]
}
]
}
devtools.html
Registered devtools.js
to comply with CSP
<html>
<head>
<script src="devtools.js"></script>
</head>
<body></body>
</html>
devtools.js
//Created a port with background page for continous message communication
var port = chrome.extension.connect({
name: "Sample Communication" //Given a Name
});
//Posting message to background page
port.postMessage("Request Tab Data");
//Hanlde response when recieved from background page
port.onMessage.addListener(function (msg) {
console.log("Tab Data recieved is " + msg);
});
myscript.js
//Handler request from background page
chrome.extension.onMessage.addListener(function (message, sender) {
console.log("In content Script Message Recieved is " + message);
//Send needed information to background page
chrome.extension.sendMessage("My URL is" + window.location.origin);
});
background.js
//Handle request from devtools
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
//Request a tab for sending needed information
chrome.tabs.query({
"status": "complete",
"currentWindow": true,
"url": "http://www.google.co.in/"
}, function (tabs) {
for (tab in tabs) {
//Sending Message to content scripts
chrome.tabs.sendMessage(tabs[tab].id, message);
}
});
});
//Posting back to Devtools
chrome.extension.onMessage.addListener(function (message, sender) {
port.postMessage(message);
});
});
Output
You can see http://www.google.co.in/
being received in devtools
page
References
You can refer the following documentation for further information.
这篇关于内容脚本devtools.js到我的新面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!