Chrome插件MV3简单开发

frenchbreadS

已于 2024-09-11 14:23:25 修改

阅读量6.2k

点赞数 10

文章标签： chrome 经验分享 javascript

于 2022-03-22 14:20:19 首次发布

本文链接：https://blog.csdn.net/SEAvYW/article/details/123641217

版权

调试插件的时候遇到了这个提示，了解之后得知MV2版本的chrome插件在2023年停止支持。所以在此写下MV3版本的简单教程

在这里插入图片描述

从零开始

首先新建一个文件夹，并创建一个名为manifest.json的配置文件

{
   
    "manifest_version":3,
	"name":"这是插件名称",
	"version":"0.0.1",
	"description":"这是插件描述",
    "action":{
   
		"default_title":"这是鼠标移上去时提示文字"
	},
	"icons":{
   //这是插件各个尺寸的图标，可以在manifest.json同级文件夹下创建img将图标放入
		"16":"img/test.png",
		"32":"img/test.png",
		"48":"img/test.png",
		"128":"img/test.png"
	}
}

然后在chrome地址栏中输入chrome://extensions/打开右上角的开发者模式之后可以在左上角找到加载已解压的扩展程序。打开刚刚创建的文件夹
在这里插入图片描述
可以看到配置的内容

这样一个最简单的插件就完成了，但是它什么都做不了。

popup部分

在主文件夹(manifest.json同级文件夹)中新建一个popup.html文件，并在manifest.json中的action配置popup的路径

"action":{
   
	"default_title":"Chrome插件",
	"default_popup":"popup.html"//同级文件夹下的路径
}

和一般的html一样，它也支持css和js。

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
</head>
<body>
    <div class="btn">
        测试<input id="TEST" class="checkbtn" type="checkbox" />
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/popup.js"></script>
</html>

在主文件夹中新建css和js用于存放对应的文件，并新建popup.css。

/* popup.css */
.btn{
   
    width: 100px;
    height: 30px;
    font-size: large;
}

重载插件，在右上角处点击插件图标可以看到刚刚加入的popup.html(用户界面)

在主文件夹下的js目录新建一个popup.js，再找个jquery也放进去。

//popup.js
$(".checkbtn").click(function(){
   
    alert($(this).attr('id'));
});

勾选checkbox之后再次打开会发现checkbox还原了，这意味着popup每次打开都会重置，并不会记录用户在用户界面上做出的改变，所以需要一个本地存储来保存popup做出的改变，在用户界面打开时还原popup的内容

background部分

在manifest.json中加入service_worker的配置路径和本地存储权限

"background":{
   
	"service_worker":"background.js"
},
"permissions":["storage"]

service_worker非常特殊，这是一直伴随插件运行的后台脚本，它没有前端页面，不支持dom，所以没法引入jquey和其他js，所有需要保持运行的脚本都要直接写在background.js里，同样他也不支持XMLHttpRequest，因此需要使用fetch来代替xhr请求。
而当插件长时间不活动时会出现 service worker (无效)的提示。谷歌为了让chrome节省内存现在不允许插件一直驻留，service_worker中的代码也会停止。唯一不变的是本地数据storage.local。所以开发插件时只能以本地存储的数据为主，通过各种触发来与之交互

//background.js
chrome.runtime.onInstalled.addListener(() => {
   
    DBdata("clear");//清除插件保存的本地数据
});
//插件用的数据都存储在storage.local中
function DBdata(mode,callback,data){
   //操作本地存储的函数
    if