CSFD blocker Chrome extension

Preact

TypeScript

Tailwind

SASS

The extension is available on the Chrome Web Store.

Homepage

https://hyneks.github.io/csfd-blocker-website/

Repo

https://github.com/HynekS/csfd-blocker

Why?

There are many people in the world one can find, let’s be honest, quite annoying. As controversial as this topic might be, I believe one has the right to avoid people who are harassing, abusive, or just plain boring, either in real life or on the internet. That’s why most social networks have a ‘mute’ or ‘block’ button.

Sadly, one of the quite popular pages in my home country, https://www.csfd.cz/, lacked such a feature.

My solution

I created this little extension for Google Chrome. It injects the pages DOM and hide all the elements containing content from users you find obnoxious. You can also very easily manage the current blocklist.

Now, you can avoid any user with just one click.

Notes

The injected script adds a little Preact component to each element that is considered “blockable” (review, comment, etc.). The component consists of a simple collapsible menu (inspired by the Twitter approach) that allows users to add or remove people from a blocklist, show or hide blocked posts, etc. Blocking can also be done using the extension popup.

All the business logic is contained in the extension’s background script (service worker). The shared state is managed with a super simplereact-hooks-global-state library from Daishi, the creator of Jotai, which also guarantees reactivity.

Styling is done using Tailwind and SASS. My personal note: comparing to Tailwind, manually writing BEM classes (to target the foreign DOM) was more than painful and I I would never have chosen it voluntarily if I had the choice.