当前位置： 首页 > news >正文

谷歌插件V3知识点

news 2026/3/27 12:32:05
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 生命周期:一开始就执行&#xff0c;最早执行且一直执行&#xff1b; 作用&#xff1a;放置全局的、需要一直运行的代码&#xff0c;权限非常高几乎调用所有Chrome api,还可以发起跨域请求&#xff1b; content.js 生…...

编程日记 2024/5/12 18:10:02

webrtc windows 编译，以及peerconnection_client

webrtc windows环境编译&#xff0c;主要参考webrtc官方文档&#xff0c;自备梯子 depot tools 安装 Install depot_tools 因为我用的是windows&#xff0c;这里下载bundle 的安装包&#xff0c;然后直接解压&#xff0c;最后设置到环境变量PATH。 执行gn等命令不报错&…...

编程日记 2024/5/12 18:09:00

geotrust企业通配符证书2990

随着时代的变化&#xff0c;人们获取信息的方式由报纸、书籍变为手机、电脑&#xff0c;因此很多企事业单位用户开始在互联网中创建网站来进行宣传&#xff0c;吸引客户。为了维护网站安全环境&#xff0c;保护客户数据&#xff0c;企事业单位也开始使用SSL数字证书&#xff0c…...

编程日记 2024/5/12 18:07:59

网络安全科普：保护你的数字生活

# 网络安全科普&#xff1a;保护你的数字生活 ## 引言 在数字化时代&#xff0c;网络安全已成为每个人都必须面对的问题。从个人隐私保护到金融交易安全&#xff0c;网络的安全性直接关系到我们的日常生活。因此&#xff0c;普及网络安全知识&#xff0c;提高公众的网络安全意…...

编程日记 2024/5/12 18:06:57

Java实战：递归查找指定后缀名的文件

在日常的软件开发中&#xff0c;经常需要处理文件操作。假设我们有一个需求&#xff1a;从一个包含大量JSON文件的文件夹中提取出所有的JSON文件以进行进一步处理。本文将介绍如何利用Java编写一个高效的方法来递归查找指定后缀名的文件。 代码实现&#xff1a; import java.i…...

编程日记 2024/5/12 18:04:55

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 参考模型…...

编程日记 2024/5/12 18:03:54

future wait_for()成员、shared_future

future wait_for()成员 wait_for()&#xff1a;等待其异步操作操作完成或者超出等待&#xff0c;用于检查异步操作的状态。wait_for()可以接受一个std::chrono::duration类型的参数&#xff0c;它表示等待的最大时间&#xff0c;会返回一个std::future_status枚举值&#xff0…...

编程日记 2024/5/12 18:02:52

C++ list介绍（迭代器失效）

一、常用接口 reverse逆置 sort排序&#xff08;默认升序&#xff09; 仿函数greater<int> merge合并&#xff0c;可以全部合并&#xff0c;也可以一部分合并 unique&#xff1a;去重&#xff08;先排序&#xff0c;再去重&#xff09; remove&#xff1a;删除e值&#…...

编程日记 2024/5/12 18:01:50

codeforces 1809C

很巧妙的构造 题目链接 题目大意 要求构造长度为 n n n的数组满足以下条件 任意 i i i&#xff0c; − 1000 < a [ i ] < 1000 -1000<a[i]<1000 −1000<a[i]<1000有 k k k个和为正数的子串其余子串和为负数 思路 我们发现与子数组内元素的和有关&…...

编程日记 2024/5/12 18:00:49

Nginx part3 创建一个https的网站

目录 HTTPS 公钥和密钥 加密解密方式&#xff1a; https搭建步骤 强调一下 1、准备环境 2、配置文件 3、制作证书 4、进行设置 HTTPS 啥是https&#xff0c;根据百度&#xff1a;HTTPS &#xff08;全称&#xff1a;Hypertext Transfer Protocol Secure&#xff09;&a…...

编程日记 2024/5/12 17:56:45

事件高级。

一、注册事件&#xff08;绑定事件&#xff09; 就是给元素添加事件 注册事件有两种方式&#xff1a;传统方式和方法监听注册方式 1 传统注册方式 方法监听注册事件 2、 addEventListener 事件监听方式 里面的事件类型是字符串&#xff0c;必定加引号&#xff0c;而且不带o…...

编程日记 2024/5/12 17:55:41

Vue从入门到实战Day04

一、组件的三大组成部分&#xff08;结构/样式/逻辑&#xff09; 1. scoped样式冲突 默认情况&#xff1a;写在组件中的样式会全局生效 -> 因此很容易造成多个组件之间的样式冲突问题。 1. 全局样式&#xff1a;默认组件中的样式会作用到全局 2. 局部样式&#xff1a;可以…...

编程日记 2024/5/12 17:53:39

Linux学习笔记:信号

信号 在Linux中什么是信号信号的产生方式硬件产生的信号软件产生的信号异常产生的信号 进程对信号的处理信号的保存信号方法更改函数signal信号处理的更改恢复默认信号忽略 信号的管理信号集 sigset_t对信号集的操作 信号的捕捉过程 在Linux中什么是信号 在 Linux 系统中&…...

编程日记 2024/5/12 17:52:38

C#中的隐式类型转换和显式类型转换

在C#中&#xff0c;类型转换分为隐式类型转换&#xff08;Implicit Type Conversion&#xff09;和显式类型转换&#xff08;Explicit Type Conversion&#xff09;&#xff0c;也称为隐式转换和强制转换。 隐式类型转换&#xff08;Implicit Type Conversion&#xff09; 隐…...

编程日记 2024/5/12 17:50:36

linux上如何排查JVM内存过高？

在Linux上排查JVM内存过高的问题&#xff0c;可以采用以下几种方法&#xff1a; 1. **使用top命令查看进程**&#xff1a;通过top命令可以观察到系统中资源占用情况&#xff0c;包括CPU和内存。当收到内存过高的报警时&#xff0c;可以使用top命令来查看是哪个进程的内存使用率…...

编程日记 2024/5/12 17:49:34

第四届上海理工大学程序设计全国挑战赛 J.上学 题解 DFS 容斥

上学 题目描述 usst 小学里有 n 名学生&#xff0c;他们分别居住在 n 个地点&#xff0c;第 i 名学生居住在第 i 个地点&#xff0c;这些地点由 n−1 条双向道路连接&#xff0c;保证任意两个地点之间可以通过若干条双向道路抵达。学校则位于另外的第 0 个地点&#xff0c;第…...

编程日记 2024/5/12 17:48:33

word-排版文本基本格式

1、文本的基本格式&#xff1a;字体格式、段落格式 2、段落&#xff1a;word排版的基本控制单位 3、每敲一次回车&#xff0c;为一个段落标记&#xff0c;注意区分换行符和段落标记&#xff0c;换行符为指向下的箭头&#xff0c;段落标记为带拐弯的箭头&#xff0c;换行符&…...

编程日记 2024/5/12 17:47:32

目标检测YOLO实战应用案例100讲-无监督领域自适应目标检测方法研究与应用（五）

目录 多源无监督领域自适应目标检测方法 4.1研究现状及问题形成 4.2相关工作详述...

编程日记 2024/5/12 17:44:28

通过python实现Google的精准搜索

问题背景&#xff1a; 我想通过Google或者其他网站通过精准搜索确认该产品是否存在&#xff0c;但是即使该产品不存在Google也会返回一些相关的url链接&#xff0c;现在想通过python实现搜索结果的精准匹配以确认该产品是否为正确的名称【可以通过google搜索到&#xff0c;如果…...

编程日记 2024/5/12 17:43:26

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 实现效果 五 参考资料六 …...

编程日记 2024/5/12 17:41:23

AdaptixC2实战（一）Hack Smart Security

前言： 本篇是AdaptixC2实战系列的第一篇，环境是 THM 上的 Hack Smart Security 靶机。我们将学习和使用AdaptixC2进行操作，基于AdaptixC2工具所提供的能力，探讨AdaptixC2的使用技巧及操作安全。 背景（纯虚构）： 你的任务是渗透臭名昭著的 Hack Smarter APT 组织的服务器…...

编程新知 2026/3/27 12:10:25

轻量级二维码工具性能优化：从加载到部署的全流程实践

轻量级二维码工具性能优化&#xff1a;从加载到部署的全流程实践 【免费下载链接】qrcodejs Cross-browser QRCode generator for javascript 项目地址: https://gitcode.com/gh_mirrors/qr/qrcodejs 二维码生成功能已成为现代Web应用的常见需求&#xff0c;但传统实现方…...

编程新知 2026/3/27 11:56:19

SpringBoot 3.2.0 项目里整合 Flowable 7.1.0，我踩过的那些坑和最佳实践

SpringBoot 3.2.0 项目里整合 Flowable 7.1.0&#xff0c;我踩过的那些坑和最佳实践 最近在重构公司内部的工作流系统时&#xff0c;我决定采用 SpringBoot 3.2.0 和 Flowable 7.1.0 的组合。本以为只是简单的依赖引入和配置&#xff0c;没想到从 POM 文件开始就踩了不少坑。这…...

编程新知 2026/3/27 11:48:09

STM32F103C8T6 HAL库驱动HC-SR04：用输入捕获双通道模式，精准测距不翻车

STM32F103C8T6 HAL库双通道捕获HC-SR04&#xff1a;高精度测距的工程实践 在智能小车避障、工业液位检测等嵌入式应用中&#xff0c;超声波测距模块的稳定性直接决定系统可靠性。传统单通道捕获方案常因计数器溢出、中断响应延迟等问题导致测量误差&#xff0c;而双通道输入捕获…...

编程新知 2026/3/27 11:31:59

FireRedASR-AED-L在软件测试中的应用：语音交互功能自动化测试

FireRedASR-AED-L在软件测试中的应用&#xff1a;语音交互功能自动化测试 你有没有想过&#xff0c;那些能听懂你说话的手机应用、智能音箱或者车载系统&#xff0c;它们的“听力”到底准不准&#xff1f;开发团队是怎么确保你每次说“播放音乐”或者“导航回家”&#xff0c;…...

编程新知 2026/3/27 11:07:53

s2-pro音色复用效果实测：不同参考音频时长（3s/10s/30s）对合成质量影响

s2-pro音色复用效果实测&#xff1a;不同参考音频时长&#xff08;3s/10s/30s&#xff09;对合成质量影响 1. 引言 s2-pro作为Fish Audio开源的专业级语音合成模型镜像&#xff0c;其音色复用功能在实际应用中表现如何&#xff1f;本文将针对一个关键问题展开实测&#xff1a…...

编程新知 2026/3/27 10:55:51

BURSTER 9235 (85437090) 应变片信号放大器

BURSTER 9235 (85437090) 应变片信号放大器品牌&#xff1a;BURSTER&#xff08;德国波司特&#xff0c;精密测量技术专家&#xff09;型号&#xff1a;9235内部订货号&#xff1a;85437090类型&#xff1a;直连式&#xff08;In-Line&#xff09;应变片传感器信号放大器一、核…...

编程新知 2026/3/27 10:51:50

还在手工整理IT报表？这套自动化模板让你彻底解放双手

在不断变化的IT管理环境中&#xff0c;透明度和合规性已成为企业生存和发展的基石。面对日益繁杂的法规与标准&#xff0c;组织需要精细的报表与审计流程来支撑业务稳健运行。作为一款专为现代IT打造的尖端平台&#xff0c;Endpoint Central不仅大幅减轻了合规负担&#xff0c;…...

编程新知 2026/3/27 10:23:43

农机经销商必看：如何用2000-2020年县级数据精准定位区域市场？

农机经销商区域市场精准定位实战指南&#xff1a;基于2000-2020年县级数据分析 站在山东潍坊的田间地头&#xff0c;老张望着远处几台正在作业的拖拉机陷入了沉思。作为一家中型农机经销商的区域经理&#xff0c;他每年最头疼的就是如何准确预测各县区的农机需求——备货多了占…...

编程新知 2026/3/27 6:21:03

实测有效方案：星图平台一键部署Qwen3-VL:30B，接入飞书提升办公效率

实测有效方案&#xff1a;星图平台一键部署Qwen3-VL:30B&#xff0c;接入飞书提升办公效率 1. 为什么选择Qwen3-VL:30B作为办公助手 1.1 办公场景中的图文处理痛点 在日常办公中&#xff0c;我们经常遇到需要同时处理图片和文字的场景。比如会议结束后&#xff0c;群里堆满了…...

编程新知 2026/3/27 6:05:01