I made my first chrome extension[TAdsRemover].

A.Background

I am a comic/manga lover; I would surf web day and night to read some manga just to be happy. Usually manga is hosted at some websites onemanga-this one is my favorite but it got turned down because of copyrighted/privacy matters of some sort I do not want to explain. These websites provide manga scan[w or w/out translation] for audience to read which is a good thing, but the bad things are that those websites contain ads, which sometime are so annoying that I wish I did not see.

So come my attempt to remove ads from those websites.

DISCLOSURE: These are the websites I am tackling: truyentranhtuan.com, truyen.vnsharing.net

B.Approach

B0. What browser I am using.

I am using Chrome so the best tool to use is definitely Google Chrome >>> making a Chrome extension.

B1. DOM parse-and-remove.

Let’s look at a simple html- what browser understands. It has extension “.html”:

<html>
<head>A demo</head>
<body>
<div id="div1">
<p id=1>This is Duc Ho
<img id=2 src="ducho.jpg">Duc Ho Img</img>
</div>
<div id="div2>
<p id=3>....</p>
</html>

Html is formatted using those “<” and “>” called tags, those in between tags are the content, what will get rendered or what you would see after a browser is done with loading a webpage. Opened tag is <tag-name> and closed one is </tag-name>- note the “/”. An opened tag can contain what is called attributes such as id, src, etc as in the img tag. You can resize the image with attributes width, height.

What the browser do that is hidden after those “Connecting/Waiting for…..” is that it is actually parsing the html structure and save it as a Document Object Model or DOM. It actually has a DOM parser.

That is basically a static html. By static I mean, you literally have to modify it by yourself once the content changes. To make its dynamic, enter matrix of complexity : javascript, jquery, ajax, php, etc. Those added functionality to the bare-bone html. Javascript can let you load images dynamically. Say for example you have a list of images and you can display its randomly whenever the web loaded. Or you can connect to the database of images and render those as a gallery for example. Those technologies added meat to html bone.

Back to the DOM for a second. I’ve been think, so if I can modify the webpage using DOM DOM, I can actually remove any part-these they call node I want? Yes. Enter complexities level 2 : masquerauding with the references. For example, If I only want the audience to see just “…” without seeing the “This is DUcHo”, but the images stay. The simple thinking would be: goto the place where the <p> tag ,inside the div tag, and contain the “This is DucHo” then remove it. You do it like this:

var duchothisis = document.getElementById(1);
if (duchothisis.parentNode){
   duchothisis.parentNode.removeChild(duchothisis);
}

Bem… That is done. Is it easy? It is somewhat

So okay, I can just inspect the websites, see where those ads are, modify its Dom so those are removed or hidden, then I called its good. It is not that simple. But first, let’s look at the approach.

B1.A. Where those ads are?

truyen.vnsharing.net: