说在前面
在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是 Chrome,不仅仅是因为其速度快,更多是它丰富的扩展在吸引我,那么大家有没有想过如何自己来开发一个 Chrome 浏览器插件呢?是不是有的同学会觉得 Chrome 浏览器插件的制作难度会很大呢?今天就让我来带你们看看一个简单的 Chrome 浏览器插件的编写过程,并给大家制作一个简单的插件模板,大家可以通过模板来进行快速开发。
一、项目结构
一个完整的插件目录结构如下:
(一)html + js
1、manifest.json
简单配置,具体配置说明已在配置项后标出。
{
"manifest_version": 2, //版本号,由google指定为2
"name": "helloWorld", //插件名称
"version": "1.0", //插件版本
"description": "hello world 插件", //插件描述
"icons": {
//插件图标
"128": "img/logo.jpg",
"48": "img/logo.jpg",
"16": "img/logo.jpg"
},
"browser_action": {
"default_icon": "img/logo.jpg", //插件图标
"default_popup": "default_popup" //点击图标后弹出的html互动文件
},
"content_scripts": [
{
"matches": ["<all_urls>"], //匹配url
"js": ["bg.js"], //执行脚本
"run_at": "document_start" //脚本运行时机
}
],
"permissions": ["tabs", "activeTab"] //权限申请
}
复制代码
使用"content_scripts"你可以修改你当前访问的页面的 dom,主要是靠 js 实现的,里面的"matches"是一个数组,里面装的是一些匹配的规则,意思就是当你的页面的地址满足数组里面的值的时候就会操作 js 文件,all_urls 表示所有网页都会加载脚本。而"js"里面的是具体的操作,具体操作就是要自己写了。
2、popup.html
插件弹窗页,可以直接编写一个 html 页面,在 manifest.json 中的 default_popup 项进行配置即可。
<!DOCTYPE html>
<html lang="">
<head>
<title>helloWorld</title>
<meta charset="utf-8" />
</head>
<body style="width: 200px; height: 200px">
<h1 id="message">你好</h1>
<input id="input1" type="text" />
</body>
<script src="js/popup.js"></script>
</html>
复制代码
3、popup.js
插件弹窗页的脚本 js 代码,在 popup.html 页面中引入即可。
(function () {
const input1 = document.getElementById("input1");
const message = document.getElementById("message");
input1.addEventListener("keyup", (e) => {
message.innerHTML = "你好" + e.target.value;
chrome.tabs.query({ active: true, currentWindow: true }, function (tab) {
chrome.tabs.sendMessage(
tab[0].id,
{
action: "hello",
data: message.innerHTML,
},
function (response) {
console.loig("收到回复:", response.state);
}
);
});
});
})();
复制代码
4、bg.js
运行在浏览器打开 tab 窗体的脚本,需要在 manifest.json 中的 content_scripts 中进行配置。
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
const { action, data } = request;
console.log("%c Line:4 🥔 action,data", "color:#b03734", action, data);
sendResponse({ state: "已接收到数据" + data });
});
复制代码
(二)vue + js
1、使用 vue 来编写插件弹窗页
使用 vue 来编写插件弹窗页面,我们可以将项目结构简化成这样,只需要修改 manifest.json 中的 default_popup 为 vue 项目打出的 dist 包即可。
{
"manifest_version": 2, //版本号,由google指定为2
"name": "helloWorld", //插件名称
"version": "1.0", //插件版本
"description": "hello world 插件", //插件描述
"icons": {
//插件图标
"128": "img/logo.jpg",
"48": "img/logo.jpg",
"16": "img/logo.jpg"
},
"browser_action": {
"default_icon": "img/logo.jpg", //插件图标
"default_popup": "demo/dist/index.html" //点击图标后弹出的html互动文件
},
"content_scripts": [
{
"matches": ["<all_urls>"], //匹配url
"js": ["bg.js"], //执行脚本
"run_at": "document_start" //脚本运行时机
}
],
"permissions": ["tabs", "activeTab"] //权限申请
}
复制代码
并将 popup.js 文件移到 vue 项目中,在 index.html 中引入即可。
二、浏览器导入插件
(一)进入 chrome 扩展程序管理页
(二)加载扩展程序
(三)页面使用插件
三、模板源码
(一)gitee 源码下载
模板代码已上传到 gitee,具体地址如下:
https://gitee.com/zheng_yongtao/chrome-plug-in.git
(二)依赖下载
拉取模板代码之后需要先下载 vue 模板的依赖(npm install
)。
(三)vue 打包
安装好 vue 模板的依赖之后,就可以对 vue 项目进行打包(npm run build
)。
四、npm 下载
插件模板我也已经上传了一份到了 npm 上,可以直接通过 npm 将模板下载下来:
npm i @jyeontu/chrome-plug-template
复制代码
说在后面
🎉这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球🏸 ,平时也喜欢写些东西,既为自己记录📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解🙇,写错的地方望指出,定会认真改进😊,在此谢谢大家的支持,我们下文再见🙌。
评论