gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 16:47:38 24 4
gpt4 key购买 nike

我有很多时间试图在我的内容脚本中获取代码以与我的面板交谈。 (此扩展程序向开发工具添加了一个新面板。)从我的内容脚本中,我可以执行以下操作:

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 Page之间建立连接和多个 content script页, Background Page用作中介。所以,想法是有一个来自 devtools 的 channel 至 background来自 backgroundcontent scripts .这是通用方法 需要处理内容脚本的可变性质 execution time .

您可以使用以下脚本作为 devtools.js 之间通信的引用至 content scripts .

manifest.json

已注册 background , devtoolscontent scripts list 文件

{
"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

已注册 devtools.js遵守 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);
});
});

输出

你可以看到 http://www.google.co.in/已收到 devtools

引用

您可以引用以下文档以获取更多信息。
  • Content Scripts
  • Background Page
  • CSP
  • Dev Tools
  • Message Communication
  • Extension API
  • Tab API
  • 关于google-chrome-extension - devtools.js 的内容脚本到我的新面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14265880/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com