Oh boy, where to begin? Let’s start at the beginning. It’s as good a place as any, after all.
It all started when I decided to help out a buddy of mine named… well, let’s call him “Ani”. Ani has been struggling with an addiction. Not one of the more well-known addictions, but an addiction nonetheless. Instead of alcohol or drugs or gambling online, Ani has been struggling with porn addiction (don’t worry, I asked him before I decided to share this story).
Bet you didn’t expect a rant about web development to begin like this, huh?
So I have zero connection to Ani. I just read this story online and wondered how would I solve it if I were to try. I like to think that I’m quite tech-savvy and figured, “How hard could it be?”. Now, I’m in the middle of studying engineering at University- was taking on such a project a good idea?
Probably not. But I did it anyway.
Search Engine Filters
As it turns out, blocking all porn on the internet is quite the challenge. While websites like YouTube, FaceBook, and Twitter actively clamp down such content, there are millions of websites that churn such content out by the millions every single day. There was no way a simple “blacklist” of various website URLs was going to work. This was the first thing I tried.
The second thing I tried was setting up Google’s Safe Search filters so that such content simply wouldn’t appear in Ani’s feed. And, to be fair to Google, it mostly works. Most of the graphic content gets suppressed and doesn’t appear in the feed. However, this doesn’t stop someone from simply searching for the content directly by just directly typing out a URL. And believe me, an addict like Ani HAS those URLs memorized. And as I said before, I could try simply blocking those sites one by one, but that’s a losing battle. There is always more porn.
Browser Extensions
At this point, I decided that I would need to get some specialized tools for the job. This was when I began looking into browser extensions. Thankfully, there are thousands of extensions that cover just about every piece of functionality you can think of. By default, I have several extensions installed on my own personal browser at all times, including “Ghostery”, which blocks numerous trackers, “Adblocker Ultimate” to block ads, “Enhancer for YouTube” to… also block ads (and various other YouTube specific stuff), plus “Similar Web” to access website statistics.
For the purpose of content blocking, I ended up looking into two specific add-ons: “Ublock Origin” and “Block site”. The first is pushed to the top of the algorithm, has five-star ratings, and is flagged as recommended by Firefox’s developers. To be quite honest, I didn’t like it. It’s not bad at all. In fact, it’s a very powerful tool. However, for the purpose of filtering porn, you have to work through the Extensions filtering system, which is a pain because of the syntax required. I’m not ashamed to admit that I simply gave up and looked for something else.
This led me to look at another extension called “Block Site”, and it does exactly what it says on the tin. You open the settings, and you block sites by filters. Again, I found the syntax required in order to accomplish this really finicky and annoying- although I’m sure it’s second nature to actual web developers. However, I am not a web developer by trade, and I found the formatting, once again, a right pain in the arse. In spite of that, I did manage to succeed! I was capable of blocking all the major websites, plus I was able to set up filters that could block certain naughty content on non-porn websites.
Why would I need to do that? Well, you know how serious alcoholics sometimes hide alcohol around the house so that they always have access to some? Porn addiction can work the same way. Just because the main keg is plugged up, that won’t stop the addict from attempting to get their fix through indirect means, like wine. Or mouthwash. Er, maybe that’s a bad analogy.
Websites like Reddit, Itch, Tumblr, or Imagr, while they don’t actively promote such content, they don’t block it either. It’s there if you look for it. However, these sights helpfully put certain tags into the URL that can then be read by, say, a browser extension and then block them. While this method is far more complicated than simply blocking these sites outright, it allows Ani to continue using websites like Reddit, but it will keep him out of specific subreddits- like r/goneWild, which I only know about because of this project, I swear!
So you’d think that would be the end of the story, right? Mission accomplished, time to go home. Oh, you naive summer child. It couldn’t be that easy, right?
Extensions, Web Development, on Mobile
So here I was, patting myself on the back for what a great job I had done when I discovered something shocking. Something terrible. Something that ruined all my hard work.
On Android, Chrome doesn’t support extensions at all, and Firefox only supports limited extensions- by which I mean that out of the thousands of extensions available on firefox desktop, there are less than twenty for the mobile version. And of course, the extension I was using, “Block Site”, happened to be one of the thousands that weren’t available.
In other words, I had accomplished half the battle, and all my hard work was worthless in solving the second half. However, one of the applications that were available for mobile was “Ublock Origin”. So, begrudgingly, I installed it and attempted to get it working.
And failed. Again.
I think it was at this point that I officially said, “to hell with this, I’ll do it myself”, and set myself onto the task of developing a custom Firefox extension that would filter by keyword and block inappropriate websites. I mean, how hard could it be? Right?
As it turned out, making the extension itself was the easiest part. It turned out that Firefox’s extensions are just a couple of files thrown together into a folder. You need a JSON file, a Javascript file, and, technically, that’s it. The JSON file was the bit that was read by Firefox’s extension system, and by using a premade template, it successfully inserted the Javascript on whatever website was open. Perfect.
Now, I thought the hard part of this project was going to be reading in the site’s URL, but that turned out to be incredibly easy. It was just one line of code that worked perfectly on the first attempt. Yay!
From there, I made an array of strings, with each entry of the array being a “naughty word” that I was filtering for. I fed this array into a function, which parsed the URL letter by letter, and checked each letter against the first letter of the “naughty word” it was checking against. Then, if I found that the first letters matched, I could use some extremely helpful built-in methods to snip out a substring of the URL, which I could directly compare to the whole “naughty word”. Then, if they matched, I knew I had found a “naughty” URL and could activate the code that would direct the user (Ani) away from the website.
And, to add my own touch to the program, I set the extension to redirect to a gif of that priest-lady from Game of Thrones swinging a bell and shouting, “SHAME. SHAME. SHAME.”
Now, I may not be a web developer, but I consider myself a fairly competent programmer. So, following my well-honed programmer instincts, I decided that it was bad practice to hard code in an array of strings like I had done. So I decided that I would do what any object-oriented programmer would do and decided to put the list of words in an external file and just have the Javascript read it in. This would make the code cleaner, and it would make updating the list of keywords a lot easier.
And if you happen to be a Web developer / experienced in Javascript, you might have noticed my fatal mistake! I assumed that Javascript, like every other programming language on the planet, was capable of reading and writing to local files! But NooooOOOoooo. Javascript explicitly does not have the capability to do this because of “security reasons”. So what had seemed like the final sprint of my project had suddenly elongated into a three day scouring of the internet to find a workaround, and the only consistent answer I could find was to set up an external server and have my Javascript make an HTTPS request to the server, which would have the list of keywords, and read them back in from there. Because I guess reading a file in the exact same folder is too much to ask, but connecting to a server hosted thousands of miles away is completely reasonable!
So I ended up scrapping all that work and decided to find yet another solution to this problem.
What Finally Worked
So as I stated before, Chrome doesn’t allow extensions at all, and Firefox only allows a select few… unless you download the special developers’ version of Firefox called “Firefox Nightly”. But it’s not as simple as that, oh no-no-no.
In order to enable the extensions to work in “Nightly”, you have to dig into the settings, go into the about page, and (I kid you not) tap on the “Firefox Nightly” logo five times, which unlocks a secret developer menu, and from there you can apply a setting that allows you to access extensions that have been added a specific collection- a collection that has to be made on Desktop, via the Firefox Add-on Manager! And then, and only then will the extensions added to the collection be available on Firefox mobile!
I gonna go bald if I keep pulling my hair out at this rate! Does it work? Yes! Am I mentally screaming over this completely voluntary project I took on myself? Yes! So the next time Ani needs some help, he better have a roll of cash on hand and a box of pizza to pay for it!
Leave a Reply