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.rhkb.cn/news/415722.html

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

相关文章

Vite - 兼容旧版浏览器 plugin-legacy（2）

Vite - 兼容旧版浏览器 plugin-legacy（2）

目录 1&#xff0c;问题2&#xff0c;解决3&#xff0c;String 其他新增 API 的版本 接上文 Vite - 兼容旧版浏览器 plugin-legacy&#xff08;1&#xff09; 1&#xff0c;问题 客户浏览器报错&#xff0c;不支持 replaceAll 方法。 该方法在 query-string 依赖内部使用了。…
阅读更多...
嵌入式Linux：常见信号的默认行为

嵌入式Linux：常见信号的默认行为

信号是一种软件中断&#xff0c;用于通知进程发生了某种异步事件。信号可以由用户、其他进程或操作系统内核产生。进程可以选择捕获并处理这些信号&#xff0c;或者忽略它们&#xff0c;让系统执行默认操作。 不可靠信号&#xff08;非实时信号&#xff09;&#xff1a;编号为 …
阅读更多...
反爬虫策略收录集

反爬虫策略收录集

前言 反爬虫&#xff0c;是指对扫描器中的网络爬虫环节进行反制&#xff0c;通过一些反制策略来阻碍或干扰爬虫的正常爬行&#xff0c;从而间接地起到防御目的。下面是一些常见的反爬虫策略的收录。 入门版 封IP 由于服务器有防火墙&#xff08;如果防火墙在TCP/UDP层或者它…
阅读更多...
渲染100高性能云渲染，性价比超高

渲染100高性能云渲染，性价比超高

在这个3D渲染行业迅速发展的时代&#xff0c;对于渲染速度和稳定性的渴望日益强烈。需要更快的渲染时间来缩短项目周期&#xff0c;同时希望渲染过程更加稳定&#xff0c;避免问题导致的损失。 如今市场上虽然不乏各种云渲染服务&#xff0c;但要找到既经济又能满足高要求的选…
阅读更多...
Java内存区域

Java内存区域

文章目录 运行时数据区域1. 程序计数器2. 虚拟机栈局部变量表 3. 本地方法栈4. 堆5. 方法区运行时常量池直接内存 运行时数据区域 Java虚拟机在执行Java程序的过程中会把它管理的内存划分为若干个不同的数据区域。这些区域都有各自的用途&#xff0c;以及创建和销毁的时间&…
阅读更多...
sqli-labs靶场通关攻略（61-65）

sqli-labs靶场通关攻略（61-65）

Less-61 步骤一&#xff1a;查看数据库 ?id1)) and updatexml(1,concat(1,(select database())),1)-- 步骤二&#xff1a;查看表名 ?id1)) and updatexml(1,concat(1,(select group_concat(table_name) from information_schema.tables where table_schemasecurity)),1)--…
阅读更多...
uniapp写的一个年月日时分秒时间选择功能

uniapp写的一个年月日时分秒时间选择功能

代码: <template><view><picker mode"multiSelector" :value"multiIndex" :range"multiRange" change"onMultiChange"><view class"picker">当前选择&#xff1a;{{ formattedDateTime }}</vie…
阅读更多...
中国各地级市的海拔标准差

中国各地级市的海拔标准差

海拔标准差是衡量地理测量准确性的重要指标&#xff0c;它通过计算特定地点的海拔测量值与平均海拔之间的偏差来评估数据的可靠性。较小的标准差意味着测量结果较为一致&#xff0c;而较大的标准差则可能指出数据的波动性或测量误差。 计算方法 海拔标准差的计算遵循以下公式…
阅读更多...
C++学习/复习补充记录 --- 图论(深搜，广搜)

C++学习/复习补充记录 --- 图论(深搜，广搜)

图的度 无向图&#xff1a; 连接某节点的边数&#xff0c;即为该节点的【度】。 &#xff08;无向图中&#xff0c;有5条边连接节点4&#xff0c;则节点4的度为5。&#xff09; 有向图&#xff1a; 出度&#xff1a;从该节点出发的边的个数。 入度&#xff1a;指向该节点边的个…
阅读更多...
Idea_服务器自动化部署_傻瓜式教程

Idea_服务器自动化部署_傻瓜式教程

使用Alibaba Cloud Toolkit 在 IntelliJ IDEA 中一键部署项目到服务器 1. 安装 Alibaba Cloud Toolkit 插件 确保 IntelliJ IDEA 版本为 2018.3 或以上。打开 IntelliJ IDEA&#xff0c;进入 File -> Settings -> Plugins&#xff0c;搜索并安装 Alibaba Cloud Toolkit…
阅读更多...
【Python基础】字典类型

【Python基础】字典类型

本文收录于 《Python编程入门》专栏&#xff0c;从零基础开始&#xff0c;分享一些Python编程基础知识&#xff0c;欢迎关注&#xff0c;谢谢&#xff01; 文章目录 一、前言二、Python 字典类型2.1 访问字典里的值2.2 修改字典2.3 删除字典元素2.4 字典键值的特性2.5 遍历字典…
阅读更多...
Vision Transformer (ViT) + 代码【详解】

Vision Transformer (ViT) + 代码【详解】

文章目录 1、Vision Transformer (ViT) 介绍2、patch embedding3、代码3.1 class embedding Positional Embedding3.2 Transformer Encoder3.3 classifier3.4 ViT总代码 1、Vision Transformer (ViT) 介绍 VIT论文的摘要如下&#xff0c;谷歌翻译如下&#xff1a; 虽然 Transf…
阅读更多...
《JavaEE进阶》----10.＜SpringMVC应用分层：【三层架构】＞

《JavaEE进阶》----10.＜SpringMVC应用分层：【三层架构】＞

本篇博客我们主要讲解 1.应用的分层&#xff1a;三层架构 2.Spring MVC和三层架构的区别和联系 3.软件设计原则&#xff1a;高内聚低耦合 4.应用分层的好处 5.通过应用分层后的代码示例 一、三层架构简介 阿里开发手册中,关于工程结构部分,定义了常见工程的应用分层结构: 上图…
阅读更多...
【Java 基础】：三大特征之多态

【Java 基础】：三大特征之多态

✨ 杏花疏影里&#xff0c;吹笛到天明 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;java学习 ⛺️ 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&…
阅读更多...
u盘格式化数据还能恢复吗？点击了解实用教程

u盘格式化数据还能恢复吗？点击了解实用教程

U盘是电子数据存储设备&#xff0c;我们主要用它来转移数据、随身携带数据等。同时U盘在使用过程中常会遇到问题&#xff0c;比如U盘中毒&#xff0c;U盘中毒会导致里面保存的数据文件无法读取&#xff0c;我们需要进行U盘格式化。格式化之后的U盘才可以继续使用&#xff0c;那…
阅读更多...
软件测试-Selenium+python自动化测试

软件测试-Selenium+python自动化测试

目录 会用到谷歌浏览器Chrome测试，需要下载一个Chromedriver（Chrome for Testing availability）对应自己的浏览器版本号选择。 一、元素定位 对html网页中的元素进行定位，同时进行部分操作。 1.1一个简单的模板 from selenium import webdriver from selenium.webdrive…
阅读更多...
本地部署AList并挂载小雅超集结合内网穿透实现无公网IP远程访问

本地部署AList并挂载小雅超集结合内网穿透实现无公网IP远程访问

文章目录 前言1. 本地部署AList2. AList挂载网盘3. 部署小雅alist3.1 Token获取3.2 部署小雅3.3 挂载小雅alist到AList中 4. Cpolar内网穿透安装5. 创建公网地址6. 配置固定公网地址 &#x1f4a1; 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff…
阅读更多...
42.接雨水

42.接雨水

42.接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1…
阅读更多...
一文搞懂微服务架构之限流

一文搞懂微服务架构之限流

前置知识 限流是通过限制住流量大小来保护系统&#xff0c;能够解决异常突发流量打崩系统的问题。例如常见的某个攻击者在攻击你维护的系统&#xff0c;那么限流就是极大程度上保护住你的系统。 算法 限流算法也可以像负载均衡算法那样&#xff0c;划分成静态算法和动态算法…
阅读更多...
【Java】—— Java面向对象高级：关键字static的使用

【Java】—— Java面向对象高级：关键字static的使用

目录 1. 关键字&#xff1a;static 1.1 类属性、类方法的设计思想 1.2 static关键字 1.3 静态变量 1.3.1 语法格式 1.3.2 静态变量的特点 1.4 静态方法 1.4.1 语法格式 1.4.2 静态方法的特点 1.5 练习 1. 关键字&#xff1a;static 回顾类中的实例变量&#xff08;即…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023