程序员经验分享-hwhale

将 devtools.js 的内容脚本添加到我的新面板

2023-11-29

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

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 中获取我的消息。这样我就可以与我添加到开发工具的面板进行对话。我怎样才能做到这一点？


之间建立连接开发工具页面和多个内容脚本 pages, 背景页被用作中介。所以，想法是有一个渠道devtools to background和来自background to content scripts。这是通用方法需要处理内容脚本的可变性质execution time.

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

清单.json

挂号的background,devtools and content scripts到清单文件

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

开发工具.html

挂号的devtools.js遵守 CSP

<html>

    <head>
        <script src="devtools.js"></script>
    </head>

    <body></body>

</html>

开发工具.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);
});

背景.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

你可以看到http://www.google.co.in/被接收于devtools page

参考

您可以参考以下文档以获取更多信息。

  • 内容脚本
  • 背景页
  • CSP
  • 开发工具
  • 消息通讯
  • 扩展API
  • Tab API
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

googlechromeextension

将 devtools.js 的内容脚本添加到我的新面板 的相关文章

随机推荐

  • 从邮递员到 Microsoft Dynamics crm 365 的 POST/GET 请求

    我试图使用 Web API 创建实体 因此 使用我的实例 url client id client secret 我可以成功生成访问令牌和刷新令牌 但每当我尝试使用该 access token 发出任何发布请求时 我都会收到 401 未经授

  • 在图像顶部绘制矩形的浏览器友好方式 R Shiny

    我编写了一个闪亮的应用程序 允许用户在图像顶部绘制矩形 下面是最小的可重现示例 我目前的方法的问题是每次添加矩形时 都会创建一个新图像 将其写入磁盘并进行渲染 发送到用户的浏览器 这需要相当长的时间 当互联网连接速度很慢时 这会变得非常烦人

  • 统一码格式

    我正在处理字符串格式 对于英语 格式很整洁 但对于 unicode 字符 格式很随意 谁能告诉我原因吗 例子 form u lt 15 lt 3 a u u u u u u u u u u for i in range 0 10 print

  • 结束迭代器递减的可移植性如何？

    刚刚遇到减量end 我公司源代码中的迭代器对我来说看起来很奇怪 据我记得这在某些平台上有效 但在其他平台上无效 也许我错了 但是我在标准中找不到任何有用的东西 标准只是说end 返回一个迭代器 它是结束后的值 但它保证是可递减的吗 这样的代

  • 雄辩的 javascript 递归示例中的混乱

    这段递归代码来自 eloquent javascript 一书 function power base exponent if exponent 0 return 1 else return base power base exponent

  • 如何访问Java中自定义注释中定义的字段

    我有以下 Java 代码 import java lang reflect Field public class AnnotationTest public interface Size int size int location Size

  • 无法连接到 Openfire 服务器（使用 smack api）

    我正在尝试使用 smack 4 1 0 运行此代码 Thread D new Thread new Runnable Override public void run SmackConfiguration setDefaultPacketR

  • CMake add_custom_target()：使用“调试->开始调试”运行自定义命令

    add custom target NSISTest Preprocess SOURCES precompress nsi add custom command TARGET NSISTest Preprocess POST BUILD C

  • 在 Python 中记录为调用者模块

    我有以下应用程序结构 utils py def do something logger None if not logger logger logging getLogger name print hello logger debug te

  • 关于 Firemonkey (Delphi) 中的 TidHttp、mshtml、ActiveX、COMObj

    我正在审查以下有趣的文章 使用 Delphi 从 HTML 页面中提取链接 我在 Firemonkey 中进行了测试 它非常有用 但是此代码使用来自 Mshtml ActiveX 和 COMObj 的对象 所以我的问题是 上面的这些对象是否

  • 在新线程中启动异步函数

    我正在尝试创建一个不和谐机器人 我需要在另一个新线程中运行异步函数 因为主线程需要运行另一个函数 不和谐客户端 我正在努力实现的目标 This methods needs to run in another thread async def

  • 如何在iphone中设置html+css添加

    如何在iphone中设置html css添加 webView UIWebView alloc initWithFrame CGRectMake 0 0 320 458 webView delegate self self view addS

  • Notepad++可以将正则表达式匹配的字符串转换为小写吗？

    我有一个 C 源文件 它使用 getMemberName 形式的函数返回成员数据 相反 我想使用memberName 为了匹配需要更改的函数名称的实例 我使用以下正则表达式 s get A Z 问题是 我不知道如何用小写版本替换 2 的实例

  • Firebase ID 令牌在一小时后过期

    所以我正在使用redux saga在我的react native应用程序中并尝试使用刷新令牌但不起作用 所以我的方法是在app js中执行以下操作 以便专门针对每个请求获取令牌并强制刷新它 handleResponse async gt c

  • Django admin查看上传的照片

    我已经在 Django 中实现了照片上传 但在 Django 管理中查看它时遇到问题 模型 py class WorkPlacePhoto models Model file models FileField storage FileSys

  • 如何在 Android 中创建像 Apple Music App 这样的 UI 和控件？

    视频链接 我想创建视图和动画 例如苹果音乐应用程序在 iOS 中可用 但是 我想在 Android 中执行类似于上面的视频链接的操作 是否可以在 Android 中创建这样的视图 我怎样才能实现这个目标 这方面该如何进行呢 请分享任何链接和

  • 浏览器中并发文件下载的最大数量？

    两个相关问题 网页允许打开的最大并发文件数是多少 例如图像 CSS 文件等 我假设这个值在不同的浏览器中是不同的 也许每个文件类型 例如 我非常确定 javascript 文件一次只能加载一个 对吗 有没有办法可以使用javascript来

  • 在 lmer 输出上运行汽车方差分析后出现列表类型错误

    我正在尝试在 R 中做一个随机效应模型 我想运行一个anova在输出中 我浏览了一些教程并复制了他们的示例 但我的不起作用 我在 Anova 上不断收到以下错误 1 length names which term sapply names

  • chrome和firefox之间的window.innerWidth不同？

    html body position absolute width 100 height 100 margin 0 padding 0 overflow hidden The window innerWidth从 FX 和 chrome 返

  • 将 devtools.js 的内容脚本添加到我的新面板

    我花了很长时间试图在我的内容脚本中获取代码来与我的面板对话 此扩展向开发工具添加了一个新面板 从我的内容脚本中 我可以执行以下操作 chrome extension sendMessage greeting hello function r

热门标签