谷歌插件V3知识点
1.background.js与content.js与popup.js对比:
background.js
生命周期:一开始就执行，最早执行且一直执行；
作用：放置全局的、需要一直运行的代码，权限非常高几乎调用所有Chrome api,还可以发起跨域请求；
content.js
生命周期：注入页面，在刷新当前页面，或者打开新的tab页执行；
作用范围：可以修改页面DOM，js与目标页面隔壁但是css没有；
popup.js
生命周期：打开 popup 界面执行，关闭结束；
2.mainfest.json示例:
详细可以参考前端 - Chrome 浏览器插件 V3 版本 Manifest.json 文件全字段解析 - 日升_rs - SegmentFault 思否
{"name": "Chrome插件V3","version": "1.0","description": "V3版本",// Chrome Extension 版本号，3表示MV3"manifest_version": 3,// background script配置（根目录为最终build生成的插件包目录）"background": {"service_worker": "background.js" 可以跨域请求},// content script配置"content_scripts": [{应用于哪些页面地址（可以使用正则，<all_urls>表示匹配所有地址）"matches": ["<all_urls>"], 目标页面注入到目标页面的css，注意不要污染目标页面的样式"css": ["content.css"],注入到目标页面js，这个js是在沙盒里运行，与目标页面是隔离的，没有污染问题。"js": ["content.js"],代码注入的时机，可选document_start、document_end、document_idle（默认）"run_at": "document_end"}],// 申请chrome extension API权限"permissions": ["storage","declarativeContent"],// 插件涉及的外部请求地址，暂未发现影响跨域请求，猜测是用于上架商店时方便审核人员查阅"host_permissions":[],// 如果向目标页面插入图片或者js，需要在这里授权插件本地资源（以下仅为示例）。"web_accessible_resources": [{"resources": [ "/images/app.png" ],"matches": ["<all_urls>"]},{"resources": [ "insert.js" ],"matches": ["<all_urls>"]}],// popup页面配置"action": {// popup页面的路径（根目录为最终build生成的插件包目录）"default_popup": "index.html",// 浏览器插件按钮的图标"default_icon": {"16": "/images/app.png","32": "/images/app.png","48": "/images/app.png","128": "/images/app.png"},// 浏览器插件按钮hover显示的文字"default_title": "Vue CRX MV3"},// 插件图标，图省事的话，所有尺寸都用一个图也行"icons": {"16": "/images/app.png","32": "/images/app.png","48": "/images/app.png","128": "/images/app.png"}
}3.chrome.scripting.executeScript(注入js)
当前页面：
需要两个参数：一个为页面id,另一个为要执行的js；
需要在mainfest.json里面配置
"permissions": [
"activeTab","tabs","scripting"
],
第一种: chrome.scripting.executeScript({
target: { tabId: tab.id },
func: 函数名,
});第二种： chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['js/options.js'],
});
这里是设置插入当前页面
document.addEventListener('DOMContentLoaded', async function () { console.log('DOMContentLoaded');const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });await chrome.scripting.executeScript({target: { tabId: tab.id },func: text});
})function text() {console.log('改变滤镜');document.documentElement.style.filter = "hue-rotate(180deg)"
}指定页面：
//获取当前窗口所有的tab页面chrome.tabs.query({currentWindow: true}, function (tabs) {//console.log(tabs)tabs.forEach(element => {//遍历所有tab判断网址if (element.url.includes("www.baidu.com")) {chrome.tabs.update(element.id, {active: true}, function () {//向指定网址注入js代码chrome.scripting.executeScript({target: { tabId: element.id },files: ['js/options.js'],});})}});})//options.jsalert("我是被注入的js")iframe页面：
chrome.scripting.executeScript({target: {tabId: tabId, allFrames: true},files: ['script.js'],});//指定iframeID执行const frameIds = [frameId1, frameId2];chrome.scripting.executeScript({target: {tabId: tabId, frameIds: frameIds},files: ['script.js'],});4. chrome.scripting.insertCSS(注入css)
向当前页面注入css
const css = 'body { background-color: red; }';chrome.tabs.query({currentWindow: true,active: true}, function (tabs) {console.log(tabs[0].id)chrome.scripting.insertCSS({target: { tabId: tabs[0].id },css: css,});
})5.popup.js
在popop.js里面获取popup.html的元素，要放在DOMContentLoaded里面
document.addEventListener('DOMContentLoaded', async function () { const myButton = document.getElementById('changeFilterBtn'); console.log('DOMContentLoaded');if (myButton) { // 你可以在这里添加事件监听器或其他操作 myButton.addEventListener('click', async function() { 获取当前活动页面 const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });await chrome.scripting.executeScript({target: { tabId: tab.id },func: 函数});}); }}) popup.html<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>更改当前网页滤镜</title><link rel="stylesheet" href="popup.css"></head><body><h1>更改当前网页滤镜</h1><div class="box"><button id="changeFilterBtn">更改滤镜</button><button id="resetFilterBtn">去除滤镜</button></div><script src="popup.js"></script></body></html>
相关文章：
谷歌插件V3知识点
1.background.js与content.js与popup.js对比: background.js 生命周期:一开始就执行，最早执行且一直执行； 作用：放置全局的、需要一直运行的代码，权限非常高几乎调用所有Chrome api,还可以发起跨域请求； content.js 生…...
webrtc windows 编译，以及peerconnection_client
webrtc windows环境编译，主要参考webrtc官方文档，自备梯子 depot tools 安装 Install depot_tools 因为我用的是windows，这里下载bundle 的安装包，然后直接解压，最后设置到环境变量PATH。 执行gn等命令不报错&…...
geotrust企业通配符证书2990
随着时代的变化，人们获取信息的方式由报纸、书籍变为手机、电脑，因此很多企事业单位用户开始在互联网中创建网站来进行宣传，吸引客户。为了维护网站安全环境，保护客户数据，企事业单位也开始使用SSL数字证书，…...
网络安全科普：保护你的数字生活
# 网络安全科普：保护你的数字生活 ## 引言 在数字化时代，网络安全已成为每个人都必须面对的问题。从个人隐私保护到金融交易安全，网络的安全性直接关系到我们的日常生活。因此，普及网络安全知识，提高公众的网络安全意…...
Java实战：递归查找指定后缀名的文件
在日常的软件开发中，经常需要处理文件操作。假设我们有一个需求：从一个包含大量JSON文件的文件夹中提取出所有的JSON文件以进行进一步处理。本文将介绍如何利用Java编写一个高效的方法来递归查找指定后缀名的文件。 代码实现： import java.i…...
Linux 操作系统网络编程1
目录 1、网络编程 1.1 OSI 网络七层模型 1.1.1 OSI 参考模型 1.1.2 网络数据传输过程 2 传输层通信协议 2.1 TCP 2.1.1 TCP的3次握手过程 2.1.2 TCP四次挥手过程 2.2 UDP 3 网络编程的IP地址 4 端口 5 套接字 1、网络编程 1.1 OSI 网络七层模型 1.1.1 OSI 参考模型…...
成员、shared_future)
future wait_for()成员、shared_future
future wait_for()成员 wait_for()：等待其异步操作操作完成或者超出等待，用于检查异步操作的状态。wait_for()可以接受一个std::chrono::duration类型的参数，它表示等待的最大时间，会返回一个std::future_status枚举值࿰…...
C++ list介绍（迭代器失效）
一、常用接口 reverse逆置 sort排序（默认升序） 仿函数greater<int> merge合并，可以全部合并，也可以一部分合并 unique：去重（先排序，再去重） remove：删除e值&#…...
codeforces 1809C
很巧妙的构造 题目链接 题目大意 要求构造长度为 n n n的数组满足以下条件 任意 i i i， − 1000 < a [ i ] < 1000 -1000<a[i]<1000 −1000<a[i]<1000有 k k k个和为正数的子串其余子串和为负数 思路 我们发现与子数组内元素的和有关&…...
Nginx part3 创建一个https的网站
目录 HTTPS 公钥和密钥 加密解密方式： https搭建步骤 强调一下 1、准备环境 2、配置文件 3、制作证书 4、进行设置 HTTPS 啥是https，根据百度：HTTPS （全称：Hypertext Transfer Protocol Secure）&a…...
事件高级。
一、注册事件（绑定事件） 就是给元素添加事件 注册事件有两种方式：传统方式和方法监听注册方式 1 传统注册方式 方法监听注册事件 2、 addEventListener 事件监听方式 里面的事件类型是字符串，必定加引号，而且不带o…...
Vue从入门到实战Day04
一、组件的三大组成部分（结构/样式/逻辑） 1. scoped样式冲突 默认情况：写在组件中的样式会全局生效 -> 因此很容易造成多个组件之间的样式冲突问题。 1. 全局样式：默认组件中的样式会作用到全局 2. 局部样式：可以…...
Linux学习笔记:信号
信号 在Linux中什么是信号信号的产生方式硬件产生的信号软件产生的信号异常产生的信号 进程对信号的处理信号的保存信号方法更改函数signal信号处理的更改恢复默认信号忽略 信号的管理信号集 sigset_t对信号集的操作 信号的捕捉过程 在Linux中什么是信号 在 Linux 系统中&…...
C#中的隐式类型转换和显式类型转换
在C#中，类型转换分为隐式类型转换（Implicit Type Conversion）和显式类型转换（Explicit Type Conversion），也称为隐式转换和强制转换。 隐式类型转换（Implicit Type Conversion） 隐…...
linux上如何排查JVM内存过高？
在Linux上排查JVM内存过高的问题，可以采用以下几种方法： 1. **使用top命令查看进程**：通过top命令可以观察到系统中资源占用情况，包括CPU和内存。当收到内存过高的报警时，可以使用top命令来查看是哪个进程的内存使用率…...
第四届上海理工大学程序设计全国挑战赛 J.上学 题解 DFS 容斥
上学 题目描述 usst 小学里有 n 名学生，他们分别居住在 n 个地点，第 i 名学生居住在第 i 个地点，这些地点由 n−1 条双向道路连接，保证任意两个地点之间可以通过若干条双向道路抵达。学校则位于另外的第 0 个地点，第…...
word-排版文本基本格式
1、文本的基本格式：字体格式、段落格式 2、段落：word排版的基本控制单位 3、每敲一次回车，为一个段落标记，注意区分换行符和段落标记，换行符为指向下的箭头，段落标记为带拐弯的箭头，换行符&…...
目标检测YOLO实战应用案例100讲-无监督领域自适应目标检测方法研究与应用（五）
目录 多源无监督领域自适应目标检测方法 4.1研究现状及问题形成 4.2相关工作详述...
通过python实现Google的精准搜索
问题背景： 我想通过Google或者其他网站通过精准搜索确认该产品是否存在，但是即使该产品不存在Google也会返回一些相关的url链接，现在想通过python实现搜索结果的精准匹配以确认该产品是否为正确的名称【可以通过google搜索到，如果…...
Nios-II编程入门实验
文章目录 一 Verilog实现流水灯二 Nios实现流水灯2.1 创建项目2.2 SOPC添加模块2.3 SOPC输入输出连接2.4 Generate2.5 软件部分2.6 运行结果 三 Verilog实现串口3.1 代码3.2 引脚3.3 效果 四 Nios2实现串口4.1 sopc硬件设计4.2 top文件4.3 软件代码4.4 实现效果 五 参考资料六 …...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
解锁数据库简洁之道：FastAPI与SQLModel实战指南
在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...
Frozen-Flask ：将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）
cd /home 进入home盘 安装虚拟环境： 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境： virtualenv myenv 3、激活虚拟环境（激活环境可以在当前环境下安装包） source myenv/bin/activate 此时，终端…...
VSCode 没有添加Windows右键菜单
关键字：VSCode；Windows右键菜单；注册表。 文章目录 前言一、工程环境二、配置流程1.右键文件打开2.右键文件夹打开3.右键空白处打开文件夹 三、测试总结 前言 安装 VSCode 时没有注意，实际使用的时候发现 VSCode 在 Windows 菜单栏…...