背景

在 OBS 中使用浏览器源加载网页（如弹幕姬、通知栏等）时，常常遇到样式无法自定义的问题。尝试通过注入 CSS 或使用 JS 动态控制，效果并不理想。即使搭建了本地代理服务器，也会因为资源加载顺序、CSP 限制、动态 CSS 插入等问题导致失败。

为了解决这个问题，我找到了一个名为 forward 的工具。它允许通过 --overwrite 参数，精确覆盖页面加载过程中的任意资源文件，从而实现对页面样式的控制。

更重要的是，forward 提供了适用于 Windows 的二进制可执行文件，无需安装 Go 环境，直接下载即可使用。

初始尝试

最初，我尝试使用 Node.js 编写一个代理服务器，注入自定义样式。代码如下：

const express = require('express');
const app = express();

app.use('/', async (req, res) => {
    const url = 'https://目标地址.com' + req.originalUrl;
    const method = req.method;
    const headers = { ...req.headers, host: undefined };

    const proxyRes = await fetch(url, {
        method,
        headers,
        body: ['GET', 'HEAD'].includes(method) ? undefined : req
    });

    let contentType = proxyRes.headers.get('content-type');
    let body = await proxyRes.text();

    if (contentType && contentType.includes('text/html')) {
        body = body.replace('</head>', `
            <style>#message { font-size: 20px; }</style>
        </head>`);
    }

    res.setHeader('Content-Type', contentType);
    res.send(body);
});

app.listen(3000);

虽然能够运行，但要完善资源注入、跨域控制、压缩解码、路径替换、CDN 处理等功能，复杂度远超预期。考虑到已有成熟工具可用，决定放弃自行开发，转而使用 forward。

使用 forward + overwrite 的解决方案

安装 forward

  • 方式一：下载二进制文件（推荐）

    访问 Releases 页面，下载适用于你的操作系统的可执行文件，解压后即可使用。

  • 方式二：使用 Golang 编译安装（可选）

    go install github.com/axetroy/forward-cli/cmd/forward@latest

构建 overwrite 目录结构

假设网页中加载了一个远程字体：

<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">

需要在本地创建以下路径，并替换文件内容：

overwrites/
└── at.alicdn.com/
    └── t/
        └── font_2143783_iq6z4ey5vu.css

内容可以是：

body { font-family: '你的字体' !important; }
/* 或者移除 iconfont */

覆盖动态加载的 CSS

有些 CSS 是通过 JS 动态插入的，例如：

const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = 'https://cdn.xxx.com/ui.css';
document.head.appendChild(style);

找到这段 JS 的路径，在 overwrite 中对应位置创建文件，并注释掉插入语句。

注入最终的样式覆盖

找到最后加载的 CSS 文件（通常在 HTML 尾部），在其中添加自定义样式：

/* 自定义样式 */
#message {
  display: inline;
  font-size: 20px;
}
yt-live-chat-renderer * {
  font-size: 20px;
}

启动代理

forward --port=3000 --proxy-external --overwrite=./overwrites https://目标地址.com

注意：如果不需要代理外部资源，可省略 --proxy-external 参数。

在 OBS 浏览器源中填写：

http://localhost:3000/live

效果总结

  • 样式准确注入，字体、布局可自定义
  • 所有远程资源本地化，便于控制
  • JS 插入逻辑可精确控制
  • OBS 渲染稳定，无异常

此方案适用于无法注入样式的嵌入式网页，特别是 OBS 浏览器源等内嵌 Chromium 内核的容器。

以上就是我在 OBS 中使用 forward + overwrite 完美解决浏览器源样式注入问题的经验分享。希望对大家有所帮助！