V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
byewind
V2EX  ›  问与答

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

  •  1
     
  •   byewind · 2022-12-18 19:18:09 +08:00 · 1429 次点击
    这是一个创建于 465 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    27 条回复    2022-12-28 20:05:05 +08:00
    0o0O0o0O0o
        1
    0o0O0o0O0o  
       2022-12-18 19:22:52 +08:00
    > 把 JavaScript 语言从零开始学会了才能明白文档的意思

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

    https://developers.cloudflare.com/workers/examples/rewrite-links/
    byewind
        2
    byewind  
    OP
       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
        3
    byewind  
    OP
       2022-12-18 19:34:47 +08:00
    @0o0O0o0O0o 这个是改写 URL 呢, 我是想要在 HTML 里插入 js 代码
    0o0O0o0O0o
        4
    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
        5
    0o0O0o0O0o  
       2022-12-18 19:39:29 +08:00
    script 标签中间的就是 JS 代码,你改动它就行了
    byewind
        6
    byewind  
    OP
       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
        7
    byewind  
    OP
       2022-12-18 19:58:01 +08:00
    应该是哪里搞错了,这里没办法贴图啊
    byewind
        8
    byewind  
    OP
       2022-12-18 21:01:01 +08:00
    还在吗?
    byewind
        9
    byewind  
    OP
       2022-12-18 21:40:37 +08:00
    其实我想要的应该几行代码就可以写出来. 逻辑就是
    1. 找到</body>标签
    2. 在其前面插入所需要的内容.
    byewind
        10
    byewind  
    OP
       2022-12-19 01:34:11 +08:00
    或者将我之前的 worker 结合进去就是
    1. 将原本的网址 aaa 换成 bbb
    2. 将网站内所有的网址中的 aaa 都换成 bbb
    3. 找到</body>标签
    4. 在其前面插入所需要的内容.
    cha0sCat
        11
    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
        12
    cha0sCat  
       2022-12-19 05:29:55 +08:00
    代码里 cf_worker_host 我写错了,楼主自己替换一下
    byewind
        13
    byewind  
    OP
       2022-12-19 08:46:50 +08:00
    @cha0sCat 成功了, 不过自定义 js 部分好像不能换行, 一换行就出错了. 不过非常感谢你的帮助. 这是我测试的地址: https://test.byewind.com/
    byewind
        14
    byewind  
    OP
       2022-12-19 08:48:53 +08:00
    然后我又有了新需求, 我想把 Made in Framer 用 CSS 给彻底干掉, 这时候又该怎么写呢?
    byewind
        15
    byewind  
    OP
       2022-12-19 09:22:56 +08:00
    @byewind 我已经用 css 干掉它了. 现在的问题是不能针对<body>用 js 代码, 这个应该和 Framer 生成的页面有关,在本地是可以的, 烦恼
    byewind
        16
    byewind  
    OP
       2022-12-19 13:34:46 +08:00
    不弄了,已经花了太多时间了,最后的效果虽然没有完美,但是也已经不错了. 谢谢在这回复的所有人. 希望这帖子以后也能帮到其他人.
    我最后调试的效果可以访问下方地址查看.

    test.byewind.com
    byewind
        17
    byewind  
    OP
       2022-12-19 22:56:13 +08:00
    现在非常好奇这些 js 的作者是怎么把飞鸟模拟得这么好的
    byewind
        18
    byewind  
    OP
       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
        19
    byewind  
    OP
       2022-12-24 11:52:09 +08:00
    @cha0sCat 还在吗
    cha0sCat
        20
    cha0sCat  
       2022-12-25 08:31:41 +08:00 via iPhone
    没截图、没日志、没报错信息
    就一句“出问题了”我解决不了
    OkotoO
        21
    OkotoO  
       2022-12-25 11:18:19 +08:00 via Android
    @byewind 看看路由是不是只匹配了根目录,如果是的话改成 test.brewing.com/* 再试试看
    byewind
        22
    byewind  
    OP
       2022-12-27 02:32:14 +08:00
    @cha0sCat 不知道在哪里可以看到报错, 在 worker 中是没有出现错误的. 理想的脚本运行效果应该是打开 byewind.com 的网址都能对应到 byewind.framer.website 网址里的内容. 可是现在 /后的域名会出问题.可以用 byewind.com/about 这个地址来看出问题的页面, 这个地址应该显示的内容是 byewind.framer.website/about
    byewind
        23
    byewind  
    OP
       2022-12-27 02:35:12 +08:00
    @OkotoO 路由的部分 *.byewind.com/* , byewind.com/* 这两个地址我都匹配了这个 worker, 应该没有问题的. 这里不能发图片啊
    byewind
        24
    byewind  
    OP
       2022-12-27 02:39:03 +08:00
    方便的话在 twitter 上私信我? 我的 twitter 是 https://twitter.com/FarewelltoWind
    OkotoO
        25
    OkotoO  
       2022-12-28 09:35:20 +08:00
    @byewind 好, twitter 私信你了
    byewind
        26
    byewind  
    OP
       2022-12-28 18:47:45 +08:00
    @OkotoO 非常感谢, 我试过了, 确实和你说的一样.
    byewind
        27
    byewind  
    OP
       2022-12-28 20:05:05 +08:00
    具体的实现方法和用到的素材我都放在这个文档里, 有兴趣的朋友可以研究研究, 解决下目前还存在的问题.

    https://byewind.notion.site/Cloudflare-Workers-Framer-8e1b5a09b4d448c2ad1d6c74b5ed3d21
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5440 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 08:49 · PVG 16:49 · LAX 01:49 · JFK 04:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.