Chrome 浏览器插件获取网页 window 对象(方案三)

前言

最近有个需求,是在浏览器插件中获取 window 对象下的某个数据,当时觉得很简单,和 document 一样,直接通过嵌入 content_scripts 直接获取,然后使用 sendMessage 发送数据到插件就行了,结果发现不是这样滴…

在这里不推荐使用 runtime.executeScript 进行注入,很可能会报错:

Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ ‘wasm-unsafe-eval’ ‘inline-speculation-rules’ http://localhost😗 http://127.0.0.1😗”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-P5exJBBLYN1KVh+CK9MkXvRal4ZQQu9VaKPvx4JuVLE=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Chrome 浏览器插件获取网页 window 对象(方案一)

Chrome 浏览器插件获取网页 window 对象(方案二)

一、两个文件,通过 CustomEvent 传递消息

1. 方案思路

  1. 新建两个 js 文件,index.jslucky.js
  2. content_scripts 中嵌入 lucky.js 文件和 index.js 文件
  3. index.js 中通过 window.dispatchEvent 派发自定义 custom event 消息
  4. index.js 中通过 addEventListener 监听消息
  5. lucky.js 中通过 addEventListener 监听消息,再通过 dispatchEvent 派发消息
1.1. content_scripts 嵌入 JS 文件

一定要把 lucky.js 文件放在 index.js 文件前面

content_scripts 中添加 lucky.js 的时候需要加上 "world": "MAIN" 字段

world 为枚举类型

  • ISOLATED 默认值
    • 此扩展程序所独有的执行环境
  • MAIN
    • 指定 DOM 的主域,也就是与托管页面的 JavaScript 共享的执行环境
1.2. 方案流程

流程图如下:

画板

2. 获取内容

获取 window 下的 MyBlog 字段

window.MyBlog = {juejin: 'https://juejin.cn/user/2409752520033768/posts',csdn: 'https://guoqiankun.blog.csdn.net/','chrome-blog': {netlify: 'https://gqk-extension.netlify.app/',github: 'https://18055975947.github.io/extension/'}
}

3. 实现代码

3.1. index.js
/*** index 文件发送消息到 lucky.js 文件* @param {string} type custom 类型* @param {any} data 数据*/
const indexSendMessageToLucky = async (type, data) => {window.dispatchEvent(new CustomEvent('custom-index-type', { detail: { type, data } }))return new Promise((res) => {function handleResponse(e) {const detail = e.detailif (detail.type == type) {window.removeEventListener('custom-lucky-type', handleResponse)return res(detail.data)}}window.addEventListener('custom-lucky-type', handleResponse)})
}/*** 发送消息*/
const sendMessage = () => {function getMyBolg() {return window.MyBlog}indexSendMessageToLucky('run-index-fun', {function: getMyBolg.toString()}).then((res) => {console.log('res-->', res)}).catch((e) => {console.log('e', e)})
}
/*** 初始化*/
const init = () => {// 插入 button 按钮const button = document.createElement('button')button.innerText = '获取数据'button.id = 'chrome-ext-but'document.body.appendChild(button)button.onclick = () => {sendMessage()}// 初始化获取数据sendMessage()
}// 判断 window.top 和 self 是否相等,如果不相等,则不注入
if (window.top == window.self) {init()
}
3.2. lucky.js
/*** 事件监听*/
window.addEventListener('custom-index-type', async (e) => {const { type, data } = e.detailswitch (type) {case 'run-index-fun': {const fn = new Function(`return (${data.function})(...arguments)`)const rs = await fn(...(data.args ?? []))luckySendMessageToIndex(type, rs)break}}
})/*** lucky 文件发送消息到 index.js 文件* @param {string} type custom 类型* @param {any} data 数据*/
const luckySendMessageToIndex = (type, data) => {window.dispatchEvent(new CustomEvent('custom-lucky-type', {detail: { type, data, file: 'lucky' }}))
}
3.3. manifest.json
{"manifest_version": 3,"name": "Get Winddow Object Field","version": "1.0","description": "Gets the field under window","content_scripts": [{"js": ["lucky.js"],"matches": ["http://localhost:*/*"],"run_at": "document_end","world": "MAIN"},{"js": ["index.js"],"matches": ["http://localhost:*/*"],"all_frames": true,"run_at": "document_end"}],"background": {"service_worker": "service-worker.js"},"host_permissions": ["http://localhost:*/*"],"permissions": [],"web_accessible_resources": []
}
3.4. 项目文件结构
.
├── index.html
├── index.js
├── lucky.js
├── manifest.json
└── service-worker.js
3.5. 方案效果

在控制台中选择当前插件,即可查看获取的 window 下的 MyBlog 对象

4. 动态获取数据

4.1. 点击按钮

4.2. 数据返回

5. 代码地址

  • Gitee
  • Github

四、总结

1. 文章总结

  1. 获取当前页面下的 window 对象和 document 对象不一样,需要另外的处理方式
  2. 此次提供了三种方案,核心原理都是嵌入当前页面,通过消息派发和接收来获取数据
  3. 第一种通过 postMessage 的方式更为大家熟悉,自定义 Event 相对偏一点
  4. 三种方案的代码我都上传到 gitee/github 上了

2. 代码地址

  • Gitee:https://gitee.com/gqk-chrome-extension/get-window-fields
  • Github:https://github.com/gqk-chrome-extension/get-window-fields/tree/main

引用

  • 【chrome extensions mv3通过content scripts注入/获取原网站的window数据】
  • 【CustomEvent:CustomEvent() 构造函数】
  • 【Content_script world】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/418720.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

硬盘分区、SD 卡被误格式化?格式化后恢复数据教程

硬盘分区、SD 卡、Android 手机被误格式化?别担心,奇客数据恢复内置格式恢复功能,是适合您的工具,因为如果重新格式化是误操作,无论是快速格式化、完整格式化还是驱动器报告未格式化,它都可以恢复格式化的数…

芯片解决方案--SL8541e-OpenHarmony适配方案

摘要 本文描述8541E芯片适配OpenHarmony的整体方案。 本文描述的整体方案,不止适用于8541e,也适用于该芯片厂家的其他芯片,如7863、7885,少部分子系统会略有差异。 整体方案架构 整体方案架构如下图,遵循OpenHarmo…

Android开发不支持Java,No,你选错了

Android Studio Giraffe | 2022.3.1 开始,选择Empty Activity模版,默认是Kotlin,很多同学以为Android Studio不支持Java开发了,其实Android Studio还是支持Java开发的,建议选择Empty Views Activity模版。 在Empty Vi…

AI智能分析/智慧安防EasyCVR视频汇聚平台新版本(V3.6.0)播放鉴权与播放限制时长的区别介绍

随着科技的飞速发展,视频技术已成为现代社会不可或缺的一部分,广泛应用于安防监控、娱乐传播、在线教育、电商直播等多个领域。EasyCVR视频汇聚平台作为视频技术的佼佼者,不断推陈出新,通过功能更新迭代,为用户提供更加…

如果电脑一直提示微软账号登录……

前言 今天小白接了个电脑故障问题:电脑提示微软账号登录,然后经过各种操作…… 电脑重启之后就变成了这样: 按理说,登录了微软账号之后,Windows系统要进入到桌面就必须有一个输入密码验证的过程,但这个界…

防封!数字人直播防封!铭顺科技AI数智人抖音直播防封落地方案!!

数字人直播防不防封? 数字人直播有没有流量? 数字人直播能不能落地? 这是目前所有想入局AI数字人赛道、想用数字人直播、想做数字人项目的老板们最担心、最关心的问题!但是,同行友商对此都噤若寒蝉,不敢跟…

视频安防监控LntonAIServer安防管理平台抖动检测和过亮过暗检测

随着视频监控技术的发展,视频质量成为确保监控系统有效性的重要因素。LntonAIServer通过引入抖动检测与过亮过暗检测功能,进一步提升了视频监控系统的可靠性和用户体验。这些功能可以帮助及时发现并解决视频流中的质量问题,确保视频监控系统始…

Git撤销add

git要提交版本第一步是add,就算是文件本身已经存在只是修改,也需要添加,即添加到暂存区。其中最偷懒和也保险的命令是: git add . 即添加了本地(多称工作目录)所有文件。 撤销add有以下文章: …

IPv6 Sec机制的深度解析与优势探讨

IPv6的sec机制,主要指的是IPv6协议中内置的安全机制,特别是通过IP Sec协议集来实现的。IPv6在设计之初就考虑到了安全性问题,并内置了对IP Sec的支持,这使得IPv6网络在安全性能上相比IPv4有了显著的提升。 IP Sec协议集主要由认证…

已经存在的项目如何变成git的一个repository

已经存在的项目如何被git管理 背景: 有一套代码很敏感,可能动不动就要不能正常工作(硬件开发常事),那改动一下下就要有个记录,就决定用git管理 已经有了服务里里docker里运行的gitbucket,已经有了开发用的电脑上的git客户端&…

.hmallox、.rmallox勒索病毒揭秘:如何保护你的数据免受威胁

导言 .hmallox、.rmallox勒索病毒是一种加密型勒索病毒,以其特定的加密机制和传播方式而闻名。它主要通过钓鱼邮件或恶意下载链接感染计算机系统。一旦入侵系统,它会加密受害者的文件,并要求支付赎金以恢复数据。了解 .hmallox 、.rmallox勒…

不会Excel怎么制作桑基图?用什么软件绘制比较好呢?推荐2款简单好用的图表制作工具

桑基图制作很简单,不需要任何基础一次就会! 2个桑基图制作工具,帮你一键解决问题~ 1、Dycharts 推荐指数:☆☆☆☆☆ 点击链接直达>>dycharts.com Dycharts是国内一款专业的在线图表制作工具,0代码、无门槛&…

[米联客-XILINX-H3_CZ08_7100] FPGA程序设计基础实验连载-38 LVDS Select IO高速Serdes

软件版本:VIVADO2021.1 操作系统:WIN10 64bit 硬件平台:适用 XILINX A7/K7/Z7/ZU/KU 系列 FPGA 实验平台:米联客-MLK-H3-CZ08-7100开发板 板卡获取平台:https://milianke.tmall.com/ 登录“米联客”FPGA社区 http…

龙芯+FreeRTOS+LVGL实战笔记(新)——05部署主按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇,主要的区别在于实时操作系统的不同,章节的安排和任务的推进保持一致,并对源码做了改进和优化,各位可以先到本人主页下去浏览另一专栏的博客列表(目前已撰写36篇,图1所示),再决定是否订阅。此外,也可以…

虚拟机ubuntu与主机共享文件夹

现在主机(windows)上新建一个共享文件夹 打开虚拟机 按下面操作打开共享文件夹 进入虚拟机的系统 cd /mnt/hgfs 如果报错 可以按下面的解决 挂载一下 sudo mount -t fuse.vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other 如果显示不存在这个文…

AIGC大模型智能抠图(清除背景):Sanster/IOPaint,python(2)

AIGC大模型智能抠图(清除背景):Sanster/IOPaint,python(2) 在文章(1)的基础上,尝试用大模型扣除图中的某些主要景物。 1、首先,安装插件: pip i…

Xilinx系FPGA学习笔记(五)ROM的IP核学习

系列文章目录 文章目录 系列文章目录前言ROM IP分布式ROM生成ROM配置创建COE文件 块ROM生成如何快速生成Example Design 两种ROM对比 前言 最近在学习小梅哥的xilinx型FPGA开发板,一边学习一边记录,简化整理一下笔记 ROM IP 在 Memories &Storage …

[QT] QT事件与事件重写

一.事件 事件(event)是由系统或者 Qt本身在不同的场景下发出的。当用户按下鼠标、敲下键盘,或者是窗口关闭等都会发出一个相应的事件。 一些事件在用户操作时发出(如鼠标/键盘事件); 另一些事件则是由系统自动发出(如计时器事件)。 Qt窗口中对于产生的一系列事件都…

Kotlin高阶函数与Lambda表达式及内联函数的介绍

目录 1、高阶函数1.1、什么是高阶函数?1.1.1、不带返回值的高阶函数1.1.2、带参数且带返回值的高阶函数1.1.3、与一般的函数进行比较 1.2、如何使用?1.3、高阶函数有什么作用? 2、Lambda表达式2.1、什么是Lambda表达式?2.1.1、无参…

通信工程学习:什么是PCM脉冲编码调制、DPCM差分脉冲编码调制、ADPCM自适应差分脉冲编码调制

PCM脉冲编码调制、DPCM差分脉冲编码调制、ADPCM自适应差分脉冲编码调制 PCM、DPCM、ADPCM是音频编码技术中的三种重要方式,它们在音频信号的数字化、压缩和传输中起着关键作用。以下是对这三种技术的详细解释: 一、PCM(Pulse Code Modulatio…