Chrome扩展开发纪要

1. 开发人员模式

以Edge(Chromium)为例, 可在管理扩展页, 在左侧开发人员模式打开, 只有此项开启后才能加载未压缩的扩展, 虽然也可以打包扩展, 但是浏览器会检测, 未上线的crx包是无法被安装的. 所以不打算上架的crx只能使用 加载解压缩的扩展 安装

2. 创建扩展

2.1 建立文件夹mycrx

2.2 创建manifest.json

{"manifest_version": 3, // 扩展版本, 现在只能用3"name": "MyCrx", // 扩展名称"description": "这是我的扩展描述", // 扩展描述"version": "1.0.0", // 版本号"action": { // popup配置"default_title": "TkImPlus","default_icon": "img/logo.png","default_popup": "popup.html", // 指定popup页面},"author": "AriFe.Liu", // 作者信息, 俗称免费广告位"background":{ // background.js配置"type":"module", // 该配置用于使其支持使用import动态导入文件"service_worker":"service.js" // 指定background.js文件},"permissions":[ // 扩展权限, 具体需要使用哪些需要根据自身需求查阅文档"tabs","storage","webRequest","declarativeNetRequest","cookies","notifications"],"host_permissions":[ // 这个忘了是做什么用的了"*://*/*"],"content_scripts": [ // content.js配置{"matches":["*://affiliate-us.tiktok.com/seller/im?*"], // 这里指仅在匹配到该网址时才生效"js": ["content.js"], // 指定content.js文件"run_at": "document_idle", // 执行时机"css": ["content.css"] // 附加的css文件}]}

3. 核心文件说明

3.1 content.js

这个文件是在匹配到指定url时, 会被插入到对应页面中, 在该文件内, 可操作被插入页面的DOM, 也就是说, 如果需要修改页面的样式, 删除某些元素, 插入新的元素, 都可在本文件中实现, 但是它并不能操作页面的JS. 但是可以调用扩展的chrome.runtime, chrome.extension等API.
也就是说, 页面1原生加载的JS1, 这里的content.js就是JS2, 虽然JS都可以操作页面1, 但是JS2和JS1不互通, 也就意味着, 你在content.js里面写的方法等, 通过给页面中的元素附加事件等是无法触发的.

###3.2 background.js
这个文件是在浏览器启动后直接运行在后台的, 它不可操作页面dom, 但是它可以发起跨域请求, 可以调用chrome的更多的api, 可以理解为content是前端, 而background是后端, 比如前端需要跨域调用接口等, 可以直接告知background来进行处理获取后返回.

3.3 popup

这个是点击扩展图标时弹出的页面, 焦点移开就会关闭, 一般用来做些临时的交互, 这个页面大小会自适应, 但是最大好像宽度只有750px, 高度应该只有550px, 所以最大只有这么大的话, 可以自己考虑自己的扩展有什么是需要放在这里用的

3.4 inject.js

这个文件是为了弥补content.js无法操作页面JS而衍生出来的, 这个就和页面中的普通JS一样, 页面原本附带的JS能做什么它也能做什么. 而且也不能调用扩展的API

3.5 other

除了这些还有一些其它的, 但我做过的几个实际上并没有用到过, 一般来说仅靠content和background就可以完成绝大部分操作. content不能执行的操作,例如跨域等, 就发消息给background来操作, 然后监听后台发来的消息再进行下一步处理

4. 通信说明

短链接
在content中, chrome.runtime.sendMessage即可发送消息给background
在background中, chrome.runtime.onMessage.addListener((data,sender,sendResponse)=>{})即可接收并发送响应. 但在实际开发中, 我发现在接受消息时如果处理事件耗时过长(比如此时执行了fetch等), 则content就会收不到消息, 报错提示大意是说,在发送消息给指定端口时, 这个端口已经被关闭了. 也有可能是因为异步操作等原因, 我处理的有问题, 但实际测试了很多次没找到什么办法解决.所以引出了我使用长连接的案例

长链接
在content中, chrome.runtime.connect即可发起长连接请求, 返回port, 再使用port.postMessage可发送消息, 使用port.onMessage.addListener监听消息
在background中, chrome.runtime.onConnect.addListener用来监听连接请求, 使用方法也挺简单, 具体可以看下方参考资料
在实际使用中我发现, 长连接好像是会自动断开的, 查询官方文档, 意思大概是说30秒没有交互后, 这个连接就会被休眠. 官方建议是自行处理这些异常的发生, 同时建议使用chrome.stroge来存储信息而不是使用全局变量

在很多业务中, 使用content和background,搭配上通信即可实现绝大部分需求

5. 相关资料

【干货】Chrome插件(扩展)开发全攻略 - 我是小茗同学 - 博客园
API 参考  |  Chrome for Developers
扩展程序  |  Extensions  |  Chrome for Developers

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

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

相关文章

【计算机网络】物理层概述|通信基础|奈氏准则|香农定理|信道复用技术

目录 一、思维导图 二、 物理层概述 1.物理层概述 2.四大特性(巧记"械气功程") 三、通信基础 1.数据通信基础 2.趁热打铁☞习题训练 3.信号の变身:编码与调制 4.极限数据传输率 5.趁热打铁☞习题训练 6.信道复用技术 推荐 前些天发…

服务器端会话技术-Session

一、Session 1.1 概述和快速入门 概述:Session 是服务器端会话技术,在一次会话的多次请求间共享数据,将数据保存在服务器端的对象中 快速入门 获取 HttpSession 对象使用 HttpSession 对象 常用方法 方法作用HttpSession request.getSe…

图像处理常用算法介绍

此篇简单回顾下图像处理领域常用到的一些算法,这边只对每个知识点重要的点做一些记录,便于快速的知其形,会其意。 一. SIFT(Scale-Invariant feature transform)特征 重点是了解DOG(Difference of Gaussian)高斯差分图像是如何生…

ubuntu离线安装k8s

目录 一、前期准备 二、安装前配置 三、安装docker 四、安装cri-dockerd 五、部署k8s master节点 六、整合kubectl与cri-dockerd 七、网络等插件安装 八、常见问题及解决方法 一、前期准备 ①ubuntu系统 本地已安装ubuntu系统,lsb_release -a命令查看版本信…

2024网络安全学习路线,最全保姆级教程,学完直接拿捏!

关键词: 网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线 首先咱们聊聊,学习网络安全方向通常会有哪些问题 前排提示:文末有CSDN独家网络安全资料包! 1、打基础时间太长 学基础花费很长时间,光语言都…

Windows10安装PCL1.14.0及点云配准

一、下载visual studio2022 下载网址:Visual Studio: 面向软件开发人员和 Teams 的 IDE 和代码编辑器 (microsoft.com) 安装的时候选择"使用C的桌面开发“,同时可以修改文件路径,可以放在D盘。修改文件路径的时候,共享组件、…

Open CASCADE学习|拉伸

目录 1、沿方向拉伸 2、沿路径拉伸 3、变形拉伸 1、沿方向拉伸 #include <Geom_CylindricalSurface.hxx> #include <gp_Ax3.hxx> #include <GeomAPI_Interpolate.hxx> #include <BRepAdaptor_Curve.hxx> #include <BRepBuilderAPI_MakeEdge.hxx&…

追觅发布多款旗舰新品,双机械臂扫地机器人X40领衔登场

2月2日&#xff0c;追觅科技全球首创仿生“双”机械臂新品发布会在苏州举行。会上&#xff0c;追觅科技中国区总裁郭人杰分享了追觅科技全球化发展的业绩成果。郭人杰称&#xff0c;2019-2023年&#xff0c;追觅科技5年复合年增长率超过100%&#xff0c;增速领跑智能清洁行业&a…

LeetCode、746. 使用最小花费爬楼梯【简单,动态规划 线性DP】

文章目录 前言LeetCode、746. 使用最小花费爬楼梯【简单&#xff0c;动态规划 线性DP】题目与分类思路 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域。…

C语言——教师信息管理系统

1.教师信息添加.h void InputTeacher() {int c 0;system("cls");printf("\t\t*************************************************\n");printf("\t\t******** 欢迎来到教师信息添加系统 **********\n");printf("\t\t***************…

python的进程,线程、协程

python进程的实现 #coding:utf-8 from multiprocessing import Process import timedef run(name):print(%s is running % name)time.sleep(3)print(%s finished his run % name)if __name__ __main__:p Process(targetrun, args(XWenXiang,)) # 创建一个进程对象p.start()…

Luogu P3388 【模板】割点(割顶) 题解 Tarjan/割点

题目链接&#xff1a;Luogu P3388 【模板】割点&#xff08;割顶&#xff09; 题目描述&#xff1a; 给定一张无向图&#xff0c;输出割点个数以及割点编号。 割点的定义&#xff1a;删除一个点及其连接的边后&#xff0c;若能使图的联通块数量增加&#xff0c;那么被删除的这个…

怎么在bash shell中操作复杂json对象

怎么在bash shell中操作复杂json对象 在bash shell中操作复杂JSON对象&#xff0c;jq可以帮助我们在bash环境下轻松地处理这类数据&#xff0c;本文将详细介绍如何使用jq在bash中操作复杂的JSON对象。 jq是一个轻量级且灵活的命令行JSON处理器&#xff0c;它允许你以非常高效的…

学习数据结构和算法的第3天

常数循环的复杂度 计算Func4的时间复杂度 voidFunc4(int N) { int count 0; for (int k 0; k < 100; k) { count; } printf("%d\n", count); }O&#xff08;1&#xff09; 不是代表算法运行一次&#xff0c;是常数次 strchar的时间复杂度 #include<stdi…

k8s版本升级到1.24.x

每个版本升级都有对应的文档,以1.23升级到1.24为例。 1.24.6版本后,k8s不再依赖于docker。需要先切换到使用containerd。 可以查看栏目的k8s安装文档。 确定要升级到哪个版本 使用操作系统的包管理器找到最新的补丁版本 Kubernetes 1.24: yum list --showduplicates kub…

Redis(十二)Bigkey

文章目录 游标案例生成100万测试数据key生产上限制keys */flushdb/flushall等危险命令不使用keys *&#xff1a;scan Biigkey案例多大算大发现bigkey渐进式删除生产调优示例问题 游标案例 生成100万测试数据key shell: for((i1;i<100*10000;i)); do echo "set k$i v…

Nicn的刷题日常之调整奇数偶数顺序

目录 1.题目描述 2.解题思路 3.解题 1.题目描述 输入一个整数数组&#xff0c;实现一个函数&#xff0c; 来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分&#xff0c; 所有偶数位于数组的后半部分。 2.解题思路 1. 给定两个下标left和right&#xff…

编程笔记 html5cssjs 073 JavaScript Object数据类型

编程笔记 html5&css&js 073 JavaScript Object数据类型 一、创建 Object二、Object 类型的属性与方法三、示例四、参考小结 JavaScript 中的 Object 数据类型是该语言中最复杂也最灵活的数据类型之一&#xff0c;它是其他所有内置对象和用户自定义对象的基础。在 JavaS…

网课:机器翻译——牛客(题解)

题目描述 小晨的电脑上安装了一个机器翻译软件&#xff0c;他经常用这个软件来翻译英语文章。 这个翻译软件的原理很简单&#xff0c;它只是从头到尾&#xff0c;依次将每个英文单词用对应的中文含义来替换。对于每个英文单词&#xff0c;软件会先在内存中查找这个单词的中文含…

手拉手spring-boot-starter-mail实现发送QQ邮箱

技术栈 springbootmybatis-plusmysql 软件 版本 IDEA IntelliJ IDEA 2022.2.1 JDK 17 Spring Boot 3.1 mybatis-plus 3.5 spring-boot-starter-mail Springboot版本 spring boot对mail的封装支持非常好&#xff0c;方便&#xff0c;几行代码就可以把邮件集成进来…