初识谷歌chrome插件

谷歌插件想必各位都用过，使用广泛的vue-tools想必大家都不陌生吧，这就是谷歌插件。与其说是谷歌插件，倒不如说是浏览器插件，只是谷歌浏览器用的比较普遍罢了。所以这里就用谷歌插件代称吧。

1.何为插件

先来看下比较官方的定义：

谷歌插件（Google Chrome Extension）是一种可以在谷歌浏览器（Google Chrome）上安装和运行的软件程序。它们被设计为扩展浏览器的功能，提供额外的功能和定制化选项，以满足用户的特定需求。

谷歌插件可以用于增强浏览器的功能，改善用户的浏览体验，或提供特定的工具和服务。它们可以添加新的工具栏按钮、菜单选项，修改页面的外观和行为，或在浏览器中提供特定的功能，如广告拦截、密码管理、翻译、截图、网页注释等。

谷歌插件可以从谷歌浏览器的应用商店（Chrome Web Store）中下载和安装。用户可以根据自己的需求选择和安装插件，以扩展浏览器的功能和个性化设置。插件通常由开发者编写，并通过谷歌浏览器的开发者工具进行开发和发布。

谷歌插件的开发使用基于Web技术的标准技术，如HTML、CSS和JavaScript。开发者可以利用这些技术创建自己的插件，并通过谷歌浏览器的开发者工具进行测试和发布。

总之，谷歌插件是一种可以在谷歌浏览器上安装和运行的软件程序，用于扩展浏览器的功能和提供个性化的浏览体验。

压缩后的谷歌插件是crx后缀结尾的文件。未压缩的则是一些传统的html+js文件，当然还有它的核心maniftest.json。

2.本地运行一个插件

上面提到了谷歌插件的开发使用基于Web技术的标准技术，如HTML、CSS和JavaScript。那么作为前端开发人员，按理说做一个简单的插件不难。

这里推荐一个教程：2023金秋版：基于Vite4+Vue3的Chrome插件开发教程

git源码：vite-vue-crx-2023autumn: 基于Vite4+Vue3的Chrome插件开发教程

这里我本地运行了一下：（前端页面我随便改了一下，请忽视这些细节）

npm run dev 为运行命令，npm run build为打包命令，打包的public目录可以直接通过谷歌的浏览器加载已解压的插件，然后安装。自此，一个简单的插件就开发并安装到谷歌浏览器了。

3.总结

     谷歌插件的开发似乎用的都是前端知识，那么一个前端人员从零开始，就真的能开发一个自己想要的插件吗？这里有一个重要的概念。

Chrome浏览器插件(扩展)开发全攻略

这篇博文只是帮助你初识谷歌插件，如果真的敢兴趣。那你要学的还有很多呢~