本文介绍了内容脚本devtools.js到我的新面板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一段时间试图让我的内容脚本中的代码与我的面板交谈。 (这个扩展为开发工具添加了一个新面板。)从我的内容脚本中,我可以这样做:

  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到我的新面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    10-29 12:54