首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

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

编程知识
2024年09月05日 09:11

前言

最近有个需求,是在浏览器插件中获取 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. 方案流程

流程图如下:

image

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.detail
      if (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.detail
  switch (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 对象

image

4. 动态获取数据

4.1. 点击按钮

image

4.2. 数据返回

image

5. 代码地址

四、总结

1. 文章总结

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

2. 代码地址

引用

From:https://www.cnblogs.com/risheng/p/18397815
本文地址: http://shuzixingkong.net/article/1752
0评论
提交 加载更多评论
其他文章 神经网络之卷积篇:详解卷积神经网络示例(Convolutional neural network example)
详解卷积神经网络示例 假设,有一张大小为32×32×3的输入图片,这是一张RGB模式的图片,想做手写体数字识别。32×32×3的RGB图片中含有某个数字,比如7,想识别它是从0-9这10个数字中的哪一个,构建一个神经网络来实现这个功能。 用的这个网络模型和经典
神经网络之卷积篇:详解卷积神经网络示例(Convolutional neural network example) 神经网络之卷积篇:详解卷积神经网络示例(Convolutional neural network example) 神经网络之卷积篇:详解卷积神经网络示例(Convolutional neural network example)
CamoTeacher:玩转半监督伪装物体检测,双一致性动态调整样本权重 | ECCV 2024
论文提出了第一个端到端的半监督伪装目标检测模型CamoTeacher。为了解决半监督伪装目标检测中伪标签中存在的大量噪声问题,包括局部噪声和全局噪声,引入了一种名为双旋转一致性学习(DRCL)的新方法,包括像素级一致性学习(PCL)和实例级一致性学习(ICL)。DRCL帮助模型缓解噪音问题,有效利用
CamoTeacher:玩转半监督伪装物体检测,双一致性动态调整样本权重 | ECCV 2024 CamoTeacher:玩转半监督伪装物体检测,双一致性动态调整样本权重 | ECCV 2024 CamoTeacher:玩转半监督伪装物体检测,双一致性动态调整样本权重 | ECCV 2024
13 Python面向对象编程:装饰器
本篇是 Python 系列教程第 13 篇,更多内容敬请访问我的 Python 合集 Python 装饰器是一种强大的工具,用于修改或增强函数或方法的行为,而无需更改其源代码。装饰器本质上是一个接收函数作为参数的函数,并返回一个新的函数。装饰器的用途包括日志记录、性能测试、事务处理、缓存、权限校验等
单元测试的入门实践与应用
单元测试在软件开发中扮演着至关重要的角色。它不仅确保了每个最小可测试单元的功能正确性,也为系统的整体稳定性和可维护性提供了坚实的基础。如同生产代码,测试代码亦需重构。随着项目的发展,测试可能会变得冗长或过时。应定期审查与重构测试代码,以维持其效率和相关性。
.NET 8 + WPF 企业级工作流系统
前言 推荐一款基于.NET 8、WPF、Prism.DryIoc、MVVM设计模式、Blazor以及MySQL数据库构建的企业级工作流系统的WPF客户端框架-AIStudio.Wpf.AClient 6.0。 项目介绍 框架采用了 Prism 框架来实现 MVVM 模式,不仅简化了 MVVM 的典型
.NET 8 + WPF 企业级工作流系统 .NET 8 + WPF 企业级工作流系统 .NET 8 + WPF 企业级工作流系统
在 SQLAlchemy 中对数据异步处理的时候,获得关联集合的处理方式
我们在定义SQLAlchemy对象模型的关系的时候,用到了relationship 来标识关系,其中 lazy 的参数有多种不同的加载策略,本篇随笔介绍它们之间的关系,以及在异步处理中的一些代码案例。
火山引擎VeDI赋能小城酒店业,助力“流量”向“留量”转化
对小城酒店业而言,市场红利期的机遇从天而降。在此背景下,争取以优质服务打动游客、将短暂“流量”化为“留量”,才是其真正实现长足发展的关键一步。而火山引擎数智平台VeDI,或许可以成为小城酒店实现进一步智能升级的助力点。
火山引擎VeDI赋能小城酒店业,助力“流量”向“留量”转化
WebShell流量特征检测_哥斯拉篇
80后用菜刀,90后用蚁剑,95后用冰蝎和哥斯拉,以phpshell连接为例,本文主要是对这四款经典的webshell管理工具进行流量分析和检测。 什么是一句话木马? 1、定义 顾名思义就是执行恶意指令的木马,通过技术手段上传到指定服务器并可以正常访问,将我们需要服务器执行的命令上传并执行 2、特点
WebShell流量特征检测_哥斯拉篇 WebShell流量特征检测_哥斯拉篇 WebShell流量特征检测_哥斯拉篇