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
相关文章:
Chrome扩展开发纪要
1. 开发人员模式 以Edge(Chromium)为例, 可在管理扩展页, 在左侧开发人员模式打开, 只有此项开启后才能加载未压缩的扩展, 虽然也可以打包扩展, 但是浏览器会检测, 未上线的crx包是无法被安装的. 所以不打算上架的crx只能使用 加载解压缩的扩展 安装 2. 创建扩展 2.1 建立文…...
LeetCode-第28题-找出字符串中第一个匹配项的下标
1.题目描述 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下标从 0 开始)。如果 needle 不是 haystack 的一部分,则返回 -1 。 2.样例描述 3.思路描述 可以让字符串 …...
分享90个行业PPT,总有一款适合您
分享90个行业PPT,总有一款适合您 90个行业PPT下载链接:https://pan.baidu.com/s/1bHvhk_42-IFAjNdjPPtMZw?pwd8888 提取码:8888 Python采集代码下载链接:采集代码.zip - 蓝奏云 学习知识费力气,收集整理更不易…...
【原创 附源码】Flutter海外登录--Tiktok登录最详细流程
最近接触了几个海外登录的平台,踩了很多坑,也总结了很多东西,决定记录下来给路过的兄弟坐个参考,也留着以后留着回顾。更新时间为2024年2月7日,后续集成方式可能会有变动,所以目前的集成流程仅供参考&#…...
国内chatGPT3.5升级到chatGPT4.0的教程(24年2月更新)
最新的充值方法看这里。 通过虚拟卡 WildCard 的方式来升级 GPT 4.0 最快了,大概2分钟就可以升级完成, 而且升级 GPT 4.0 价钱也不贵,虚拟卡一年10美元,GPT4 每个月也才 20美元。如果你觉得 GPT 4.0 对你可能有帮助,那就赶快来升级…...
【python量化交易】qteasy使用教程01 - 安装方法及初始化配置
qteasy教程1 - 安装方法及初始化配置 qteasy教程1 - 安装方法及初始配置qteasy安装前的准备工作1, 创建安装环境2,安装MySQL数据库 (可选)安装pymysql 3,创建tushare账号并获取API token (可选)4,安装TA-lib (可选)WindowsMac OSL…...
UML 2.5图形库
UML 2.5图形库 drawio是一款强大的图表绘制软件,支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用,则直接输入网址drawon.cn或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能,并实现了云端存储&#…...
分享springboot框架的一个开源的本地开发部署教程(若依开源项目开发部署过程分享持续更新二开宝藏项目PostgresSQL数据库版)
1首先介绍下若依项目: 若依是一个基于Spring Boot和Spring Cloud技术栈开发的多租户权限管理系统。该开源项目提供了一套完整的权限管理解决方案,包括用户管理、角色管理、菜单管理、部门管理、岗位管理等功能。 若依项目采用前后端分离的架构…...
打卡今天学习 Linux
过年了,祝大家过年快乐 在今天的学习中,我们涉及了一些关键的 Linux 系统管理知识点,包括 systemctl、IP 地址配置、域名解析、映射的创建、软链接等。让我们简要回顾一下这些主题。 1. systemctl systemctl 是一个强大的 Linux 系统管理工…...
单片机精进之路-3流水灯
P1代表单片机的P1口的8个io的寄存器,使用_crol_函数:将 k进行1位左位移,并将值以unsigned char类型返回,再将K的值赋给P1,这样就点亮了P1口对应的IO为低电平的led灯。 //flow light and beep #include <reg51.h>…...
c# File.WriteAllLines 和 File.WriteAllText
File.WriteAllLines 和 File.WriteAllText 都是 C# 中用于写入文本文件的方法,但它们有一些区别。 1. File.WriteAllLines 方法: File.WriteAllLines 方法用于将字符串数组的内容按行写入文本文件。每个数组元素都被写入文件的一行,且方法会…...
linux系统定时任务管理
crontab使用 一、crontab简介 crontab 这个指令所设置的工作将会循环的一直进行下去!可循环的时间为分钟、小时、每周、每月或每年等。crontab 除了可以使用指令执行外,亦可编辑 /etc/crontab 来支持。 至于让 crontab 可以生效的服务则是 crond 这个服…...
mysql的慢sql优化
为什么要优化慢sql ? 慢sql会长时间占用 数据库连接数,如果项目中有大量的慢sql,那么可用的数据库连接数就会变少,进而会影响业务。 慢sql优化 优化慢sql,最常见的就是添加索引。查询语句中不要使用select *尽量减少…...
排序算法---插入排序
原创不易,转载请注明出处。欢迎点赞收藏~ 插入排序是一种简单直观的排序算法,它的基本思想是将待排序的元素分为已排序和未排序两部分,每次从未排序部分中选择一个元素插入到已排序部分的合适位置,直到所有元素都插入到已排序部分…...
迷你世界勒索病毒,你的文件被删了吗?
前言 笔者在某恶意软件沙箱平台分析样本的时候,发现了一款比较有意思的勒索病毒MiniWorld迷你世界勒索病毒,它的解密界面与此前的WannaCry勒索病毒的界面相似,应该是作者仿冒的WannaCry的UI,如下所示: 这款勒索病毒既…...
QT styleSheet——控件设置样式表
QT开发中,需要设置多种多样的控件表现形式,QT实现的styleSheet能够满足多种多样的场景,这里简单的记录下一些我常用的 设置透明背景,鼠标悬浮时,设置背景色: pushButton->setStyleSheet("QPushBu…...
Linux学习
1 Linux的目录结构介绍 bin存放常用的命令etc存放配置文件bootlinux启动的文件home存放用户lib存放动态库,给应用程序使用lostfound一般是空的,但系统异常关机会产生文件media自动挂载,如u盘,光盘mnt手动挂载,一般自己…...
MFC研发自验用例编写应注意哪些关键测试点
MFC(Microsoft Foundation Classes)是一个用于开发Windows应用程序的C类库。在MFC应用程序的研发过程中,自验用例(自我验证测试用例)的编写是非常重要的一环,它有助于确保代码的质量、稳定性和功能正确性。…...
ChatGPT升级版本GPT-4V(ision)支持多模态语音和图像
ChatGPT升级指南:迎接GPT-4V(ision)的全新多模态时代 ChatGPT最新升级引入了GPT-4V(ision),这是一个突破性的多模态版本,支持语音和图像输入。现在,用户可以与ChatGPT进行更加丰富和互动的对话。以下是您升级到GPT-4V(ision)所需…...
机器人搬砖 - 华为OD统一考试
OD统一考试(C卷) 分值: 100分 题解: Java / Python / C 题目描述 机器人搬砖,一共有N堆砖存放在N个不同的仓库中,第 i 堆中有 bricks[i] 块砖头,要求在8小时内搬完。 机器人每小时能搬砖的数量…...
10分钟快速入门正则表达式
在力扣上看了一本付费书籍,终于让我入门了正则表达事... 问题: "^1[3-9]\\d{9}$" 是啥意思 读完本篇小笔记,你就知道,啥是"^1[3-9]\\d{9}$" 这个是啥意思了。 首先,正则表达式,这个名…...
【C++】C++的简要介绍
简单不先于复杂,而是在复杂之后。 文章目录 1. 什么是C2. C的发展史3. C的重要性3.1 语言的使用广泛度3.2 在工作领域3.3 在校招领域3.3.1 岗位需求3.3.2 笔试题 3.3.3 面试题 4. 如何学习C4.1 别人怎么学? 1. 什么是C C语言是结构化和模块化的语言&…...
Golang数据库编程详解 | 深入浅出Go语言原生数据库编程
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 Golang学习专栏:https://blog.csdn.net/qq_35716689/category_12575301.html 前言 对数据库…...
《游戏引擎架构》 -- 学习2
声明,定义,以及链接规范 翻译单元 声明与定义 链接规范 C/C 内存布局 可执行映像 程序堆栈 动态分配的堆 对象的内存布局 kilobyte 和 kibibyte 流水线缓存以及优化 未完待续。。。...
#Js篇:js里面递归的理解
定义: 递归是一种编程技术,它是指一个函数在其定义内部调用自身的过程。 特点: 一个问题可以分解为更小的问题用同样的方法解决;分解后的子问题求解方式一样,不同的是数据规模变小;存在递归终止条件 作…...
Qt博客目录
一.Qt安装配置和创建项目 Qt所有版本下载地址 Qt安装配置教程windows版(包括:Qt5.8.0版本,Qt5.12,Qt5.14版本下载安装教程)(亲测可行) QT从入门到入土(一)——Qt5.14.…...
【C++】初识模板:函数模板和类模板
目录 一、模板函数 1、函数模板的概念 2、函数模板的格式 3、函数模板的原理 4、函数模板实例化 5、 模板参数的匹配原则 二、类模板 1 、类模板的定义格式 2 、类模板的实例化 3、模板类示例 一、模板函数 1、函数模板的概念 函数模板代表了一个函数家族,…...
记录Dynamo每个节点的运行时间
不知道小伙伴们在写Dynamo程序的时候,有没有遇到这种问题→程序运行很慢,但是却不知道该优化哪些节点,可以提高程序运行的速度。 今天呢,就给大家分享一个节点包→TuneUp,在节点包管理器里就可以下载,安装…...
探索设计模式的魅力:代理模式揭秘-软件世界的“幕后黑手”
设计模式专栏:http://t.csdnimg.cn/U54zu 目录 引言 一、魔法世界 1.1 定义与核心思想 1.2 静态代理 1.3 动态代理 1.4 虚拟代理 1.5 代理模式结构图 1.6 实例展示如何工作(场景案例) 不使用模式实现 有何问题 使用模式重构示例 二、…...
AD9361多片同步设计方法
本文基于ZC706FMCOMMS5的平台,介绍了多片AD9361同步的方法。并将该设计移植到自行设计的ZYNQ70354片AD9361(实现8路同步收发)的电路板上。本设计采用纯逻辑的方式,仅使用了ZYNQ芯片的PL部分。 9361多芯片同步主要包括基带同步和射频同步两大块任务。其中…...
2024/2/7 图的基础知识
图的存储 B3643 图的存储 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路:mp[n][n]用来存邻接矩阵,二维vector用来存每个点连的点 完整代码: #include <bits/stdc.h> #define int long long const int N 1e5 10; int n, m; …...
1897_野火FreeRTOS教程阅读笔记_链表
1897_野火FreeRTOS教程阅读笔记_链表 全部学习汇总: g_FreeRTOS: FreeRTOS学习笔记 (gitee.com) 之前我自己通过直接啃代码的方式对FreeRTOS也算是有了一点理解了,这次趁着些许闲暇翻看一下野火的FreeRTOS教程。一者算是一种复习;二者可能对自…...
CTFshow web(php命令执行 45-49)
基础知识: 1.绕过cat使用: tac more less head tac tail nl od(二进制查看) vi vim sort uniq rev 2.绕过空格用: %09 <> ${IFS} $IFS$ {cat,fl*} %20 注: %09 ##(Tab) %20 ##(spa…...
飞天使-linux操作的一些技巧与知识点8-zabbix6.0 容器搭建
文章目录 安装docker安装步骤mysql下载镜像安装zabbix 使用zabbix非host模式创建 测试效果 安装docker 1. 配置官方 yum 源$ sudo yum install -y yum-utils $ sudo yum-config-manager \--add-repo \https://download.docker.com/linux/centos/docker-ce.repo2. 安装 Docker$ …...
51 单片机入门 400 例
1 IO输出 点亮1个LED灯方法1 2 IO输出 点亮1个LED灯方法2 3 IO输出 点亮多个LED灯方法1 4 IO输出 点亮多个LED灯方法2 5 闪烁1个LED 6 不同频率闪烁1个LED灯 7 不同频率闪烁多个LED灯…...
贪心算法的应用
考虑最大利润 输入:种类数、需求量、各种类的库存量、各种类的总价 输出:最大利润 #include <iostream> #include <algorithm>//调用sort排序 using namespace std; struct mooncake{double store;double price;double tprice; }cake[1000]…...
CentOS基于volatility2的内存取证实验
CentOS,Redhat和Fedora 都是Red Hat体系,采用yum管理器,不同于Debian、Ubuntu作为Debian体系使用apt 本文以CentOS为例,采用avml制作内存镜像,并利用volatility官方所给工具制作profile符号文件,进行简单的…...
HLS 三角函数报错:undefined reference to ‘cordic_apfixed::circ_table_arctan_128‘
最近在通过HLS实现一些算法,其中用到了hls::cos函数,写完代码编译报错: ../Vitis_HLS/hls_cordic_apfixed.h:229: undefined reference to cordic_apfixed::circ_table_arctan_128 build/xf_computePhaseMap_accel.o: In function void cord…...
【汇编】简单的linux汇编语言程序
一、Linux系统汇编语言 Linux系统上的汇编语言可以使用不同的语法风格,主要包括Intel语法和AT&T语法。这两种语法有各自的特点和风格区别,尽管它们表示的底层机器指令相同。下面分别对两种语法进行简要说明: Intel语法 Intel语法是由I…...
Fink CDC数据同步(四)Mysql数据同步到Kafka
依赖项 将下列依赖包放在flink/lib flink-sql-connector-kafka-1.16.2 创建映射表 创建MySQL映射表 CREATE TABLE if not exists mysql_user (id int,name STRING,birth STRING,gender STRING,PRIMARY KEY (id) NOT ENFORCED ) WITH (connector mysql-cdc,hostn…...
Adb offline疑难杂症解决方案大全记录
无线/有线Adb offline依次尝试下面步骤: adb kill-server && adb start-server adb reconnect offline 多次 adb tcpip 5555 后重试 检查有线端口5037、无线5555占用,排除改名的adb或其他应用占用 换USB线和USB口拔插、确保同一WiFi下࿰…...
详述FlinkSql Join操作
FlinkSql 的 Join Flink 官网将其分为了 Joins 和 Window Joins两个大类,其中里面又分了很多 Join 方式 参考文档: Joins | Apache Flink Window JOIN | Apache Flink Joins 官网介绍共有6种方式: Regular Join:流与流的 Joi…...
Ajax+JSON学习二
AjaxJSON学习二 文章目录 前言三、前后端数据交互3.1. GET请求3.2. POST请求3.3. jQuery 中的 Ajax3.4. Ajax 的替代品:fetch3.5. 小结 四、JSON4.1. JSON简介4.2. JSON 语法规则4.3. JSON的解析和序列化 总结 前言 三、前后端数据交互 3.1. GET请求 GET 请求一般用…...
STM32单片机的基本原理与应用(六)
串口测试实验 基本原理 在串口实验中,是通过mini_USB线搭建终端与电脑端(也可称终端,为做区分称电脑端)的“桥梁”,电脑端的串口调试助手通过mini_USB线向终端发送信息,由CH340芯片将USB接口进行转换&…...
《MySQL 简易速速上手小册》第4章:数据安全性管理(2024 最新版)
文章目录 4.1 用户认证和权限控制4.1.1 基础知识4.1.2 重点案例:使用 Python 管理 MySQL 用户权限4.1.3 拓展案例 4.2 防止 SQL 注入和其他安全威胁4.2.1 基础知识4.2.2 重点案例:使用 Python 和 MySQL 进行安全的数据查询4.2.3 拓展案例 4.3 数据加密和…...
VUE学习之路——列表渲染
<p v-for"item in items">{{ item }}</p>使用v-for进行列表的渲染。 这仅仅是一个简单的demo,使用v-for可以用来遍历数组和对象,具体如下: 注意:遍历数组或对象的时候,()…...
CentOS 安装 redis 7.2
nginx官网 https://redis.io/download/ 把鼠标放到这里,复制下载地址 在服务器找个文件夹执行命令 wget https://github.com/redis/redis/archive/7.2.4.tar.gz tar -zxvf 7.2.4.tar.gz make make install 看到这几行就说明安装成功了 不放心的话再查看下b…...
运维自动化bingo前端
项目目录结构介绍 项目创建完成之后,我们会看到bingo_web项目其实是一个文件夹,我们进入到文件夹内部就会发现一些目录和文件,我们简单回顾一下里面的部分核心目录与文件。 ├─node_modules/ # node的包目录,项目运行的依赖包…...
Project2013下载安装教程,保姆级教程,附安装包和工具
前言 Project是一款项目管理软件,不仅可以快速、准确地创建项目计划,而且可以帮助项目经理实现项目进度、成本的控制、分析和预测,使项目工期大大缩短,资源得到有效利用,提高经济效益。软件设计目的在于协助专案经理发…...
【机器学习与自然语言处理】预训练 Pre-Training 各种经典方法的概念汇总
【机器学习与自然语言处理】预训练 Pre-Training 各种经典方法的概念汇总 前言请看此正文预训练 Pre-Training无监督学习 unsupervised learning概念:标签PCA 主成分分析(Principal Component Analysis)降维算法LSA 潜在语义分析(…...