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.mzph.cn/news/878922.shtml

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

相关文章

【leetcode详解】爬楼梯:DP入门典例(附DP通用思路 同类进阶练习)

【leetcode详解】爬楼梯:DP入门典例(附DP通用思路 同类进阶练习)

实战总结&#xff1a; vector常用方法&#xff1a; 创建一个长为n的vector&#xff0c;并将所有元素初始化为某一定值x vector<int> vec(len, x) 代码执行过程中将所有元素更新为某一值x fill(vec.begin(), vec.end(), x) // 更多实战方法欢迎参考文章&#xff1a;…
阅读更多...
HumanNeRF:Free-viewpoint Rendering of Moving People from Monocular Video 翻译

HumanNeRF:Free-viewpoint Rendering of Moving People from Monocular Video 翻译

HumanNeRF&#xff1a;单目视频中运动人物的自由视点绘制 引言。我们介绍了一种自由视点渲染方法- HumanNeRF -它适用于一个给定的单眼视频ofa人类执行复杂的身体运动&#xff0c;例如&#xff0c;从YouTube的视频。我们的方法可以在任何帧暂停视频&#xff0c;并从任意新的摄…
阅读更多...
国产游戏行业的崛起与挑战：技术创新引领未来

国产游戏行业的崛起与挑战：技术创新引领未来

国产游戏行业的崛起与挑战&#xff1a;技术创新引领未来 近年来&#xff0c;国产游戏行业蓬勃发展&#xff0c;技术水平不断提升&#xff0c;许多优秀作品在国际市场上崭露头角。从画面渲染到物理引擎&#xff0c;从AI技术到服务器架构&#xff0c;国产游戏已实现质的飞跃。然…
阅读更多...
mybatis-plus 雪花算法id冲突问题解决、雪花算法id冲突、雪花算法、id冲突解决、id、id冲突、主键冲突

mybatis-plus 雪花算法id冲突问题解决、雪花算法id冲突、雪花算法、id冲突解决、id、id冲突、主键冲突

mybatis-plus 雪花算法id冲突问题解决、雪花算法id冲突、雪花算法、id冲突解决、id、id冲突、主键冲突 问题&#xff1a; k8s里起了多个pod&#xff0c;发现mybatis-plus的雪花算法不同pod之前生成了相同的id 问题原因&#xff1a; mybatis-plus默认id生成器生成datacenterId…
阅读更多...
堆排序Java

堆排序Java

思路 这个代码还不错 https://blog.csdn.net/weixin_51609435/article/details/122982075 就是从下往上进行调整 1. 如何将数组映射成树 对于下面这颗树&#xff0c;原来的数组是&#xff1a; 好&#xff0c;如果调整的话&#xff0c;我们第一个应该调整的是最下边&#x…
阅读更多...
html记账本改写:数据重新布局，更好用了，没有localStorage保存版本

html记账本改写:数据重新布局，更好用了，没有localStorage保存版本

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>htm记账本</title><style>table {user-select: none;/* width: 100%; */border-collapse: collapse;}table,th,td {border: 1px solid …
阅读更多...
动手学深度学习【数据操作+数据预处理】

动手学深度学习【数据操作+数据预处理】

import osos.makedirs(os.path.join(., data), exist_okTrue) data_file os.path.join(., data, house_tiny.csv) with open(data_file, w) as f:f.write(NumRooms,Alley,Price\n) # 列名f.write(NA,Pave,127500\n) # 每行表示一个数据样本f.write(2,NA,106000\n)f.write(4,…
阅读更多...
CSS学习11--版心和布局流程以及几种分布的例子

CSS学习11--版心和布局流程以及几种分布的例子

版心和布局流程 一、版心二、布局流程三、一列固定宽度且居中四、两列左窄右宽五、通栏平均分布型 一、版心 版心&#xff1a;是指网页主题内容所在的区域。一般在浏览器窗口水平居中位置&#xff0c;常见的宽度值为960px、980px、1000px、1200px等。 二、布局流程 为了提高…
阅读更多...
探索EasyCVR与AI技术深度融合：视频汇聚平台的新增长点

探索EasyCVR与AI技术深度融合：视频汇聚平台的新增长点

随着5G、AI、边缘计算、物联网&#xff08;IoT&#xff09;、云计算等技术的快速发展&#xff0c;万物互联已经从概念逐渐转变为现实&#xff0c;AIoT&#xff08;物联网人工智能&#xff09;的新时代正在加速到来。在这一背景下&#xff0c;视频技术作为信息传输和交互的重要手…
阅读更多...
SpringMVC使用：类型转换数据格式化数据验证

SpringMVC使用：类型转换数据格式化数据验证

01-类型转换器 先在pom.xml里面导入依赖&#xff0c;一个是mvc框架的依赖&#xff0c;一个是junit依赖 然后在web.xml里面导入以下配置&#xff08;配置的详细说明和用法我在前面文章中有写到&#xff09; 创建此测试类的方法用于测试springmvc是具备自动类型转换功能的 user属…
阅读更多...
Linux驱动.之字符设备驱动框架，新内核框架，设备树（二）

Linux驱动.之字符设备驱动框架，新内核框架，设备树（二）

第一篇比较长&#xff0c;第二篇&#xff0c;继续写&#xff0c;内容有重复 一、字符设备驱动框架 在用户空间中调用open&#xff0c;打开一个字符设备&#xff0c;执行流程如下&#xff1a;最终会执行chrdev中的ops对应的open函数。
阅读更多...
Kafka3.6.0 linux 安装，非zk模式

Kafka3.6.0 linux 安装，非zk模式

1.下载 到kafka官网下载 2.上传到服务器指定位置 3.解压到指定目录&#xff0c;这里我放到/opt下 tar -xzvf kafka_2.13-3.6.0.tgz -C /opt/ 4.修改配置 因为我们不使用zookeeper&#xff0c;所以来到kafka装根目录的下的/config/kraft/ cd /opt/kafka_2.13-3.6.0/config…
阅读更多...
C++复习day05

C++复习day05

类和对象 1. 面向对象和面向过程的区别是什么&#xff1f;&#xff08;开放性问题&#xff09; 1. **抽象级别**&#xff1a;- **面向对象**&#xff1a;以对象&#xff08;数据和方法的集合&#xff09;为中心&#xff0c;强调的是数据和行为的封装。- **面向过程**&#xf…
阅读更多...
爆改YOLOv8|利用图像分割网络UNetV2改进yolov8主干-即插即用

爆改YOLOv8|利用图像分割网络UNetV2改进yolov8主干-即插即用

1&#xff0c;本文介绍 U-Net v2 通过引入创新的跳跃连接设计来提升医学图像分割的精度。这一版本专注于更有效地融合不同层级的特征&#xff0c;包括高级特征中的语义信息和低级特征中的细节信息。通过这种优化&#xff0c;U-Net v2 能够在低级特征中注入丰富的语义&#xff…
阅读更多...
AI 与大模型：物流行业的变革力量

AI 与大模型：物流行业的变革力量

一、物流行业的现状与挑战 物流行业在现代经济中扮演着至关重要的角色&#xff0c;但目前也面临着诸多挑战。 在效率方面&#xff0c;交通拥堵是一个突出问题。许多城市道路容量不足&#xff0c;无法满足日益增长的货物运输需求&#xff0c;导致运输时间延长。例如&#xff0…
阅读更多...
使用3DUNet训练自己的数据集（pytorch）— 医疗影像分割

使用3DUNet训练自己的数据集（pytorch）— 医疗影像分割

代码：lee-zq/3DUNet-Pytorch: 3DUNet implemented with pytorch (github.com) 文章<cicek16miccai.pdf (uni-freiburg.de)3D U-Net: Learning Dense Volumetric Segmentation
阅读更多...
高清4K短视频素材网站有哪些？推荐8个高清4K短视频素材网站

高清4K短视频素材网站有哪些？推荐8个高清4K短视频素材网站

是不是还在为找不到合适的4K高清素材而苦恼&#xff1f;别急&#xff01;今天我为大家精心挑选了8个超级优秀的4K高清短视频素材网站&#xff0c;不仅能让你的视频质量爆表&#xff0c;还能大大提高账号的互动率和曝光度&#xff01;每一个推荐都是精心筛选过的&#xff0c;每一…
阅读更多...
2409wtl,切换视图

2409wtl,切换视图

原文 介绍 我从一个基于SDI(单文档接口)WTL向导的应用开始,添加了一些从控件继承的窗口和一些对话框窗口(表单视图),然后才发现我必须,使SDI框架动态加载和卸载子窗口. 本文演示了两个可用来完成的技术:在SDI应用中的视图间动态切换.这是我使用的两个. 技术 1技术:第一个方…
阅读更多...
三维最小球覆盖（模拟退火）

三维最小球覆盖（模拟退火）

地址&#xff1a;https://codeforces.com/gym/101981/attachments 代码: #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #include <cstring> #include <cmath> #include <ctime> #include <algorithm> #inclu…
阅读更多...
[物理专题]经典浮力题目的Fh图像绘制

[物理专题]经典浮力题目的Fh图像绘制

这段代码用于绘制物体在液体中受到的浮力变化的图像&#xff0c;它有多个好处&#xff1a; 直观展示数据&#xff1a;通过图形化展示&#xff0c;可以直观地看到物体在液体中浸入深度与受到的浮力之间的关系。 教育和学习工具&#xff1a;这种类型的图像常用于教育目的&#x…
阅读更多...
最新文章

Copyright @ 2022~2023