内容脚本devtools.js到我的新面板 [英] content script to devtools.js to my new panel
问题描述
我有一段时间试图让我的内容脚本中的代码与我的面板交谈。 （这个扩展为开发工具添加了一个新面板。）从我的内容脚本中，我可以这样做：
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 Page 和多个内容脚本页面，后台页面用作中介。所以，想法是从 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到我的新面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
