使用Vite+Vue3开发谷歌浏览器插件【V3版本】

本文针对已对浏览器插件有了解的对象，对浏览器插件的介绍不做赘述，本文不完全是开发教程，更多的为本人日常学习记录，用来记录项目中相对重要以及需要注意的点，以实操和实现功能为主，如有疑问可联系博主解答相关问题。

背景介绍：做一款可以在vx公众号后台编辑页插入文字/图片的插件，本文围绕以下几点来做说明：

1. 因为插入文字/图片到vx公众号需要借助vx本身的编辑器，vx把UE编辑器对象挂载到了window中，因此需要借助挂载到window中的UE对象来进行插入操作
2. 因为我们的项目中用到了Vite+Vue3,因此如果想获取vx的window对象只能通过注入js来完成，在.Vue文件中是获取不到vx的window对象的
3. 借助options页来做登录
4. 借助options传递给background消息做登录跳转到目标页

manifest.json

"name": "xxx",  
"version": "1.0",  
"description": "xxx",  
"manifest_version": 3,  
"background": {  
"service_worker": "background.js"  
},  
"content_scripts": [  
{  
"matches": ["*://mp.weixin.qq.com/cgi-bin/appmsg*"],  // 只针对此链接生效
"css": ["content.css"],  
"js": ["content.js", "js/jquery-1.12.4.min.js", "js/crypto-js.min.js"],  
"run_at": "document_end"  
}  
],  
"options_ui": {  
"page": "options.html",  
"open_in_tab": true  // 安装插件时，默认打开options.html
},  
"permissions": ["storage", "declarativeContent", "tabs"],  // 使用到的权限
"host_permissions":[],  
"web_accessible_resources": [  
{  
"resources": [ "/images/icon16.png" ],  
"matches": ["<all_urls>"]  
},  
{  
"resources": [ "insert.js" ],  // 注入的js，用来做ue编辑器的通信
"matches": ["<all_urls>"]  
}  
],  
"action": {  
"default_popup": "index.html",  
"default_icon": {  
"16": "images/icon16.png",  
"32": "images/icon32.png",  
"48": "images/icon48.png",  
"128": "images/icon128.png"  
},  
"default_title": "xxx"  
},  
"icons": {  
"16": "images/icon16.png",  
"32": "images/icon32.png",  
"48": "images/icon48.png",  
"128": "images/icon128.png"  
}  
}

首先从options登录开始

我选择了在options中做登录，是因为谷歌API提供了非常好的一个操作，那就是用户第一次安装插件的时候会自动打开options页，在options做登录是个不错的选择
我的options页长这样：

现在我们需要考虑的是，登录完成之后如何保存用户信息、跳转到vx后台编辑页、监听存储的用户信息

使用storage保存用户信息，这是谷歌提供的API方法：

chrome.storage.sync.set({'myKey': JSON.stringify(data.data)}, function() {  
console.log("The myKey.");  
});

拿到用户信息之后，我们需要跳转到目标页面，假设目标页面是a，那么我们需要在已打开的窗口用查到a这个标签页进行跳转，首先在options.js是中是不具备这个能力的，那么我们就需要和background.js进行通信，借助background.js来做中转消息，background不做介绍，我们可以把它理解成中转站即可。
在options.js发送消息

chrome.runtime.sendMessage({ action: 'returnToPageACloseOptions' });

background接收options消息

在background.js中进行接收,跳转、关闭options、刷新页面具体看代码注释

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
   
    // 接收来自content options insert的消息，request里不允许传递function和file类型的参数
    chrome.tabs.query({
   currentWindow: true