chrome 插件开发入门

news/2024/9/19 22:51:05/ 标签: 前端, chrome

1. 介绍

Chrome 插件可用于在谷歌浏览器上控制当前页面的一些操作，可自主控制网页，提升效率。

平常我们可在谷歌应用商店中下载谷歌插件来增强浏览器功能，作为开发者，我们也可以自己开发一个浏览器插件来配合我们的日常学习工作，提升幸福感。

在谷歌插件开发者官网，可以阅读插件开发文档来写插件，插件开发主要是 JavaScript，因此对前端开发者很友好

2. 快速入门

2.1 manifest.json 配置

  1. 新建一个文件夹，就叫 ChromePlugin

  2. 在 ChromePlugin 根目录下新建 manifest.json 文件

manifest 文件是插件的配置文件，只有在该 json 文件中增加了配置项，才允许增加自定义的内容，下面是常见的 json 文件配置

{"manifest_version": 3,"name": "chromePlugin","version": "1.0.0","description": "我的第一个谷歌插件","icons": {"16": "./assets/images/icon16.png","32": "./assets/images/icon32.png","48": "./assets/images/icon48.png","128": "./assets/images/icon128.png"},   
}

基本配置：

  • manifest_version：manifest 的版本，是谷歌针对插件开发的版本配置，目前主流都是 3 版本，2 版本已经停止更新
  • name：插件的名称，即插件在谷歌商店以及使用时的名称
  • version：插件的版本
  • description：插件的描述信息
  • icons：描述插件图标的大小和文件路径，目前提供 4 种规格的图片，按照上述配置分别传入不同大小的图片即可，图片地址可在根目录下创建一个 assets文件放置静态资源

其他配置可见下文中的详细解释

到这里，一个 chrome 插件已经可以被加载出来了

打开谷歌浏览器，输入 chrome://extensions ，启用开发者模式(右上角)，再点击「加载已解压的扩展程序」然后找到 ChromePlugin 这个文件夹打开，便可以将这个插件加载进来了，只不过当前插件没有任何功能，所以也是灰色的

Image Image

2.2 action 配置

在 manifest.json 中除了上述的基础配置外，还可配置 action，action 字面上意思就是我们点击右上角的插件图标时的反应，比如打开一个交互面板等等。这种交互的集合就是 action。

首先先在 manifest.json 中配置 action，可见官网针对 action 的配置信息，action配置。

default_popup 可在点击插件图片时弹出一个弹层，弹层的内容就是 default_popup 所对应的 html 文件。

{"manifest_version": 3,"name": "chromePlugin","version": "1.0.0","description": "我的第一个谷歌插件","icons": {"16": "./assets/images/icon16.png","32": "./assets/images/icon32.png","48": "./assets/images/icon48.png","128": "./assets/images/icon128.png"},"action": {"default_title": "Click Me","default_popup": "./action/index.html","default_icon": "./assets/images/icon32.png"}    
}

可在根目录下新建一个 action 文件夹，然后再创建一个 index.html 文件，写一个简单的测试文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.hello {width: 100px;}</style>
</head>
<body><div class="hello">hello simon</div><script src="./index.js"></script>
</body>
</html>

再次加载该插件，点击插件图标，可在图标下方看到一个弹层，弹层显示的是 html 文件中的内容

Image

如果想写 js 代码，不能直接在 html 中创建一个 script 标签，然后写代码，插件中不允许 html 中有内联脚本，因此需要将脚本代码作为一个单独的文件，再通过 script 标签来引入

2.3 content_scripts

如果我们想给插件添加功能，那就需要再配置 content_scripts(内容脚本)，插件content_scripts。

不是所有的 chrome 的 api 方法都能在 content_scripts 中使用

content_scripts 的特性：

  • 可在页面打开、或页面加载结束、或者页面空闲时注入

  • 共享页面的 dom，因此脚本文件可以操作页面上的 dom

  • JS 隔离，脚本文件的 js 不会影响到页面中的 js，也无法引用页面 js 中的函数或变量

content_scripts 的注入方式也有多种：静态注入、动态注入、编码注入

  • 静态注入，即在 manifest.json 文件中指定 content_scripts 中的 js 文件，比较常用
  • 动态注入，通过 chrome.scripting.registerContentScripts 方法注入
  • 编码注入，通过 chrome.scripting.executeScript

在 manifest.json 中可传入的属性

属性类型描述
matches字符串数组必填，指定将内容脚本注入到哪些网页
css字符串数组可选，要注入到匹配页面的 css 文件
js字符串数组可选，要注入到匹配页面的 js 文件
run_atdocument_start
|document_end
|document_idle		可选，指定何时将脚本注入到网页中，默认值document_idle
document_idle: 页面空闲时
document_end:在dom完成之后，图片等资源加载前注入脚本
document_start:在dom完成前就注入脚本

在 manifest.json 中配置 content_scripts

{"manifest_version": 3,"name": "chromePlugin","version": "1.0.0","description": "我的第一个谷歌插件","icons": {"16": "./assets/images/icon16.png","32": "./assets/images/icon32.png","48": "./assets/images/icon48.png","128": "./assets/images/icon128.png"},"action": {"default_title": "Click Me","default_popup": "./action/index.html","default_icon": "./assets/images/icon32.png"}, "content_scripts": [{"matches": ["https://*/*"],"css": ["./src/index.css"],"js": ["./src/main.js"]}]
}

// 计算图片大小
function getByte(src){return fetch(src).then(function(res){return res.blob()}).then(function(data){return (data.size/(1024)).toFixed(2)+'kB';})
}
// 在页面上的图片的title属性上显示出来
function showInfo(el,byte){const html=`真实尺寸:${el.naturalWidth}*${el.naturalHeight}\n显示尺寸:${el.width}*${el.height}\n存储大小:${byte}`;el.title=html;
}
document.addEventListener('mouseover',function(e){//移动到图片元素上时、则显示信息if(e.target.tagName=='IMG'){getByte(e.target.src).then(byte=>{showInfo(e.target,byte)});}
},true)

2.4 background

配置后台脚本，用于处理插件的主要事件的处理，后台脚本指定了属性 service_worker，其实后台脚本是 Service Worker 上处理的。我们插件上的一些主要逻辑的处理都可以放到这个脚本文件中

{"manifest_version": 3,"name": "chromePlugin","version": "1.0.0","description": "我的第一个谷歌插件","icons": {"16": "./assets/images/icon16.png","32": "./assets/images/icon32.png","48": "./assets/images/icon48.png","128": "./assets/images/icon128.png"},"action": {"default_title": "Click Me","default_popup": "./action/index.html","default_icon": "./assets/images/icon32.png"}, "content_scripts": [{"matches": ["https://*/*"],"css": ["./src/index.css"],"js": ["./src/main.js"]}],"background": {"service_worker": "./src/server_worker.js"}
}

2.5 右键菜单

当我们点击鼠标右键时，可打开一个菜单，其中有复制粘贴等功能，插件也可以自定义右键的菜单，同样需要在 manifest.json 中添加权限配置

{"manifest_version": 3,"name": "chromePlugin","version": "1.0.0","description": "我的第一个谷歌插件","icons": {"16": "./assets/images/icon16.png","32": "./assets/images/icon32.png","48": "./assets/images/icon48.png","128": "./assets/images/icon128.png"},"action": {"default_title": "Click Me","default_popup": "./action/index.html","default_icon": "./assets/images/icon32.png"}, "content_scripts": [{"matches": ["https://*/*"],"css": ["./src/index.css"],"js": ["./src/main.js"]}],"permissions": ["contextMenus"]
}

permissions 是允许增加权限配置，右键菜单就是一种权限配置，开启右键菜单权限后，需要再通过代码新增右键的菜单，这个时候就需要用到上一步的 background 中的配置了

在 service_worker.js 文件中新增一个右键菜单，可使用 chrome.contextMenus.create 方法来创建

chrome.contextMenus.create({type: 'normal',title: '插件的右键菜单',contexts:['all'],id:'menu-1'
});

保存后，就能在右键看到一个菜单选项了

2.6 permissions

在上一步创建的右键菜单中，涉及到权限设置，只有在 permissions 添加了对应权限后，才允许去创建菜单，权限除了右键菜单外，还有其他的权限，权限列表，常见的有：

  • audio： chrome.audio，控制连接到系统的音频设备
  • bookmarks： chrome.bookmarks，读取和更改书签的权限
  • clipboardRead：通过 clipboard API 读取剪切板上的数据去粘贴
  • clipboardWrite: 通过 clipboard API 剪切内容并复制到剪切板
  • contextMenus： chrome.contextMenus 控制右键菜单的权限
  • cookies： chrome.cookies 查询和更改 cookies 的权限
  • desktopCapture： chrome.desktopCapture 截取屏幕内容的权限
  • downloads： chrome.downloads 管理下载内容的权限
  • favicon：通过 Favicon 读取网站页面的图标的权限
  • history： chrome.history 读取和更改浏览记录的权限
  • idle： chrome.idle 读取浏览器是否处于空闲状态的权限
  • proxy： chrome.proxy 管理浏览器的代理设置
  • sidePanel：chrome.sidePanel 打开侧边栏的权限
  • storage: chrome.storage 存储、检索和跟踪用户数据的更改的权限
  • system.cpu： chrome.system.cpu，查询 CPU 数据的权限
  • system.memory： chrome.system.memory，获取物理内存的权限

当涉及到权限问题时，就需要先在 permissions 添加了对应权限后，才允许使用 chrome.xxx 再使用对应的功能。

2.7 options

options 就是选项页面，可用于在插件的右键选项中进行配置跳转，也可以在插件管理页面点击详情后打开插件选项，当增加该配置项后，选中插件再右键时，会增加一个「选项」的菜单，点击后会跳转到配置的页面。要展示该选项需要在 manifest.json 中配置 options_ui

{"manifest_version": 3,"name": "chromePlugin","version": "1.0.0","description": "我的第一个谷歌插件","icons": {"16": "./assets/images/icon16.png","32": "./assets/images/icon32.png","48": "./assets/images/icon48.png","128": "./assets/images/icon128.png"},"action": {"default_title": "Click Me","default_popup": "./action/index.html","default_icon": "./assets/images/icon32.png"}, "content_scripts": [{"matches": ["https://*/*"],"css": ["./src/index.css"],"js": ["./src/main.js"]}],"permissions": ["contextMenus"],"options_page": "./options/index.html", // chrome40 之前的写法"options_ui": { // chrome40 之后的写法"page": "./options/index.html","chrome_style": true // 添加一些默认样式}
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>这是 options 点击后打开的页面</div>
</body>
</html>

3. 页面通信

在 manifest.json 中可通过不同配置来实现插件的扩展能力，比如 content_scripts、background、options、actions 都有脚本文件，那如何在不同的脚本文件中传递数据呢，比如在 content_scripts 是在网页中运行的，其中的数据如何共享给 background，可以通过页面通信来传递数据。

官网文档

3.1 发送数据

// 从内容脚本 content_scripts 发送数据到扩展页面(background、options、actions)
(async () => {const response = await chrome.runtime.sendMessage({greeting: "hello"});console.log(response);
})();

// 从扩展页面(background、options、actions) 发送数据到内容脚本(content_scripts)
(async () => {// 需要先获取当前的tab页面const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});const response = await chrome.tabs.sendMessage(tab.id, {greeting: "hello"});console.log(response);
})();

不同的发送方，发送数据的方式也是不同的，在使用时需要有所区别

3.2 接收数据

接收数据的方式是一致的，都是通过 chrome.runtime.onMessage

// 接收数据
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");if (request.greeting === "hello")//处理完消息后、通知发送方sendResponse({farewell: "goodbye"});}
);

http://www.ppmy.cn/news/1520656.html

相关文章

2-78 基于matlab-GUI的DTW算法语音识别

2-78 基于matlab-GUI的DTW算法语音识别

基于matlab-GUI的DTW算法语音识别&#xff0c;具有16页分析报告。能识别0-9数字&#xff0c;正确率90。预处理过程包括预滤波、采样和量化、分帧、加窗、预加重、端点检测等。经过预处理的语音数据进行特征参数提取。在训练阶段&#xff0c;将特征参数处理之后&#xff0c;每个…
阅读更多...
算法题汇总

算法题汇总

算法汇总 环形链表 https://leetcode.cn/problems/linked-list-cycle/ 反转链表 https://leetcode.cn/problems/reverse-linked-list/28 环形链表 II https://leetcode.cn/problems/linked-list-cycle-ii/ 快乐数 https://leetcode.cn/problems/happy-number/ 反转链表 II …
阅读更多...
掌握SQL的“删除艺术”：如何使用DROP TABLE命令

掌握SQL的“删除艺术”：如何使用DROP TABLE命令

掌握SQL的“删除艺术”&#xff1a;如何使用DROP TABLE命令 在数据库管理中&#xff0c;有时候我们需要彻底删除一个表&#xff0c;这可能是为了重新设计数据库结构&#xff0c;或者因为某些表不再需要。SQL 提供了 DROP TABLE 语句来实现这一功能。本文将详细介绍 DROP TABLE…
阅读更多...
react 中three.js 模型渲染

react 中three.js 模型渲染

npm install three import * as THREE from "three"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; const mountRef useRef(null); useEffect(() > {// 创建渲染器 const renderer new THREE.WebGLRenderer(); const wi…
阅读更多...
“解决MySQL容器启动后无法编辑文件的问题：实用指南“

“解决MySQL容器启动后无法编辑文件的问题：实用指南“

前段时间拉取了个MySQL的容器节点&#xff0c;但是拉起之后发现居然编辑不了MySQL的配置文件&#xff0c;这是我的启动命令 docker run -itd -p 3310:3306 -e MYSQL_ROOT_PASSWORD12345678 --name slave2 f5f171121fa3 bash 下面总结下解决方法&#xff1a; 编辑docker file…
阅读更多...
MES基于C#开发计划管理组件集成WinCC中使用

MES基于C#开发计划管理组件集成WinCC中使用

MES系统通常都会与SCADA系统集成使用&#xff0c;尤其具备中控管理需求的工厂&#xff0c;集控SCADA需要集成MES系统的计划工单数据实现工单数据、工艺配方数据、SN数据、打码数据等下发&#xff0c;执行状态、关键参数反馈等上传。本文介绍在WinCC画面集成基于C#开发的计划管理…
阅读更多...
[论文笔记] LLM模型剪枝

[论文笔记] LLM模型剪枝

Attention Is All You Need But You Don’t Need All Of It For Inference of Large Language Models LLaMA2在剪枝时，跳过ffn和跳过full layer的效果差不多。相比跳过ffn/full layer，跳过attention layer的影响会更小。 跳过attention layer：7B/13B从100%参…
阅读更多...
iOS 收集打印日志

iOS 收集打印日志

可以将要在Xcode 控制台打印的日志写在沙盒&#xff0c;最后导出分享&#xff0c;进行问题分析。 正式版本不建议使用&#xff0c;避免增加用户内存。配合解决顽固 Bug 可以通过该方法收集打印日志 .h头文件 interface LogManager : NSObject(FSLogManager *)shareInstance; -…
阅读更多...
冲刺蓝桥杯第三章字符串

冲刺蓝桥杯第三章字符串

ASCII码值、字母大小写转换、‘0’~‘9’ //数字转字符：A(65)a(97)0(48) char A=char(65); char a=char(97); char c
阅读更多...
终极解决 docker 拉取镜像失败的问题，其他类似场景也适用

终极解决 docker 拉取镜像失败的问题，其他类似场景也适用

国内的网络环境&#xff0c;想必大家都是知道的&#xff0c;虽说技术无罪&#xff0c;但奈何政策不允许啊&#xff0c;以下内容我在 CSDN 上发不了&#xff0c;请大家移步我的个人公 * 号&#xff1a;新质程序猿&#xff0c;查看更多原创内容&#xff0c;这里只介绍相关背景和需…
阅读更多...
字节6面，面爆炸了

字节6面，面爆炸了

字节跳动 昨晚在牛客网刷到一篇"深夜 EMO 贴"&#xff0c;又是讲字节 N 面挂的。 原本的 4HR 面都过了&#xff0c;结果 Offer 审批的时候&#xff0c;被 HR 通知加一轮交叉面&#xff0c;一共 6 面。 加面时&#xff0c;两个面试官全程黑脸&#xff0c;最后两道算法…
阅读更多...
软考 -- 软件设计师 -- 二轮复习(2) -- 程序设计语言(持续更新)

软考 -- 软件设计师 -- 二轮复习(2) -- 程序设计语言(持续更新)

软考 – 软件设计师 – 二轮复习(2) – 程序设计语言(持续更新) 文章目录 软考 -- 软件设计师 -- 二轮复习(2) -- 程序设计语言(持续更新)前言一、编译、解释、基本控制结构二、数据类型三、变量和常量、逻辑表达式(短路&#xff1a;&&、||、&#xff01;)四、传值调用…
阅读更多...
【qt】多线程实现倒计时

【qt】多线程实现倒计时

1.界面设计 设置右边的intvalue从10开始倒计时 2.新建Thread类 新建Thread类&#xff0c;使其继承QThread类&#xff0c;多态重写run函数&#xff0c;相当于线程执行函数 3.重写run函数 重写run函数&#xff0c;让另一个进程每隔1s发出一个信号&#xff0c;主线程使用conne…
阅读更多...
Ps：渲染视频

Ps：渲染视频

Ps菜单&#xff1a;文件/导出/渲染视频 File/Export/Render Video 在 Photoshop 中创建视频或动画内容后&#xff0c;可以通过渲染视频 Render Video命令对其进行优化、渲染和导出。 “渲染视频”对话框中提供了两种编码器&#xff1a;Adobe Media Encoder 及 Photoshop 图像序…
阅读更多...
【Postgresql】地理空间数据的存储与查询，查询效率优化策略，数据类型与查询速度的影响

【Postgresql】地理空间数据的存储与查询，查询效率优化策略，数据类型与查询速度的影响

注：使用postgresql数据库会用到PostGIS 扩展。 一、安装PostGIS 扩展 在 PostgreSQL 中遇到错误 “type geography does not exist” 通常意味着你的 PostgreSQL 数据库还没有安装 PostGIS 扩展，或者 PostGIS 扩展没有被正确地安装在你的数据库中。geography 类型是 PostGI…
阅读更多...
（前端）面试300问之（3）this的指向判断

（前端）面试300问之（3）this的指向判断

一、this的相关理解与解读 1、各角度看this。 1&#xff09;ECMAScript规范&#xff1a; this 关键字执行为当前执行环境的 ThisBinding。 2&#xff09;MDN&#xff1a; In most cases, the value of this is determined by how a function is called. 在绝大多数情况下&…
阅读更多...
嵌入式硬件-ARM处理器架构，CPU，SOC片上系统处理器

嵌入式硬件-ARM处理器架构，CPU，SOC片上系统处理器

多进程空间内部分布图&#xff1a;注意&#xff1a;创建线程实际使用堆区空间&#xff0c;栈区独立 ARM处理器架构&#xff1a; 基于ARM920T架构的CPU:以下为哈佛结构 ALU:算数运算器 R0~R12&#xff1a;寄存器 PC:程序计数器&#xff0c;默认为0&#xff0c;做自加运算&#x…
阅读更多...
kafka单条消息过大发送失败

kafka单条消息过大发送失败

一、背景 生产环境中使用kafka作为消息队列&#xff0c;生产者发送消息失败&#xff0c;查询报错日志&#xff0c;得到如下输出&#xff1a; Caused by: org.springframework.kafka.KafkaException: Send failed; nested exception is org.apache.kafka.common.errors.RecordT…
阅读更多...
JSON格式化？超简单！

JSON格式化？超简单！

JSON格式化 是指将JSON&#xff08;JavaScript Object Notation&#xff09;数据转换成一种更易读、结构化的格式。 在以下场景中&#xff0c;可能需要进行JSON格式化&#xff1a; 调试和开发&#xff1a;在开发过程中&#xff0c;开发人员经常需要查看和解析JSON数据。通过…
阅读更多...
基于深度学习的遥感图像分类识别系统，使用PyTorch框架实现

基于深度学习的遥感图像分类识别系统，使用PyTorch框架实现

取5个场景 [海滩, 灌木丛, 沙漠, 森林, 草地] 划分数据集 train&#xff1a;val&#xff1a;test 7&#xff1a;2&#xff1a;1 环境依赖 pytorch1.1 or 1.0 tensorboard1.8 tensorboardX pillow 注意调低batch_size参数特别是像我这样的渣渣显卡 使用方法 只需要指…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站