前言自去年年底去过一次之后，我就喜欢上了在海岛上旅行的感觉，相比于大陆近岸的海水，海岛周围的颜色透着一种天空的蓝。 环岛徒步这次旅行又走了一圈环岛徒步，只花了不到 3 个小时，比上次要快得多。 碧蓝之海，启动！ 远方还能看到几艘渔船。 靠近岸边的海水反而泛着一些浅绿色。 顺时针走到大约 1/4 的地方，可以看到一个废弃的村庄，似乎目前只然有一些海防人员在此居住。 回头望去，几座岛屿在海平线的地方

前言在此之前的基础教程系列中，为了演示创建了多个 Chrome 扩展程序，它们通常都比较简单。所以在本章，我将说明扩展之外另一种允许用户修改网页的标准：User Script，它的基本思路非常简单，向用户浏览的网站注入自定义的一个脚本片段。但与扩展不同，使用 User Script 通常需要安装一个脚本管理器，例如 Tampermonkey：适用性广泛，支持 Chrome/Firefox/Saf

回来一个星期了，才开始动笔写新加坡和越南的旅行。相比于呆了 24 天的马来西亚，新加坡和越南都只呆了 3 天，尤其是因为越南航空晚点 16 个小时，导致越南之行实际上只有 2 天时间，非常匆忙。 新加坡从新山走陆路口岸通过，如预料之中，新加坡的电子化极其发达，包括海关都是直接刷护照即可自动通关，完全没有人工环节。公交或地铁也都可以直接刷 Visa 卡，尽管国内的 Visa 双币卡在国外就是废物一条

自从之前的亚庇之行结束后，我就出发前往了仙本那。那是一个很小的小镇，基础设施极其糟糕，而且总体上似乎相当贫困，路边经常看到乞讨者，小孩子围着人转希望给她们钱的例子屡见不鲜。海洋看起来相当不错，但烈日极其毒辣，我刚到的第三天就已经被晒脱皮了，不过似乎主要活动是潜水，如果不喜欢它，可能也不太值得待太长时间。之后前往了新山，临近新加坡的第二大都市圈，但对我而言过于熟悉了，所以呆的两天基本没出去，尤其是第

前言在春节之后，我来到了马来西亚旅行。这是我出国旅行的第三个国家。在此之前，我曾经在日本呆了半年，在关西走了一些地方，回国后又花了几个月的时间走完了整个中国的所有省份和直辖市，所以某种程度上我的阈值确实提高了。因此，直到目前为止，马来西亚给我的体验，可以用一个字来形容：烂。 吉隆坡落地首先到了吉隆坡，基建水平还行，但室内导航很困难，而且售票机只收取小额纸币导致我一度没有零钱可用，直到后面办了一张

背景在为 Chrome 开发了一个扩展程序之后，接下来就是移植到其他浏览器中了，而 Firefox 一般认为是首要选择，它们都使用类似的 Browser Extension API 接口，所以这应该非常简单，对吧？不，Firefox 有很多微妙的长期问题，如果你遇到了，可能会变得非常棘手，下面是一些吾辈在移植扩展到 Firefox 中已经发现的问题。 CSP 问题CSP 在 Firefox 扩展中

前言在之前的 7 篇博客中，我们依次了解了一些扩展开发中的基本概念，并且每一篇都附上了一个扩展示例。现在，我们终于要演示如何发布扩展了。下面我们将演示如何将之前做的自动冻结不活跃标签页的那个扩展发布到 Chrome Web Store 中，还记得吗？就是我们在 Browser Extension Dev - 04. Background Script 和 Browser Extension Dev

前言在上一章 Browser Extension Dev - 06. Inject Script on Demand 中，我们介绍了按需为网页注入脚本执行自定义的功能，还实现了一个简单的复制网页主要内容为 Markdown 的扩展。在这一章中，我们将继续实现一个 Popup 弹窗，用于显示页面主要内容转换得到的 Markdown，并支持在复制之前进行预览和编辑。 首先，需要明确 Popup 是什么

前言在上一章 Browser Extension Dev - 05. Storage and Configuration 中，我们介绍了为扩展添加设置页面并使用 Storage API 保存和读取配置的功能。在这一章，我们将介绍按需注入脚本。这种方式完全不会拖慢网站运行速度，同时在 Chrome Web Store 安装时不会有任何安全警告提示。接下来我们将实现一个扩展：点击图标即可将网页主要内容

前言在上一章 Browser Extension Dev - 04. Background Script 中，我介绍了 Background Script 的概念和使用场景，并实现了一个自动休眠不活跃标签页的扩展。在本章，我将介绍如何在扩展中存储数据和配置选项，并提供一个配置页面来访问它。 Storage API（概念）浏览器为扩展提供了 browser.storage API，允许存储 kv 数

前言在上一章 Browser Extension Dev - 03. 注入 UI 中，我介绍了如何向网页中注入自定义的 UI，同时还了解了如何使用 Shadow DOM、Tailwind CSS 和使用 npm 包。在本章，我将介绍 Background Script，这是扩展的核心元素之一。 首先，什么是 Background Script？ 顾名思义，这是扩展可以在后台运行的脚本，与注入到网页

什么是 WXT？ 在第一章 Browser Extension Dev - 1. 介绍基本概念 里面，我使用了原始的 JavaScript 实现了一个简单的 Chrome 扩展。现在，我将使用 WXT 重写扩展。那么问题是：什么是 WXT？简单来说，WXT 是用于浏览器扩展的开发框架，就像 Vite 是用于 Web 开发的流行框架一样。实际上，WXT 是基于 Vite 实现的，所以它也可以使用 V