1.2023金秋版：基于Vite4+Vue3的成源Chrome插件开发教程
2.crx是什么文件？如何正确地安装到浏览器中
3.谷歌浏览器乱码怎么解决

2023金秋版：基于Vite4+Vue3的Chrome插件开发教程

       Chrome浏览器插件（Chrome Extension，简称CRX）的源码开发已经进入了新阶段，官方已通知从年6月起不再接受Manifest V2版本的成源插件发布，并计划在年全面下架。源码因此，成源本系列教程将仅关注于最新版本的源码拍宝源码Manifest V3（简称MV3）规范，帮助开发者快速掌握新规范并开发出安全、成源高效且符合隐私保护要求的源码插件。

       基于React栈的成源开发教程于年8月日发布后，收到了不少反馈，源码特别是成源关于Vue版本的需求。鉴于此，源码我决定同步新增基于Vite4+Vue3的成源Chrome插件开发教程，旨在通过清晰、源码简洁的成源步骤帮助开发者快速上手，省去摸索时间，确保项目开发过程顺利且高效。

       以下为教程大纲，强烈建议按照顺序学习，蓝灯 源码逐步深入理解整个插件的开发流程和细节。教程详细介绍了如何利用Vite4和Vue3构建一个功能完整的Chrome插件。

       目录

       请订阅公众号卧梅又闻花获取完整教程。

       本Demo主要依赖包版本

       Node.js ..1 vite 4.4.9 vue 3.3.4 vue-router 4.2.4 element-plus 2.3.9 mockjs 1.1.0 mockjs-fetch 2.2.0 less 4.2.0 sass 1..1 stylus 0..0

       为什么没有使用CRXJS

       尽管CRXJS是一个在技术社区中较为流行的Vite插件，但本教程选择不使用它，主要基于以下原因：

       CRXJS的最新版本仅支持Vite3，而2.0版本长期处于Beta阶段，更新频率不高。

       项目的核心功能应基于官方推荐的产品，确保稳定性与支持。在官方架构的基础上进行改造，能更深入掌握核心技术。

       依赖外部产品会增加学习成本和维护成本。

       初始化项目

       使用Vite4创建项目，确保Node.js版本在.+或更高，以兼容模板需求。通过命令行操作创建项目，选择Vue作为框架，fscanf源码并指定JavaScript作为开发语言。

       配置国内镜像源以提高下载速度和稳定性，对于npm和yarn分别进行设置。

       安装Sass/Scss/Less/Stylus支持，为CSS预处理语言做好准备。

       配置dev环境的Server端口号，修改vite.config.js文件以适应其他端口需求，如端口。

       自动打开浏览器功能的配置，同样在vite.config.js中进行。

       设置路径别名，优化引入代码路径。

       Chrome Extension基础

       基于MV3规范的Chrome插件开发，包括服务工作者（Service Workers）的使用、网络请求调整、远程资源访问限制、Promise的使用等新特性。

       Chrome插件的源码金刚组成包括manifest.json、popup页面、content script、background script等核心组件。

       规划build生成的目录结构，确保各部分文件的清晰隔离与管理。

       项目目录结构设计

       采用清晰的目录结构设计，将background script、content script、popup分别建立独立的目录，便于维护。

       特别说明：content script在目标页面上执行，无需router和pages目录，而popup页面则可以按照常规React项目设定目录。

       考虑到Vite脚手架在src目录中使用jsx文件，不推荐并无需修改js文件的加载方式。在src目录之外可以使用js文件。

       接下来，按照设计的pyramid 源码目录结构开始构建项目。

       针对Chrome Extension的Vite配置

       配置Vite以满足Chrome Extension的规范要求，包括popup、content script、background script的build过程，确保资源的有效组织与优化。

       针对popup项目的build配置，进行详细的设置。

       后续精彩章节阅读完整版

       完整教程可订阅公众号卧梅又闻花获取。

       项目Git源码已上传至Gitee和GitHub，欢迎下载使用。

       Gitee: gitee.com/betaq/vite-vue-crx

       GitHub: github.com/Yuezi/vite-vue-crx

       更多精品阅读

crx是什么文件？如何正确地安装到浏览器中

       最近，工作的时候需要对网站的页面进行一定的改版，于是很多参数代码就需要调整。我从网上查询了一下大神的修改建议。还有一些代码片段，想复制下来，但是一时间无法从网页上直接进行代码复制。我又懒得去网页源代码中一点一点的找。于是从网上找了一个点.crx的浏览器小工具，将这个CRX小工具安装到浏览器上，就可以灵活的提取我们需要的内容了。当然还有一些五花八门的CRX工具文件，你可以根据自己的需要进行对应的工具安装。从而实现不同的浏览器功能。如果你还没有使用过CRX类型的浏览器工具，那么接下来我就简单的介绍一下，关于CRX浏览器工具的安装使用方法。

       crx文件是做什么的？

       CRX文件是Google Chrome浏览器的扩展程序文件。CRX文件包含了浏览器扩展程序所需的所有文件，可以通过Chrome浏览器的扩展程序页面进行安装。CRX文件可以增强浏览器的功能，比如添加新的工具栏或改变网页的外观。

       浏览器安装crx文件安全吗？

       安装CRX文件作为浏览器扩展程序是安全的，但是需要确保安装的CRX文件是从安全的渠道获得的，并且满足浏览器的安全要求。有时候，第三方的CRX文件可能带有恶意软件，如果安装了这些文件，可能会导致安全问题。因此，安装CRX文件时，应当从官方或可信任的渠道获取文件，并确保满足安全要求。

       要安装CRX文件到Chrome浏览器中，需要以下步骤：

       打开Chrome浏览器，在地址栏中输入 chrome://extensions/ 并回车。在扩展程序页面中，打开右上角的"开发者模式"。点击"加载已解压的扩展程序"，然后选择需要安装的.crx文件确认安装，Chrome浏览器就会安装该扩展程序。安装完成后，新的扩展程序就会出现在扩展程序页面中。

       注意：安装的扩展程序需要符合Chrome浏览器的安全要求，否则可能无法安装或会导致问题。

       另外我测试了一下，像浏览器之类的浏览器也可以进行CRX文件安装，只需要打开浏览器，然后把需要安装的CRX文件拖入到浏览器中，就可以正常的进行安装了。Chrome浏览器却不可以，需要按照上面的Chrome浏览器CRX安装步骤进行，开启开发者模式，才能进行CRX工具安装。常用的一些浏览器工具，在浏览器应用商店中都可以找到，具体的就不在这里罗列了。有需要的小伙伴可以到应用商店中搜索查找一下。对应的功能，安装对应的工具即可。

谷歌浏览器乱码怎么解决

       解决谷歌浏览器乱码问题，需要关注网页编码设置。当遇到乱码情况，首先要通过F打开浏览器控制台，查看文档的编码方式。确保网页源码编码与文档显示的编码一致。

       若编码不一致，需要通过安装名为Charset的扩展程序来解决。下载Charset扩展程序后，先将压缩包文件重命名为zip格式，再解压，找到crx后缀的文件进行安装。安装时，进入浏览器扩展程序页面，开启开发者模式，加载已解压的扩展程序。

       安装完毕后，Chrome浏览器会显示Charset插件图标。点击该图标即可手动修改当前网页的编码，选择GBK、GB、UTF-8等格式进行切换。操作步骤清晰明了，对于解决谷歌浏览器网页乱码问题提供了有效方法。

       总结而言，解决谷歌浏览器乱码的关键在于确认并调整网页编码设置。通过简单的操作步骤，如检查编码、安装扩展程序、修改编码，便能有效解决乱码问题，确保浏览体验流畅。希望以上信息能为遇到此问题的用户提供帮助。