About Add HTML tools

Website, Application, Performance
1

WiFiShot 2022-12-02 at 13.17.29@2x
WiFiShot 2022-12-02 at 13.17.29@2x1070×346 32.7 KB

I recently had a requirement to add a css style as shown in the figure, using add html：
WiFiShot 2022-12-02 at 13.15.42@2x
WiFiShot 2022-12-02 at 13.15.42@2x1920×1335 126 KB

css code is:

html {
    -webkit-filter:grayscale(100%) !important;
    filter: grayscale(100%) !important;
}

It is the one that turns the page into black and white, and the right preview also shows the expected effect correctly. But when I actually visit the site, it doesn’t work：

WiFiShot 2022-12-02 at 13.19.56@2x
WiFiShot 2022-12-02 at 13.19.56@2x1496×890 86.4 KB

2

Apps are pretty much deprecated/end of life, the majority of them don’t work - and I suspect this is one of them.

You can use Cloudflare Workers to do the same - you get 100,000 requests per day for free.

class StyleHandler {
  element(element) {
    const html = "<style>html{-webkit-filter:grayscale(100%) !important; filter: grayscale(100%) !important;}</style>";
    element.append(html, { html: true });
  }
}

export default {
  async fetch(req) {
    return new HTMLRewriter().on("head", new StyleHandler()).transform(await fetch(req));
  }
}

You’d put this a route like example.com/* for it to run on all requests to your website.

1 Like