Intro
\\"value\\": \\"<p>Internet used to be much simpler in the earlier times. Companies either thought up until dotcom crash that there was billions to be made off internet or no money at all. Ever before Google and Facebook made common people believe in the internet billions again there was advertising. As one of the first ways old companies with a working business models thought they could money in the internet. Ever since then we have had ever growing amount of advertising on the websitest we visit. They used to be small innocuos banners. Now they are everywhere. Here is an example from one of the most popular news websites of Estonia.</p><p></p><embed alt=\\\\\\"erlend ad count delfi\\\\\\" embedtype=\\\\\\"image\\\\\\" format=\\\\\\"fullwidth\\\\\\" id=\\\\\\"10\\\\\\"/><p></p><p>As you can see most of the screenspace is filled with ads. This situation has made using an ad blocker almost a neccesity to even use the website. As this is an actually legitimate website of a legitimate company this is still a fairly good example. If you go into the murkier waters of the internet you will see much worse. These websites all have a wide variety of tricks to them.</p><p>There are two primary methods ad blockers use to combat these ads. Both are based on blacklists. They are content blocking and request blocking.</p><p>Content blocking means just removing nodes from the HTML tree using a blacklist of selectors (turning off boxes of content).</p><p>Request blocking relies on the modern implementation of ads which are not actually stored in the same server as the website. So the website has to actually make more requests to some other server that actually provides them with the ad content. So what the ad blocker does is it maintains a blacklist of known ad servers and blocks any requests the browser wants to make to these servers.</p><p>In this post I will show you how to write your own browser extension to block ads using these two methods. I will assume you are familliar with the very basics of browser extensions. If not then you can read <a id=\\\\\\"9\\\\\\" linktype=\\\\\\"page\\\\\\">my post about creating a basic browser extension</a>.</p>\\",
The plan
- Project layout
- CSS selector based blocking
- Request based blocking
- Design
- Packaging and upload
- Summary
- Enhancements
Create a file name manifest.json. Add some basic configuration to it
\\"value\\": \\"<p>Next we are going into the most basic version of ad blocking. Blocking HTML nodes using CSS selectors in a blacklist.</p><p>Create a new file called "css-blocker.js". Then we will add an array that will hold all the CSS selectors and a simple function that will look for them in the HTML code and just remove them.</p>\\",
\\"value\\": \\"<p>As you can see. It is extremly simple. Now it is just about using browser tools to inspect the HTML code and write some selectors. You can open them on most browsers with the "F12" shortcut. I am now going to demonstrate how you can create these CSS selectors using browser tools. If you already know how to write CSS selectors you can just skip this part.</p><h3>Creating CSS selectors</h3><p></p><embed alt=\\\\\\"dev tools.PNG\\\\\\" embedtype=\\\\\\"image\\\\\\" format=\\\\\\"fullwidth\\\\\\" id=\\\\\\"11\\\\\\"/><p></p><p>Select the "Inspector" subtab. Click on the little button on left top corner of the tools tab and now you should see a little overlay over content when you hover it. Using that you can indentify the ad-s HTML node.</p><p></p><embed alt=\\\\\\"Selector.PNG\\\\\\" embedtype=\\\\\\"image\\\\\\" format=\\\\\\"fullwidth\\\\\\" id=\\\\\\"12\\\\\\"/><p></p><p>After clicking on the ad container the tools should highlight it in your inspector tab. Right click on the selected node and go to "Copy" submenu and choose the CSS selector. Now you have the browser generated CSS selector in your clipboard. Which means you can paste it.</p><h3>Adding CSS selectors to the list</h3><p>Now all that is left is to append the selectors to our array.</p>\\",
\\"value\\": \\"<p>Now we have a basic ad blocker that can block ads based on the selection of CSS selectors you add to the array. If we wanted to build a more useful version of the ad blocker we would fetch the community created list of CSS selectors. One of those lists is <a href=\\\\\\"https://easylist.to/\\\\\\">EasyList</a> which hosts various lists of these know ad CSS selectors. But for our concept ad blocker manual is sufficcent for now. Consider it a possible enhancement if you feel like it.</p><h3>Asking permission and loading the script</h3><p>Next we will need to tell the browser to load the script. For that we will need to ask for proper permissions and tell browser to load the file we created. We will set it to match the current website we are testing it on. For me it is currently a site called Delfi. The * sign singifies 1 or more character in the pattern matching.</p>\\",
\\"value\\": \\"<p>With this we have ourselves a basic ad blocker that uses CSS selectors to block content.</p>\\",
Request based blocking
\\"value\\": \\"<p>Requests based blocking works by blocking browser requests to known ad servers. Implementing this isn't that much more complicated than CSS blocking. We can do it in just a few lines of code. Create a new file "request-blocker.js". We are going to create a object which will contain the list of URL-s we want to block. Then just create a function that will cancel the request if it matches one of the listed URL-s. Finally we will hook it into a web request lifecycle function that will run this function before sending this request out thus cancelling if it meets our set conditions. </p>\\",
\\"value\\": \\"<p>Next we are going to need to find these servers. Back to the developer tools I discussed previously. Only this time we will need to utilize the "Network" tab.</p><p></p><embed alt=\\\\\\"network.PNG\\\\\\" embedtype=\\\\\\"image\\\\\\" format=\\\\\\"fullwidth\\\\\\" id=\\\\\\"13\\\\\\"/><p></p><p>Now we have to just look around there for a bit. Here some ad servers seem to include "ad" or known domain like "doubleclick" in them. So we will just add those to our array we created previously.</p><p></p>\\",
\\"value\\": \\"<p>Now we have all the code we need to do this blocking. Next we will need ask for additional permissions and add the script to out "manifest.js" file.</p>\\",
\\"value\\": \\"<p>Now we have a very simple functional request blocker. Again you might want to include community lists of ad servers as an enhancement. </p>\\",
Design
\\"value\\": \\"<p>Create a simple icon by putting together 2 seperate icons from<a href=\\\\\\"https://icons8.com/\\\\\\">Icons8</a>. Add them to icons folder and change the path to it in the "manifest.json"</p><p></p><embed alt=\\\\\\"android-icon-144x144.png\\\\\\" embedtype=\\\\\\"image\\\\\\" format=\\\\\\"fullwidth\\\\\\" id=\\\\\\"14\\\\\\"/><p></p>\\",
Packaging and upload
Packaging the extension is as simple as just creating a ZIP file out of all the files.
Summary
\\"value\\": \\"<p>We wrote a simple ad blocker that uses 2 different methods of blocking ads. Removing HTML nodes using CSS selectors and blocking requests to known ad servers. Actual extensions you might want to use in your daily web surfing like uBlock Origin or Adblock are more complicated than that and have better implementations of these methods. But they do not differ much conceptually and it is always good to know how the software we use in our daily life actually works.</p>\\",