使用 cloudflare 的 workers 在网站</body>前插入 js 怎么写?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 706 天前的主题，其中的信息可能已经有所发展或是发生改变。

大家好,我是一个产品设计师,并不会代码. 我的想法是在使用 Framer 制作的网站里插入几段 js 用来优化我的网站. 经过我的探索发现使用 cloudflare 的 workers 可以做到.

但是我不会写代码,看文档则有一大堆不懂,基本要把 JavaScript 语言从零开始学会了才能明白文档的意思. 所以来求助,目标就是在网页的</body>前,在<body>标签的所有内容后插入几段 js.

因为需要插入的 js 需要查找网站生成后的样式名来起作用.

我的网站地址: https://snow.byewind.com/

另外我的产品很不错,但是缺乏流量, 在外网粉丝多的朋友可以帮我分销,我会提供高于产品价格 50%的分销费用.

插入

body

Workers

Cloudflare

28 条回复 • 2024-05-11 17:34:06 +08:00

0o0O0o0O0o

2022-12-18 19:22:52 +08:00

> 把 JavaScript 语言从零开始学会了才能明白文档的意思

不需要读懂太多，用它的 HTMLRewriter 即可

https://developers.cloudflare.com/workers/examples/rewrite-links/

byewind

2022-12-18 19:29:17 +08:00

下方是我现在使用的 Workers 用来将软件域名换成我自己域名的, 如果有谁内帮我把代码写出来加到我现有的代码内就更好了.
我不是学不会, 而是不想花太多的时间. 我要珍惜我的时间用在产品设计上. 所以来求助的目的就是想节约时间. 而对于懂的人来说只要 3 分钟就能帮到我. 而我学习需要花上至少 3 天时间.对吧

// 反向代理 Workers
// https://senjianlu.com/2021/12/cloudflare-workers-image/

addEventListener("fetch", event => {
event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
// Cloudflare Workers 分配的域名
cf_worker_host = "framer.yuansite.workers.dev";
// 自定义的域名
customize_host = "snow.byewind.com";
// 原地址
origin_host = "snowui.framer.website";
// 替换 2 次以同时兼容 Worker 来源和域名来源
url = request.url.replace(cf_worker_host, origin_host).replace(customize_host, origin_host);
return fetch(url);
}

byewind

2022-12-18 19:34:47 +08:00

@0o0O0o0O0o 这个是改写 URL 呢, 我是想要在 HTML 里插入 js 代码

0o0O0o0O0o

2022-12-18 19:38:22 +08:00

async function handleRequest(req) {
const res = await fetch(req);
const contentType = res.headers.get("Content-Type");
// If the response is HTML, it can be transformed with
// HTMLRewriter -- otherwise, it should pass through
if (contentType.startsWith("text/html")) {
return rewriter.transform(res);
} else {
return res;
}
}

class Handler {
element(element) {
element.append(`<script>alert(1)</script>`, { html: true });
}
}

const rewriter = new HTMLRewriter().on("body", new Handler());

addEventListener("fetch", (event) => {
event.respondWith(handleRequest(event.request));
});

0o0O0o0O0o

2022-12-18 19:39:29 +08:00

script 标签中间的就是 JS 代码，你改动它就行了

byewind

2022-12-18 19:57:31 +08:00

404 Not Found
alt-svc:h3=":443"; ma=86400, h3-29=":443"; ma=86400
cache-control:private, max-age=0, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
cf-ray:77b7b84b484e22ca-ORD
content-length:16
content-type:text/plain; charset=UTF-8
date:Sun, 18 Dec 2022 11:57:15 GMT
expires:Thu, 01 Jan 1970 00:00:01 GMT
nel:{"success_fraction":0,"report_to":"cf-nel","max_age":604800}
referrer-policy:same-origin
report-to:{"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=i23yRkJa1D02wHxx0aj8BiPtuJBp%2FE49nl%2B7MnaI0AbMIfsablDv1D%2FOwXtbCckUJF7FrdmFd4v4YIv0MoKR%2FCN7QY2Di63gKRYsc0axNBhzy%2B9ZZvkc5w04EM5Wrn6%2FOK0VqJzuXHF4Rh8s"}],"group":"cf-nel","max_age":604800}
server:cloudflare
vary:Accept-Encoding
x-frame-options:SAMEORIGIN
error code: 1042

byewind

2022-12-18 19:58:01 +08:00

应该是哪里搞错了,这里没办法贴图啊

byewind

2022-12-18 21:01:01 +08:00

还在吗?

byewind

2022-12-18 21:40:37 +08:00

其实我想要的应该几行代码就可以写出来. 逻辑就是
1. 找到</body>标签
2. 在其前面插入所需要的内容.

byewind

2022-12-19 01:34:11 +08:00

或者将我之前的 worker 结合进去就是
1. 将原本的网址 aaa 换成 bbb
2. 将网站内所有的网址中的 aaa 都换成 bbb
3. 找到</body>标签
4. 在其前面插入所需要的内容.

cha0sCat

2022-12-19 05:28:31 +08:00

对于理解代码的人，使用 HTMLRewriter 可能会更优雅。
但是对于不懂代码的人，还是简单粗暴来的更有效。

```js
addEventListener("fetch", event => {
event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
// Cloudflare Workers 分配的域名
const cf_worker_host = "icy-snowflake-f4de.ikoa.workers.dev";

// 自定义的域名
const customize_host = "snow.byewind.com";

// 原地址
const origin_host = "snowui.framer.website";

// 替换 2 次以同时兼容 Worker 来源和域名来源
const url = request.url
.replace(cf_worker_host, origin_host)
.replace(customize_host, origin_host);

const originalResponse = await fetch(url);

if (originalResponse.headers.get('Content-Type') === 'text/html') {
const rewritedContent = await originalResponse.text().then(text => {
return text.replace('</body>', '<script>alert("dev")</script></body>');
});

return new Response(rewritedContent, originalResponse)

} else {
return originalResponse

}

}
```

cha0sCat

2022-12-19 05:29:55 +08:00

代码里 cf_worker_host 我写错了，楼主自己替换一下

byewind

2022-12-19 08:46:50 +08:00

@cha0sCat 成功了, 不过自定义 js 部分好像不能换行, 一换行就出错了. 不过非常感谢你的帮助. 这是我测试的地址: https://test.byewind.com/

byewind

2022-12-19 08:48:53 +08:00

然后我又有了新需求, 我想把 Made in Framer 用 CSS 给彻底干掉, 这时候又该怎么写呢?

byewind

2022-12-19 09:22:56 +08:00

@byewind 我已经用 css 干掉它了. 现在的问题是不能针对<body>用 js 代码, 这个应该和 Framer 生成的页面有关,在本地是可以的, 烦恼

byewind

2022-12-19 13:34:46 +08:00

不弄了,已经花了太多时间了,最后的效果虽然没有完美,但是也已经不错了. 谢谢在这回复的所有人. 希望这帖子以后也能帮到其他人.
我最后调试的效果可以访问下方地址查看.

test.byewind.com

byewind

2022-12-19 22:56:13 +08:00

现在非常好奇这些 js 的作者是怎么把飞鸟模拟得这么好的

byewind

2022-12-23 15:32:29 +08:00

@cha0sCat HI 你的这段代码好像还有些问题, 比如我能访问 byewind.com, 但是 byewind.com/about 这样的子页面直接访问就出问题了.这样应该怎么解决呢?

addEventListener("fetch", event => {
event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {

// 目标地址
const target_host = "byewind.framer.website";

// 原地址
const original_host_a = "byewind.com";
const original_host_b = "www.byewind.com";
const original_host_c = "byewind.yuansite.workers.dev";

// 替换 2 次以同时兼容 Worker 来源和域名来源

const url = request.url
.replace(original_host_c, target_host)
.replace(original_host_b, target_host)
.replace(original_host_a, target_host);
const originalResponse = await fetch(url);
if (originalResponse.headers.get('Content-Type') === 'text/html') {
const rewritedContent = await originalResponse.text().then(text => {

// 在这插入自定义代码, 用样式去除 body 的滚动条, 隐藏 Framer 的 logo.添加 JS 动效
return text.replace('</body>', '<style type="text/css"> .__framer-badge {pointer-events: auto; display: none !important;} ::-webkit-scrollbar {display: none;} body {scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden;overflow-y: auto;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script><script>VANTA.BIRDS({el: "#main",mouseControls: true,touchControls: true,gyroControls: false,minHeight: 200.00,minWidth: 200.00,scale: 1.00,scaleMobile: 1.00,backgroundColor: 0x0,color1: 0x521efc,color2: 0x14ffc7,colorMode: "lerp",wingSpan: 40.00,speedLimit: 10.00,separation: 100.00,alignment: 100.00,cohesion: 100.00})</script></body>');

});

return new Response(rewritedContent, originalResponse)

} else {
return originalResponse
}
}

byewind

2022-12-24 11:52:09 +08:00

@cha0sCat 还在吗

cha0sCat

2022-12-25 08:31:41 +08:00 via iPhone

没截图、没日志、没报错信息
就一句“出问题了”我解决不了

OkotoO

2022-12-25 11:18:19 +08:00 via Android

@byewind 看看路由是不是只匹配了根目录，如果是的话改成 test.brewing.com/* 再试试看

byewind

2022-12-27 02:32:14 +08:00

@cha0sCat 不知道在哪里可以看到报错, 在 worker 中是没有出现错误的. 理想的脚本运行效果应该是打开 byewind.com 的网址都能对应到 byewind.framer.website 网址里的内容. 可是现在 /后的域名会出问题.可以用 byewind.com/about 这个地址来看出问题的页面, 这个地址应该显示的内容是 byewind.framer.website/about

byewind

2022-12-27 02:35:12 +08:00

@OkotoO 路由的部分 *.byewind.com/* , byewind.com/* 这两个地址我都匹配了这个 worker, 应该没有问题的. 这里不能发图片啊

byewind

2022-12-27 02:39:03 +08:00

方便的话在 twitter 上私信我? 我的 twitter 是 https://twitter.com/FarewelltoWind

OkotoO

2022-12-28 09:35:20 +08:00

@byewind 好, twitter 私信你了

byewind

2022-12-28 18:47:45 +08:00

@OkotoO 非常感谢, 我试过了, 确实和你说的一样.

byewind

2022-12-28 20:05:05 +08:00

具体的实现方法和用到的素材我都放在这个文档里, 有兴趣的朋友可以研究研究, 解决下目前还存在的问题.

https://byewind.notion.site/Cloudflare-Workers-Framer-8e1b5a09b4d448c2ad1d6c74b5ed3d21

Helsin

196 天前

你都用 cloudflare 了，直接用 Zaraz 的 Custom HTML 就行了