皮皮网

1.探索chrome二进制大小的源码变迁和剪裁chromium的一些思路
2.2023金秋版：基于Vite4+Vue3的Chrome插件开发教程
3.手写一个简单的谷歌浏览器拓展插件（附github源码）
4.电脑中如何导出Chrome谷歌浏览器安装的扩展程序
5.chromium 源码编译

探索chrome二进制大小的变迁和剪裁chromium的一些思路

       研究chromium源码的价值不仅在于学习，还在于商业应用，源码但随着版本升级，源码cef的源码大小从MB增长至MB，对注重安装包大小的源码开发者来说，寻求减小chromium内核尺寸是源码赣南麻将源码一个挑战。本文通过对比历史版本，源码探究chrome二进制文件的源码变化，为裁剪chromium提供策略。源码

       首先，源码对比不同版本chrome的源码Windows 位安装包，发现从MB增长到MB，源码我们挑选了变化显著的源码包进行详细分析（红色箭头标出）。解压后，源码逐版本对比安装包内的源码文件大小变化，以及各文件占总大小的百分比变化。

       chrome.dll的体积持续增长，占总大小的比例也不断提升，但其他模块总体趋势向小型化发展。在chrome.dll模块分析中，发现至版本，chrome_child.dll的合并抑制了体积增长；至版本，notification_helper.exe等模块的合并导致显著增长。这说明模块合并对整体体积控制有积极作用，但同时也增加了去除特定功能的难度。

       特别指出，mfc内部源码3D模块的增长显著，删除支持3D相关的文件可减小MB。snapshot技术优化带来体积减少，部分隐藏在chrome.dll中。资源相关的文件体积明显减小，如icudtl.dat，可通过裁剪减少到几十KB。

       关于裁剪思路，虽然chromium编译中间产物有3w多个obj文件，但我们通过分析Top 文件，发现v8和third_party模块的体积较大。通过一级目录聚合，可以看出v8和third_party\blink的体积不容忽视。进一步细分，blink的core和bindings模块对二进制贡献较大，而v8的优化则需更细致的处理。

       特别值得关注的是，perfetto的trace_processor模块和pdfium、libjxl、dawn、webrtc等第三方库对体积影响较大。考虑使用V8的V8Lite模式和裁剪jit、wasm模块，能有效减少V8体积。然而，惠州麻将源码这些基于编译中间产物的分析可能与最终dll大小存在偏差，一般能减小-%的体积。

       总的来说，理解chromium源码和运行方式有助于优化，对开发者来说，这是一次从不同角度深入了解chromium的机会。欢迎交流和学习。

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

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

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

       以下为教程大纲，flask盗取源码强烈建议按照顺序学习，逐步深入理解整个插件的开发流程和细节。教程详细介绍了如何利用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作为框架，并指定JavaScript作为开发语言。

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

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

       配置dev环境的ps源码分享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

       更多精品阅读

手写一个简单的谷歌浏览器拓展插件（附github源码）

       手写谷歌浏览器插件教程：简易实现与代码详解

       首先，让我们通过一个直观的示例来启动创建过程。点击浏览器地址栏输入 chrome://extensions/，即可直接访问扩展程序管理界面。

       核心配置文件是 manifest.json，这个文件记录了插件的基本信息，如名称、描述、权限等，是插件身份的身份证。

       当插件被激活时，用户会看到一个弹出层，这是通过编写 popup.html 来实现的，它包含了一个简单的HTML界面，用于交互或显示信息。

       为了保持代码的清晰，我们把相关的脚本逻辑分离到单独的 popup.js 文件中，这样也支持使用 script 标签直接嵌入。在该文件中，我们将实现插件的核心功能。

       此外，我们还需要一个辅助文件 inject.js，它的任务是将特定的代码注入到目标网页，实现所需功能，如上图所示。

       整个项目的目录结构清晰可见，便于管理和维护。但这里只是基础部分，更多功能的实现和优化将在后续篇章中详细介绍。

电脑中如何导出Chrome谷歌浏览器安装的扩展程序

       要导出Chrome浏览器安装的扩展程序并生成相关文章，可以按照以下步骤进行：

       1. 打开Chrome浏览器并点击右上角的菜单按钮（三个竖点）。

       2. 选择“更多工具”>“扩展程序”。

       3. 在扩展程序页面，找到要导出的扩展程序，并记下其ID（每个扩展程序都有一个唯一的ID）。

       4. 在Chrome浏览器的地址栏中输入以下URL：

        chrome://extensions/?id=扩展程序ID

        （将“扩展程序ID”替换为要导出的扩展程序的实际ID）

       5. 打开该URL后，将显示扩展程序的详细信息页面。

       6. 在详细信息页面上，找到“源代码”部分，并点击“查看源代码”链接。

       7. 这将打开一个新的标签页，显示扩展程序的源代码。

       8. 在源代码页面上，使用浏览器的页面另存为功能（通常是右键单击页面并选择“另存为”）将源代码保存为文本文件。

       保存为文本文件后，你可以使用任何文本编辑器打开这个文件，并在其中生成相关文章。源代码通常包含扩展程序的HTML、CSS、Javascript等内容，你可以根据需要提取相关信息并生成文章。

chromium 源码编译

       深入探索 Chromium 源码编译的全过程，从理解 Chrome 浏览器与 Chromium 项目的关联，到分析浏览器源码在 Android 系统中的应用，揭示了 Chromium 不仅是浏览器内核，更是一个大型 C++ 项目的典型案例。

       阅读官方文档是学习和编译 Chromium 源码的基础，文档对于编译流程提供了详细的指引，但实际操作中仍可能出现诸多挑战。为了确保编译环境的一致性和复现性，使用 Docker 构建环境成为一种可行的选择。官方文档虽未明确推荐特定版本的 Ubuntu Docker，作者选择使用 . 版本，但在后续的实践过程中发现，这并非最佳选项。

       编译 Chromium 源码的准备工作涉及一系列依赖包的安装，包括 Git、Python、wget 等。面对网络不稳定或下载速度慢的问题，建议采用梯子辅助，确保下载过程顺畅。在编译过程中，网络中断时可重复执行相关命令直至代码下载完成。当遇到编译失败时，需要对错误信息进行细致分析，以便解决问题。

       编译 Chromium 源码时，编码问题和版本兼容性是常见的挑战。对于编码问题，修改默认的字符集设置（例如使用 UTF-8）可有效解决。数据类模块（dataclasses）的缺失则要求升级 Python 版本或安装相应的库。在进行编译时，了解依赖库的信息，如使用 ldd 命令检查库的存在与否，有助于解决相关问题。

       在编译过程中，可能遇到 位库缺失和运行时依赖库未安装的情况。针对这些问题，通过安装对应库（如 libnss3）可解决依赖不足的问题。此外，确保在编译时选用适当的架构（如 x）和合适的包名对于兼容性至关重要。

       编译完成的 Chromium 源码需要通过 adb（Android Debug Bridge）工具与 Android 设备进行交互。在使用 Docker 环境时，adb 的可用性是一个挑战，可以参考特定指南解决该问题。确保虚拟机以可写模式启动，并遵循官方文档的步骤进行预安装 webview 的移除和重新安装，以适应编译后的 webview 版本。

       在编译后，可以将 Chromium 作为本地浏览器使用，或通过编译生成的 shell 功能在特定场景下应用。对于有志于深入研究和优化 Chromium 源码的开发者，了解如何在设备端部署和运行编译后的 webview，以及掌握一些调试技巧，将有助于进一步提升项目性能和用户体验。