探索基于 JSX 构建用户脚本 UI

背景#

当我们在开发用户脚本的时候，难免会遇到对网页的 UI 修改或添加自定义组件的需求。假如不引入额外的框架，则大概率需要写很多 document.createElement 再各种 appendChild 之类的。

「太适合用 JSX 了」——在面临这种场景的时候，我总是冒出这样的想法。但是我一向认为，用户脚本额外引入运行时——无论是 React 还是 Vue，都似乎显得有些过重。尽管也有 Svelte 这种编译时的框架，但是他的产出会显得有些臃肿。（尽管「现在大家都不缺这点儿内存和存储空间了」）

1
const element = (
2
    <div>
3
        <h1>Hello, world!</h1>
4
        <p>This is a JSX example.</p>
5
    </div>
6
)

1
const element = React.createElement('div', null,
2
    React.createElement('h1', null, 'Hello, world!'),
3
    React.createElement('p', null, 'This is a JSX example.')
4
)

最初，我一直在思考：有没有可能将 JSX 在编译期完全转换成直接的原生 DOM 操作？可惜目前还没有找到完美实现这个想法的工具，而这个方向的实现对我而言有些超出能力范围，所以我转而探索其他可行的方案。

基于其他 JSX 运行时#

实际上，许多项目都有他们自己的 JSX 运行时实现，例如 Preact、Vue 之类的。所以我在想是否有一个足够轻量的运行时，最好是没有额外抽象的那种。

1
import { defineConfig } from '@rslib/core'
2

3
export default defineConfig({
4
    lib: [{
5
        format: 'umd',
6
        umdName: 'jsxDOM',
7
        syntax: 'es2021',
8
        dts: true,
9
        // 目标环境是浏览器
10
        output: { target: 'web' },
11
    }, { // 我们保留 ESM，方便开发环境使用
12
        format: 'esm',
13
        syntax: 'es2021',
14
        bundle: false,
15
        dts: true,
16
    }]
17
})

1
// @require https://fastly.jsdelivr.net/npm/@maxchang/JSX-DOM@8.1.6/dist/index.min.js

1
// ...
2
build: {
3
    externalGlobals: {
4
        '@maxchang/JSX-DOM':
5
            cdn.jsdelivrFastly(`jsxDOM.default`, `dist/index.min.js`),
6
    },
7
},
8
// ...

1
/** @jsxImportSource hastscript */
2
console.log(
3
  <div class="foo" id="some-id">
4
    <span>some text</span>
5
    <input type="text" value="foo" />
6
    <a class="alpha bravo charlie" download>
7
      deltaecho
8
    </a>
9
  </div>
10
)

基于模板字符串#

另一个值得探索的方向是基于模板字符串的解决方案，如 lit-html 和 htm。这些库不需要额外的编译步骤，可以直接在 JavaScript 中使用类似 JSX 的语法。

1
import {html, render} from 'lit-html'
2

3
const name = 'world'
4
const sayHi = html`<h1>Hello ${name}</h1>`
5
render(sayHi, document.body)

上次使用类似东西，还是开发 VS Code 插件时用了现在已经被微软砍刀部砍掉的 vscode-webview-ui-toolkit，所以接触到了 FAST。有一说一，其实还挺好用的……在配套设施友好的情况下……

基于网站自身环境#

也许，可以用 React……？

这个灵感来自我在重构一个先前实现的用户脚本——知乎历史记录。

知乎首页的信息流是可以直接查看完整文章的，但是却没有提供类似 App 的浏览记录的功能，所以在此之前经常出现一个场景就是——在首页刷到的文章，正在看着，一不小心刷新了，就再也找不到了。

所以这个脚本的功能就是记录你在首页上点击的文章，并提供了一个弹出层展示这些记录，效果如下：

当时写的时候比较粗糙，同时结构有些混乱。而且用户脚本要动态创建元素，免不了各种重复的工作，总觉得可以更 neat 些，所以一直想要着手重构。

在当我要考虑上面的方案时，我发现了一件意外之喜：知乎本身使用的是 UMD 版本的 React，我们可以直接从 window.React 和 window.ReactDOM 获取全套 API！

这给了我一些灵感——我们完全可以复用全局对象的 React，这样就可以在不用额外引入任何运行时，还可以获得完整的 React 体验。

我使用了 vite-plugin-monkey 来开发这个用户脚本，对比提供的 React 样例，我们只需要同步知乎的 React 版本，在 build 配置中指定 externalGlobals （当然，需要开启 unsafeWindow 访问完整的 Window）就可以在打包 React 和 ReactDOM 时使用我们指定的值了：

1
// ...
2
build: {
3
    externalGlobals: {
4
        // react and react-dom are already mounted on the page
5
        react: 'unsafeWindow.React',
6
        'react-dom': 'unsafeWindow.ReactDOM',
7
    },
8
},
9
// ...

由此，我们可以在不额外引入运行时的情况下，在用户脚本（仅限这个场景）中使用 React 与 JSX 开发了！

通过 vite-plugin-monkey 的一点小小魔法，当我们写一个这样的 tsx 文件时：

1
// ...
2
const mountApp = () => {
3
    const app = document.querySelector('#app')
4

5
    ReactDOM.render(<App />, app)
6
}
7
mountApp()

我们就可以得到一个类似这样的产出：

1
(function (require$$1, ReactDOM) {
2
  'use strict';
3
  // ...
4
  const mountApp = () => {
5
    const app = document.querySelector('#app');
6
    ReactDOM.render(/* @__PURE__ */ jsxRuntimeExports.jsx(App, {}), app);
7
  };
8
  mountApp();
9
})(unsafeWindow.React, unsafeWindow.ReactDOM);

当然，这种做法也不是完全没有缺点…比如 react/jsx-runtime 仍会被额外打包进去，虽然代码量很小，也可以替换为其他人打包好的版本。我们也可以通过查找 webpackChunkheifetz 来拿到他，尽管有些 Hack。

另外很明显的一点是，这种技巧仅限于网页能暴露出来的 React 和 ReactDOM 的时候。通过 这篇文章 我们可以知道，在某一个时间点之前，知乎还是不能直接获取的。但我们也应该可以通过 Hook 的方式拿到，以后再尝试吧。

在此之前我从未写过 React，所以某些地方也许写的比较奇怪，同时目前略显「为了用而用」。但我认为在需求变复杂时是完全值得的。如果你感兴趣的话，可以在 Github 查看源代码。

总之，我们以极小的代价获得了 React 的所有能力，JSX 的编译结果可读性也不错。但是很明显的一件事情是，React 18 之后的版本已经不再支持 UMD 了，这个故事很可能会在某一次知乎升级依赖的时候就消失了……或者至少变的没有现在那么舒服了。

总结#

好像也没啥总结的，先这样吧。