契机

浅浅的唠一唠为什么会有这篇文章？首先插件这个东西，大家熟知的，一般以油猴为主的功能性破解插件，免登陆查看视频或者文章的，在本质上来讲，就是将你进入页面的时，多加载一个脚本文件。用个人单个会员通过token修改和传参修改。使当前使用插件的用户可以，查看付费内容。

或者一些工具性记录提醒插件等等，今天不是来推荐使用插件的，而是介绍一下开发插件的流程步骤。

接下来浅浅的了解一下 google extensions

缘起

首先要明确的一点就是现有 google extensions 分为两个版本

是V2老版本，是大概发布于2014年左右发布，现有绝大多数插件还都是V2 版本开发。所以当时开发的时候不管是找文档还是看V3插件开源库，都是少之又少。官方文档目前对这个版本的支持性。

自 2022 年 1 月 17 日起，Chrome 网上应用店已停止接受新的 Manifest V2 扩展程序。我们强烈建议您尽快将您的扩展迁移到 Manifest V3；在 Manifest V2于 2023 年逐步淘汰后

则是今天的主题 V3 版本，是由2020年推出的，至于优点借用官方一句话

"Manifest V3 扩展在安全性、隐私性和性能方面得到了增强"

下面附带支持时间表

始于何

因为现在vue-cli生成的只是V2版本的开发模板，并且关于V3相关的文档和开源库极少，开发途中碰到很多坑，笔者进行了升级，并成功发布了一个简单的 google extensions，最终整合出一个V3 Vue3开发模板。大家可以直接通过笔者自己开发的vite-vue3-cli，一键生成。

用于何

 npm i vite-vue3-cli -g

令于何

 create-cli

择于何

选择vue3-google-extensions

进于何

下载完成后，并提示进入项目

一览众山小

|- node_modules
|- public
|   |- image //存放图表icon位置。默认会放置几个等比logo
|   |- index.html //默认打包复制的html 文件，如需特别设置可使用模块文件夹中内部的html文件设置定制化
|- scripts
|   |- build.zip.js //执行`build-zip`命令时，自动生成zip，上传到google插件开发者平台需要用到
|- src
|   |- options // 选项页面，选项页面支持自定义扩展。选项可用于启用功能并允许用户选择与其需求相关的功能。
|   |    |- App // options页面的根组件
|   |    |- index.html // options页面备用html 文件，可修改vue.config指向当前html
|   |    |- index.js //options 入口文件
|   |- popup //弹出页面，当用户单击操作图标时，它会显示在一个特殊的窗口中。弹出页面的工作方式与网页非常相似。它可以包含指向样式表和脚本标签的链接，但不允许内联 JavaScript。
|   |    |- App // popup页面的根组件
|   |    |- index.html // popup页面备用html 文件，可修改vue.config指向当前html
|   |    |- index.js //popup 入口文件
|   |- background.js //后台脚本，通常用户发送Fetch 或 监听调用，一般相关逻辑都会写到这里。
|   |- manifest.development.json //清单，包括整个插件权限申请，logo设置，网络策略设置，描述等信息配置。可通过设置 process.env.NODE_ENV 启动develop 清单。
|   |- manifest.production.json // production 模式下清单配置
|- babel.config.js 
|- jsconfig.json 
|- package.json 
|- vue.config.json