页面注入的JS脚本和Content Script（内容脚本）的通信

╰半夏微凉° 2023-10-10 15:17 5阅读 0赞

背景：  
**通过创建元素的方式向页面注入js脚本不能直接通过chrome API完成和Content Script(扩展内容脚本)之间的的消息通信。**  
下面就是怎么把消息从**注入脚本** 发送到 **内容脚本**

1.  向页面注入一个节点  
    以向百度注入一段页面元素为例：  
    ![在这里插入图片描述][0fbda7dc5a1541d19c509519184965b3.png]

let buttonEle = document.createElement('button');
    buttonEle.onclick = 'window.postMessage({
        message:"要向content script发送的消息"}, '*'); alert("按钮注入")';
    buttonEle.style = 'width: 110px;height: 44px;background-color: #f65c14;border-radius: 0 10px 10px 0;font-size: 17px;color: #fff;border: none;';
    buttonEle.innerText = '注入此按钮'
    
    ================== 如下
    
    
    <button onclick="window.postMessage({'message':'message'}, '*'); alert('按钮注入')" style="
        width: 110px;
        height: 44px;
        background-color: #f65c14;
        border-radius: 0 10px 10px 0;
        font-size: 17px;
        color: #fff;
        border: none;
        ">注入此按钮</button>
    
    
    ================== 重点！！！注入的脚本发送消息
    
    window.postMessage({
        type: "inject_message_type", message:"要向content script发送的消息", '*'})

1.  Content Script 内容脚本监听注入脚本发送的消息

// 接收：window.postMessage 发送的消息。内容脚本 监听 注入脚本 发送的消息  （content script）
    window.addEventListener('message', (e) => {
        
      console.log('ZMessageEvent:', e)
      if (e && e.data && e.data.type === 'inject_message_type') {
        
        // TODO LIST
        // 由内容脚本调用 chrome API 完成和background的交互
      }
    })

[0fbda7dc5a1541d19c509519184965b3.png]: https://img-blog.csdnimg.cn/0fbda7dc5a1541d19c509519184965b3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关页面注入的JS脚本和Content Script（内容脚本）的通信

背景：通过创建元素的方式向页面注入js脚本不能直接通过chrome API完成和Content Script(扩展内容脚本)之间的的消息通信。下面就是怎么把消息从注

╰半夏微凉°/ 2023年10月10日 15:17/ 0 赞/ 6 阅读

相关 OpenWrt启动脚本(Init Scripts）

参考 Openwrt [Init Scripts官方文档][Init Scripts] 在 procd 执行/etc/rc.d/S\时，其参数为"boot"（例如：/et

梦里梦外;/ 2023年06月12日 09:51/ 0 赞/ 524 阅读

相关用 node.js 脚本替代复杂的 npm script

用 node.js 脚本替代复杂的 npm script [Node.js][] 丰富的生态能赋予我们更强的能力，对于前端工程师来说，使用 Node.js 来编写复

港控/mmm°/ 2023年03月01日 10:42/ 0 赞/ 10 阅读

相关 Keepalived VRRP script脚本

Keepalived VRRP script脚本脚本详解 vrrp_script <SCRIPT_NAME> { 定义一个检测脚本

今天药忘吃喽~/ 2022年11月11日 13:16/ 0 赞/ 357 阅读

相关断点调试script脚本程序

如果想断点调试script脚本程序，前题是要先安装vs.net。在B/S应用开发中，脚本可以提高程序与客户的交互能力、降低客户端与服务的数据传输。但是大多数B

左手的ㄟ右手/ 2022年09月30日 14:55/ 0 赞/ 24 阅读

相关 mongodb 交互式操作和script文件脚本的区别。

Differences Between Interactive and Scripted mongo https://docs.mongodb.org

比眉伴天荒/ 2022年08月20日 04:24/ 0 赞/ 61 阅读

相关 WHWW之脚本语言（Script）

What:经常听到别人说脚本，写个脚本就好了，那什么叫脚本呢？脚本（script）其实就是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或者批处理文

梦里梦外;/ 2022年05月26日 06:17/ 0 赞/ 201 阅读

相关 JS脚本中刷新当前页面的方法

1、window.location.href=“url”：当前页面打开URL页面，改变url地址，如果URL为空则重新打开当前页面。（1）与self.location.

青旅半醒/ 2022年05月24日 04:44/ 0 赞/ 254 阅读

相关 linux 脚本（bash script)技巧

本文介绍10个小技巧。 1 使用注释写注释有助于你和其他人理解你的脚本 !/bin/bash Linux is the best OS. 2 设置脚

素颜马尾好姑娘i/ 2022年03月29日 17:17/ 0 赞/ 316 阅读

相关 npm中script脚本的使用

一、什么是 npm 脚本？ npm 允许在`package.json`文件里面，使用`scripts`字段定义脚本命令。 > { > // ...

拼搏现实的明天。/ 2022年02月13日 13:25/ 0 赞/ 524 阅读