使用 cloudflare workers 做了一些小玩具；比如小红书去水印...

[zhwithsweet]

最近沉迷使用 hono.js 开发 cloudflare workers. Cloudflare workers 不用多说，赛博菩萨的免费力作；提供了基本的 nodejs API ，比如 fetch / static server 等，甚至支持 puppeteer ！玩法有很多。

Hono 更是社区中比较优秀的轻量级应用的佼佼者，适配了多个云平台，具备基本的代码经验的人几乎是无缝上手，体验也非常优秀。

本人就使用 hono.js 做了几个，分享一下。如下：

• 使用 workers browser render API ，实现小红书照片去水印
• 提取 figma plugin used count
• 获取私有仓库的 artifacts 产物，实现私仓分发下载

仓库在此：cofo-workers

效果图:

[codehz]

话说去水印真的需要用 workers browser render API 吗，如果是静态/ssr 的话，用 HTMLRewriter 应该也可以吧

[zhwithsweet]

@codehz #1 要看的，如果你需要的部分是 <ClientOnly /> 的组件，你必须要用 render API 了。据我所知，小红书的图片部分是 <ClientOnly />。如果都是 SSR 的，直接 parse HTML 即可。

[codehz]

你说的对，图片确实不是直接 ssr ，但是提供了 window.__INITIAL_STATE__在末尾
也就是说你只要提取__INITIAL_STATE__里的数据就可以
（ curl 之后获取到的信息）
用 HTMLRewriter 去直接 new HTMLRewriter().on("script")即可获取信息
节选一段如下
"imageList":[{"urlDefault":"http:\u002F\u002Fsns-webpic-qc.xhscdn.com\u002F202312081052\u002F640610f27499f2c0de31b46e2cb87443\u002F1040g00830p861vr1k6005n0uvm7haceq0rtl90o!nd_whgt34_nwebp_wm_1","fileId":"","height":1920,"width":1440,"url":"","traceId":"","infoList":

[tifanynic]

请问怎么部署呀？直接把 index.js 粘贴到 workers 里吗

[zhwithsweet]

@codehz #3 哇 不错的思路，有代码吗？

[zhwithsweet]

@tifanynic #4 在 hono.js 的项目里直接执行 pnpm run deploy 即可；在 cloudflare dashboard 里边可以直接贴 index.js

[codehz]

@zhwithsweet HTMLRewriter 处理文本节点的时候稍微有点问题，
可以参考我这个写法去一次性提取全部文本（考虑到你这里只需要提取数据，因此可以省略替换内容的部分，不需要 remove 了）
https://github.com/codehz/hertz.moe/blob/main/src/TextHandler.ts
然后提取出 script 字符串之后，只要稍作裁剪，就可以用 JSON.parse 来读取（注意到 cf worker 不让 eval ）
不过我觉得这里甚至可以直接用 regex 来匹配__INITIAL_STATE__=到</script>之间的内容，这样也许更快。

[zhwithsweet]

@codehz #3 试了下，curl 里边拿到的 imageList 图片地址是低质量的图片；不过这个思路确实很好。

[zhwithsweet]

@codehz #7 可以的，我已经看到它的 defaultImageurl 了

[v2yllhwa]

我之前写的代码，供参考。

let getUser = async (url) => {
let res = await fetch(url);
let scripts = [];
let rewriter = new HTMLRewriter()
.on('script', {
element(element) {
scripts.push('');
},
text(text) {
scripts[scripts.length - 1] += text.text;
},
})
.transform(res);
await rewriter.text();
let script = scripts.find((script) => script.startsWith('window.__INITIAL_STATE__='));
script = script.slice('window.__INITIAL_STATE__='.length);
// replace undefined to null
script = script.replace(/undefined/g, 'null');
let state = JSON.parse(script);
return state.user;
};

[zhwithsweet]

@v2yllhwa #10 nice ，我暂时用的正则直接匹配的。回头试试 rewriter 这个写法

[blueeon]

workers browser render 是需要申请吗？好不好申请？

[zhwithsweet]

@blueeon #12 需要，直接去 discord 联系官方人员加白就行

[RiverRay]

很 nice 的想法，谢博主贡献~