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

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

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

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

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

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
}
}