Trellison
- 5 Devlogs
- 11 Total hours
A web filter that rewrites page content instead of blocking sites outright
A web filter that rewrites page content instead of blocking sites outright
I made a couple improvements to the current system that caches site categorisation locally. Previously, it would simply keep categorisation valid for 30 minutes, then invalidate it and require another request to the server. Now, it instead runs on a loop that, every 10 minutes, sends all its cached site IDs (which is just an internal incremental ID for each hostname listing) to the server and gets back a list of versions, which it then checks against its own versions and updates only the ones it needs. Currently rewriters are not implemented, but they will be bundled in this system.
I wrote a simple test in Ruby to test this functionality and modified the extension code to act differently when in dev mode vs a production build, which helped a lot in verifying that it was working correctly and finding bugs. It was pretty annoying to make (I probably should’ve just used Python or JS, not sure why I didn’t) and is pretty buggy itself (it doesn’t properly stop the backend).
I also did a whole lot of planning. I made a flowchart attempting to detail how the whole system will work and wrote a MD file to plan out how the actual database will be stored. One thing I still need to decide is whether to use MariaDB or PostgreSQL.
I connected the extension to the dummy backend, so it now blocks sites according to the database. It also saves a small local cache (resets on restarts) so it isn’t constantly pinging the DB for sites it’s already accessed. There was a pretty confusing hiccup where just typing something in the URL bar would close the tab before you loaded anything, but I eventually realised it was actually the search completion API (since I had blocked Google for testing, it was auto-blocking it).
I also made a simple blockpage so it doesn’t just close the page with no explanation.
AI disclosure: AI was used to help me 1. realize I needed to put the blockpage files as an entrypoint and not in the public/ folder and 2. to fix issues with CSS because it’s an absolute nightmare
Browser extension view improved and some dummy implementation added
Made an extension base using WXT + Vue + Tailwind, and a logo to go along with it!
The light mode version looks kinda garbage tbh but the light mode version looks really good I think! It doesn’t have like any functionality at all, it’s mainly just supposed to serve as a basic view so the extension can be there transparently and so it can be clear what it does.
The logo was made in Photopea, it’s a roughleaf dogwood leaf with the colors of heavenly bamboo. Timelapse: https://lapse.hackclub.com/timelapse/uMRvG-kQMmep
AI was used a bit to help me configure WXT and to fix some visibility issues I had with CSS (the logo wasn’t showing up on dark mode) but everything else was made by me.
Made a super simple dummy backend for my web filter using Fastify + SQLite. It just stores whether a site should be allowed, denied or rewritten, and can grab a site’s rewrite script (which is just hardcoded for now)