About Add HTML tools


I recently had a requirement to add a css style as shown in the figure, using add html:

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:

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