# 【开发者自荐】PagePatch：按 URL 规则注入自定义 CSS 与 JavaScript

**URL:** <https://meta.appinn.net/t/topic/88398>\
**Category:** 发现频道\
**Tags:** chrome\
**Created:** [2026 年7 月 18 日 01:42 UTC](https://meta.appinn.net/t/topic/88398 "2026-07-18T01:42:37Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![shoyuf](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/shoyuf/32/73565_2.png) [@shoyuf](https://meta.appinn.net/u/shoyuf)\
发布日期： [2026 年7 月 18 日 01:42 UTC](https://meta.appinn.net/t/topic/88398/1 "2026-07-18T01:42:37Z")

</div>

| 项目 | 信息 |
| --- | --- |
| 软件名称 | PagePatch — Custom CSS & JS |
| 应用平台 | Google Chrome 135 或更高版本 |
| 推荐类型 | 【开发者自荐】 |
| 是否收费 | 免费，源代码公开 |
| 一句简介 | 按 URL 规则，为指定网页加载自定义 CSS 和 JavaScript。 |

## 为什么做 PagePatch

平时会用自定义 CSS 清理网页上的广告、浮层和不需要的模块，也会偶尔加一点 JavaScript 改善操作。

现有工具各有所长：  
[Stylus](https://add0n.com/stylus.html) 是很成熟的用户样式管理器，但主要解决 CSS  
[Stylish](https://userstyles.org/) 有方便的主题库，但同样以样式为主  
[Custom Style Script](https://chromewebstore.google.com/detail/custom-style-script/ecjfaoeopefafjpdgnfcjnhinpbldjij) 同时支持 CSS 和 JavaScript，不过设置页偏工具化，规则多起来后不太容易整理。

我还遇到过一个比较具体的使用场景：有些广告很多的网页，关闭该站点的 JavaScript 后反而更适合阅读，但 Custom Style Script 的 CSS 代码和 CSS 链接也可能因此无法载入。它的 CSS 注入实际上依赖在页面的 JavaScript 主环境中执行一段函数；PagePatch 则把 CSS 与 JavaScript 分开处理，内联 CSS 直接通过 Chrome 的样式注入接口应用，CSS 不依赖网页自身的 JavaScript 是否开启。

于是我写了 PagePatch，希望它保持简单，同时把规则管理、权限范围和界面体验做得更清楚一些。

## 主要功能

- 使用标准 Chrome Match Pattern 匹配网页，例如 `https://example.com/*` 或 `*://*.example.com/*`。
- 每条规则可以组合多个远程 CSS 链接、内联 CSS、远程 JavaScript 链接和内联 JavaScript。
- CSS、JavaScript 链接均按列表顺序处理；单个远程 JavaScript 加载失败不会阻止后续脚本。
- 每条规则可以单独启用或停用，也可以按规则名称、页面 URL 或资源 URL 搜索。
- 支持 SPA 地址变化，不必完整刷新页面即可重新匹配规则。
- JavaScript 可按规则选择 Chrome 隔离的 `USER_SCRIPT` 环境，或与网页共享状态的 `MAIN` 环境。
- Options 页面支持 `Command+S` / `Ctrl+S` 快捷键保存。
- 规则、语言和主题偏好保存在本地。

## 与几款常用工具的区别

| 工具 | 更适合的用途 | JavaScript | 权限与隐私 |
| --- | --- | --- | --- |
| **PagePatch** | 同一套规则中组合 CSS 与 JS、加载远程资源 | 支持，可选隔离环境或页面环境 | 商店声明不收集数据；仅为匹配页面和远程 JS 来源 **按需** 申请站点权限 |
| [Stylus](https://add0n.com/stylus.html) | 管理大量用户样式，使用成熟的样式编辑器和社区样式 | 不支持 | 商店声明不收集数据；由于需要在网页上应用样式，站点访问范围较广 |
| [Stylish\*](https://userstyles.org/) | 从主题库中查找并安装现成主题 | 不支持 | Chrome 商店目前披露会收集“网页浏览记录”，扩展介绍称可在设置中关闭自动数据收集 |
| [Custom Style Script](https://chromewebstore.google.com/detail/custom-style-script/ecjfaoeopefafjpdgnfcjnhinpbldjij) | 为网页快速添加 CSS 与 JS | 支持 | 商店声明不收集数据；但默认申请 `<all_urls>`，并在所有页面及 iframe 运行内容脚本 |

\*Stylish 还有一段广为流传的隐私争议。2018 年，安全研究者 Robert Heaton [披露 Stylish 会将用户访问的网址连同唯一标识符发送至服务器](https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/)，随后 Chrome 和 Firefox 商店一度将其下架。这是历史事件，不代表当前版本仍以当时完全相同的方式工作；不过截至本文发布时，Chrome 商店的隐私信息仍明确列出了“网页浏览记录”，扩展介绍也写明自动数据收集可以在设置页关闭。对隐私敏感的用户需要自行权衡。

## 使用方法

1. 从 Chrome 应用商店安装 PagePatch。
2. 点击浏览器工具栏中的 PagePatch 图标，打开设置页。
3. 点击左侧规则列表旁的 `+`，填写页面匹配规则，例如 `https://example.com/*`。
4. 按需要添加 CSS 链接、自定义 CSS、JS 链接或自定义 JS。
5. 如使用 JavaScript，可选择默认的隔离环境，或切换到页面环境；只应在页面环境中运行可信代码。
6. 保存规则，并允许 Chrome 请求的对应站点权限。

Chrome 138 或更高版本如果要运行 JavaScript 规则，还需要进入扩展详情页，开启“允许用户脚本”。只使用 CSS 时不需要这一步。

## 截图预览

 ![PagePatch 选项页面](https://h2cdn.appinn.me/original/3X/f/3/f348d77aafe18fd37b5f2d24d128fbc146d43a24.png)

## 下载与项目地址

- **Chrome 应用商店：** [PagePatch — Custom CSS & JS](https://chromewebstore.google.com/detail/pagepatch-%E2%80%94-custom-css-js/fnoilnaofncfimhjfhokhdehlooiijei)
- **GitHub 仓库：** [maybeLab/PagePatch](https://github.com/maybeLab/PagePatch)
- **问题反馈：** [GitHub Issues](https://github.com/maybeLab/PagePatch/issues)

## 后续计划

- 支持将规则应用到页面中的 iframe。

## 目前的限制

- 不能修改 `chrome://` 页面、Chrome 应用商店等受保护页面。
- 停用规则会立即移除 CSS，但 JavaScript 已经造成的页面变化通常需要刷新后才能完全恢复。
- 远程 JavaScript 按经典用户脚本运行，不支持相对模块导入。

项目刚刚发布，欢迎通过 [GitHub Issues](https://github.com/maybeLab/PagePatch/issues) 反馈实际网页中的兼容性问题和使用建议。