1.2023金秋版：基于Vite4+Vue3的源源码Chrome插件开发教程
2.谷歌应用程序商店访问不了怎么办？
3.如何安装谷歌Chrome浏览器插件?
4.推荐几个可以提升工作效率的 Chrome 插件
5.crx是什么文件？如何正确地安装到浏览器中
6.Tampermonkey油猴插件——安装与使用教程

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

       Chrome浏览器插件（Chrome Extension，简称CRX）的源源码开发已经进入了新阶段，官方已通知从年6月起不再接受Manifest V2版本的源源码插件发布，并计划在年全面下架。源源码因此，源源码本系列教程将仅关注于最新版本的源源码shadowsocks 源码分析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版本在.+或更高，物业管理 bs 源码以兼容模板需求。通过命令行操作创建项目，选择Vue作为框架，并指定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文件。

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

       针对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

       更多精品阅读

谷歌应用程序商店访问不了怎么办？

       当谷歌应用程序商店在国内无法访问时，别担心，可以通过一些技巧将浏览器的应用插件迁移到Chrome。首先，从急速版浏览器的应用商城找到你想使用的插件，如"屏幕截图"，记下其版本号。然后右键点击网页，选择"审查元素"查看源代码，通过Ctrl+F搜索版本号找到下载链接，通常是"*.crx"格式。

       将链接复制到浏览器，下载插件后，将".crx"后缀改为常见压缩文件格式，并英文命名以避免安装问题。接下来，解压缩文件，仿京东商城源码下载进入Chrome的扩展程序管理页面。在"开发人员模式"下，点击"加载正在开发的扩展程序"，选择刚刚解压的文件夹并点击"添加"，完成迁移。

       这个过程的关键在于识别和迁移插件源文件，因为浏览器基于Chrome的核心，所以这种迁移是可行的。总的来说，虽然不能直接访问谷歌应用商店，但通过一些技巧，我们可以让的插件在Chrome中运行。

如何安装谷歌Chrome浏览器插件?

       我们知道在国内是无法顺畅访问谷歌应用程序商店，也就是谷歌Chrome浏览器插件商店，在谷歌浏览器应用商店里面的很多应用程序都是无法下载安装的？那么在不**的情况下，如何安装谷歌Chrome浏览器插件？

解决思路：

         由于目前国内存在很大一部分浏览器是基于谷歌Chromium（Chrome的核心）的基础上研发出来的，从原理上讲它们之间的扩展程序也是可以通用的。只是因为各种原因，企业并不允许自己的应用插件安装到其他浏览器，但是用户的智慧是无穷的，既然从本质上国内很多浏览器插件可以移植到谷歌Chrome浏览器，我们稍微改动下即可。考虑到浏览器使用人数较多，我们就介绍下移植极速版浏览器应用插件到谷歌浏览器

应用插件安装Chrome浏览器详细教程：

         1、首先进入急速浏览器的应用商城页面，通过搜索等方式找到想要移植的功能扩展后，记下这个功能扩展当前的版本号。比如我们这里以“屏幕截图”这个扩展为例，它当前的版本号就为1.0.0.

       2、在网页任意一位置点击右键，选择“审查元素”按钮，该操作是查看该网页的源代码

       3、按下快捷键Ctrl+F，模拟考试源码在当前页面开启搜索功能，在审查元素页面会出现一个搜索框，将前面复制下的版本号粘贴进搜索框，即可看到搜索框后面有“1 of 4”这样的提示，点击其后的上或下箭头进行操作，很快就可以找到一个类似“/ext/扩展名.crx”格式的链接。

       4、将这个扩展链接地址复制到浏览器地址栏后按下回车键，手动过奖该扩展程序插件下载到本地

       5、下载到的文件后缀名由*.crx，改成一个常见的压缩文件的后缀，同时将文件更改为英文名称以防安装过程出现错误。

       6、将重新命名的压缩文件进行解压操作，

       7、点击谷歌浏览器右上角的自定义按钮，在弹出的菜单中依次选择“工具”中的“扩展程序”命令，打开扩展程序的管理页面。

       8、选中管理页面右上方的“开发人员模式”复选框，然后点击左上方的“加载正在开发的扩展程序”按钮，开始载入已经解压缩的文件。

       9、弹出的窗口列表中选中刚刚解压出来的文件夹，在弹出提示窗口中点击“添加”按钮，完成极速版浏览器插件的移植工作。

       总结：整个移植过程比较简单，主要就是下载极速版应用商店插件的源文件，然后更名，改为ZIP压缩文件后解压缩，使用谷歌浏览器开发模式手动安装本地应用程序插件。正是应为极速版是基于谷歌Chromium核心开发，所以两者移植才成为可能。

推荐几个可以提升工作效率的 Chrome 插件

       在众多浏览器中，Chrome 继续占据着主导地位，其市场份额高达 % 以上，并且持续增长。作为一款响应速度快、支持各种插件且兼容性好的浏览器，Chrome 已经成为许多开发者和用户的首选。

       为了提高开发效率，本文向开发者推荐了几个 Chrome 插件，它们能极大提升编程体验。下面是一些推荐的插件及其功能：

       1. GitHub Awesome Autocomplete：在 GitHub 搜索项目时，只需在搜索框输入关键词，此插件即可弹出动态显示的搜索结果列表，用户只需点击即可快速获取所需信息，大大节省了操作时间。

       2. Octotree：当查看 GitHub 上的代码时，用户可以使用此插件在浏览器侧边栏直接生成项目目录结构，方便用户在目录间切换，提高浏览效率。

       3. GitZip for GitHub：在下载 GitHub 上的项目时，此插件允许用户仅下载需要的文件，而非整个项目，有效节省了下载时间。

       4. 掘金：掘金 Chrome 插件专为开发者、设计师和产品经理设计，能快速筛选优质内容，节省了筛选成本，提高了工作效率。

       5. Json-Handle：在查看 JSON 格式的 API 响应时，此插件能自动整理 JSON 数据，使数据结构更加清晰，方便用户阅读和理解。

       6. Android SDK Search：此插件为 Android 开发者提供快速查看 Android SDK 的功能，并提供源码入口，大大提高开发效率。

       7. Scrcpy：作为 Vysor 的替代品，Scrcpy 是 Genymotion 的开源项目，提供无码率限制、无广告的免费 Android 投屏服务，支持全平台。

       以上推荐的插件和工具数量虽少，但功能实用，对提高开发效率有着显著作用。如果您还没有尝试过这些插件，请考虑安装使用。关于如何安装插件，如果能打开 Chrome 应用商店，只需在搜索框输入插件名称并点击「添加至 Chrome」即可完成安装。如果需要离线安装，将插件安装包的后缀从 .crx 改为 .rar 格式，解压后通过「加载已解压的扩展程序」功能安装。

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工具安装。常用的一些浏览器工具，在浏览器应用商店中都可以找到，具体的就不在这里罗列了。有需要的小伙伴可以到应用商店中搜索查找一下。对应的功能，安装对应的工具即可。

Tampermonkey油猴插件——安装与使用教程

       大家好，今天鲸落将为你揭示Tampermonkey（油猴）插件的安装与使用步骤，提升你的浏览器体验。

       在众多浏览器扩展中，Tampermonkey，中文名油猴，作为一款用户脚本管理器，通过运行社区编写的JavaScript代码，为网页浏览带来个性化改变。它本身不具备功能，而是依赖于用户下载的扩展脚本来实现各种功能增强。

       安装步骤如下：

       推荐使用Microsoft Edge，可在浏览器的扩展商店直接搜索并安装。如果使用其他浏览器，可能需要科学上网访问Chrome网上应用店，或者在浏览器扩展市场下载。

       非Edge浏览器，可下载CRX文件，进入浏览器设置的扩展程序页面，将文件拖入并确认安装。

       安装成功后，右上角会出现油猴图标。接着，通过油猴插件添加新脚本，或者从官方推荐的 GreasyFork市场获取现成脚本。以 "AC-baidu-重定向优化" 为例，选择并安装后，可以在管理面板中查看和管理已安装的脚本。

       使用脚本后，可以明显看到页面的优化效果，如减少垃圾信息，提升阅读体验。不过，务必注意脚本的安全性，避免恶意脚本侵犯隐私。在安装前，检查脚本源码或查看用户评论，确保其安全可靠。

       最后，油猴还提供了云备份和本地压缩包备份功能，方便在更换电脑或重装浏览器时快速恢复脚本设置。记住，保护个人信息始终是关键，祝你使用愉快！