前言在此之前，通过 Browser Extension Dev - 02. 使用 WXT 我们已经了解了扩展的基本结构和 WXT 的使用，下面我们将进一步演示如何在网页中注入复杂的 UI，使用 React、Tailwind CSS、shadcn、或任何需要的 npm 包是怎么做的。 你可能有几个问题 如果网站也使用了 Tailwind CSS，扩展重复使用不会导致样式冲突吗？ React 之类的

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

背景最近因为多邻国 App 的 Bug，我正在考虑切换到 Web 版本。但没想到移动端 Web 版本体验那么差，每次打开首页都会弹出 App 下载推广，这真的太烦人了。我第一时间就想去写个 UserScript 彻底删除它，但没想到还碰到一些有趣的问题。 分析从 DevTools > Elements 中很容易就找到了弹窗元素的稳定选择器。 1#overlays:has([href*="a

你是否曾经对某个网页的功能感到不满？比如 Google 搜索页面上那个显眼的 AI Mode 按钮: 通过浏览器扩展,你可以让它彻底消失: 什么是浏览器扩展？一般而言，浏览器扩展是一种修改用户浏览网页的方式，它赋予了网站使用者而不是开发者更多的权限。让有能力的用户可以自定义它们的网页浏览体验，现代浏览器提供了极其丰富的扩展 API，甚至能实现一些看起来需要 app 才能做到的事情，但它的基本出

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

背景今年以来，吾辈开始发布一些 Safari 扩展程序到 AppStore 中，由于吾辈并不使用 iPhone，所以仅发布了 Mac 版本。而这个月吾辈开始实践全平台浏览器扩展的开发，即为所有主流的桌面浏览器（Chrome/Safari/Edge/Firefox）和所有支持扩展的移动端浏览器（Kiwi/Edge/Safari/Firefox）发布相同的插件，这让吾辈将发布 iOS Safari 扩

场景换了 m2 macbook，作为一个 windows 长期使用者，截止目前为止遇到了很多问题和疑惑，有些解决了，有些目前仍未找到解决方法，在此记录和分享。 另外还写过两篇关于 Windows 的 Windows 上的工具清单 Windows 使用技巧 系统如何添加字体之前日常的字体为更纱黑体，它并不出色，但主要优势是以统一的风格支持简繁日英四种语言。基本步骤和 windows 类似，下

场景最近写了几个前后端都包含的应用，从最初的 Next.js 到后来的 SvelteKit，再到 Tanstack Router，终究不如熟悉的 Hono 框架那么好使。所有的 Web 元框架都在尝试将服务端加入到框架中，但没有一个做的足够好。例如 Cloudflare 上包含许多官方服务，作为一个服务端框架，Hono 的集成做的很棒，但 Web 元框架并非如此。 为什么使用 Hono为什么 We

场景现在无论是创建什么东西，都需要一个图标。吾辈尝试过的有 PC/Mobile 应用、VSCode/Chrome 插件、甚至各种开发者相关的库或者工具。而作为没有太多绘画能力的开发者，ChatGPT 内置集成的 DALL·E 非常好用，可以用来生成需要的图片，即便存在道德限制 – 但这不是这里要讨论的问题，它也不会影响创建需要的图标。 使用 ChatGPT 生成 目前，只有订阅了 ChatGPT

背景由于吾辈之前使用的一个域名即将到期，需要将 IndexedDB 数据迁移到新的域名，因此这两天创建了一个新的浏览器扩展 IDBPort，用于迁移 IndexedDB 数据到其他域名。而在迁移数据时，需要将数据导出为并下载到本地，然后导入到新的域名。由于数据量较多，同时包含一些图像之类的二进制数据，所以需要使用流式写入的方式来避免内存占用过高。 首先，Web 中有什么 Target 可以流式写入

前言六月初有个去新疆自驾的机会，于是便和新一开始了二刷新疆之旅。大致路线定的是南疆环线，由于距离霍尔果斯口岸很近，所以也顺便出国去哈萨克斯坦看了看。这次的旅行体验比上次报团要好得多，主要是单个地点好玩的话可以多玩会而不再卡时间了。 赛里木湖首先第一站前往了赛里木湖，中间由于路途太远，所以在精河县暂住一晚，第二天继续前往赛里木湖。 首先去游客中心买票，确认了自驾是每个人 140，人车合一而非车单独

背景最近重构了个人主站，添加了作品集和博客部分，它们都使用 markdown 来编写内容。而直接引入 react-markdown [1] 组件在运行时编译 markdown 不仅成本较高，要添加一系列的 unified 依赖来进行编译 markdown，还要引入相当大的 shikijs [2] 来实现代码高亮。经过一些快速测试，打算尝试使用预编译 markdown 为 html 的方式来解决这个