Google chrome extension devtools.js的内容脚本到我的新面板

我花了很长时间试图让我的内容脚本中的代码与我的面板对话。（此扩展为开发工具添加了一个新面板。）通过我的内容脚本，我可以执行以下操作：

chrome.extension.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

我可以在背景脚本中找到它，没问题

chrome.extension.onMessage.addListener(
 function(request, sender, sendResponse) {
 if (request.greeting == "hello") sendResponse({farewell: JSON.stringify(sender)});
});

---

但是我需要在我的devtools JS中获取我的消息。这样我就可以与我添加到开发工具中的面板对话。如何才能做到这一点？

要在多个页面之间建立连接，可以将其用作中介。所以，我们的想法是要有一个从

devtools

到

background

的通道，以及从

background

到

内容脚本的通道。这是处理内容脚本的可变性质
执行时间所需的通用方法

您可以使用以下脚本作为
devtools.js
与
内容脚本之间通信的参考

manifest.json

已将
后台
、
开发工具
和
内容脚本
注册到清单文件

{
    "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.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);
});

//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);
});

//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);
    });
});

myscript.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);
});

//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);
});

//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);
    });
});

background.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);
});

//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);
});

//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);
    });
});

输出
您可以看到
http://www.google.co.in/
在
devtools
页面中接收

工具书类
有关更多信息，请参阅以下文档