Content blocking, chromium browser extension

    The main trend of this year is “blocking”, the extension described below, which allows you to feel the power over content in the browser.


    I remember a long time ago, in my childhood, when watching TV, during advertising blocks, there was always some kind of break as a school break, go to the kitchen or latrine, switch to other channels, with age a smoke break was added.

    Now I rarely watch TV, I read news on the Internet, I use ad blockers. On the phone when they call and try to impose financial services or a window master, I hang up. Sometimes, with rare exceptions, there are interesting or funny commercials, but even such videos after the second viewing turn into regular advertising.

    A couple of years ago, I noticed that on all news sites, one could not say a day went by without news about bloggers: there is a conflict among bloggers or bloggers in the State Duma. A blogger is such a “some new name” and, as usual, “the very, very” blogger of all the other bloggers. At the same time, they rarely write criteria for why he is “the most, the most”, so that the reader can watch videos or search the Internet, which is in the next blogger “himself, himself”. Bloggers are introducing a new word “sandpaper”, bloggers are up in arms, bloggers are doing their show.

    The last year about news bloggers has become less, the leader now “B ... wah”, I don’t specifically mention, there is a risk to turn the article into another news about “B ... woo”, and so every day there is new news. Journalists are often literally forced to follow the link.

    I would write a few more examples, but I will not, as the one described above is not an attempt to be good by means of criticizing others. With any things can be brute force or overdose. I am more than confident that everyone has their own “leaders” in the news, which they would prefer not to see, without them their day would be better.

    The above examples are essentially a kind of advertising, but spreading in the form of news, do not fall under any blockers of advertising. Many browsers have built-in ad blocking, but unfortunately, there is no way to block content by words in the content. I tried to search in extensions, but I did not find it with the necessary description, ad blockers caught my eye, who seemed to be able to block by words, but did not try to install. Saw, recently, several articles that not all extensions are safe, and it is more interesting to write your own, simple, only with the necessary function of cutting out the content.

    There are many articles on creating extensions, but this article is not an instruction for creating.
    The first version of the extension turned out just a couple of hours, the cutting algorithm is simple and versatile. The flip side of universality is that the algorithm may not be suitable for all sites. But for the visibility of the expansion, I had to write a lot more code to display the counters, the hidden content for each page.

    The content_script.js part is the main content blocking logic:

    let search = document.evaluate('/html/body//*[contains(., "Б...в") and count(child::node())<childsLimit]', document.body, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
    let thisHeading = search.iterateNext(); 
    while (thisHeading) {
      if (thisHeading.tagName !== 'script' && thisHeading.style.display != 'none') {
        thisHeading.style.display = 'none';
      }
      thisHeading = search.iterateNext();
    }

    In the above fragment, you can see that the “document.evaluate” method is used. When searching for text in tags, the root elements also fall into the results. For example, the text of the entire page, the text of the news block, etc. To eliminate unnecessary elements, use the second condition on the number of nested child. In my case, the number 9 came up. On three sites, the excess is hidden quickly and easily, although sometimes there is a photo on one of the sites in a certain block, but without a link to the news and links to the picture.

    There was initially a desire to make an extension settings page, maybe I will do later. In the meantime, the basic settings are made right in the code.

    Part of background.js - content blocking settings:

    let childsLimit = 9;
    let blockString = '[contains(., "Б...в") and count(child::node())<childsLimit]';
    let blockOnlyUrlOpt = false;
    let urlOptions = [{url: 'https://exampleSite.com', unBlock: true, childsLimit: 4}];
    

    The first variable "childsLimit" allows you to set the overall level of nesting, blocking elements.

    The second variable “blockString” contains the xpath condition, when adding a new word, you must copy everything together with square brackets and add it to the end with the word “or” and then replace the search word with quotation marks.

    let blockString = '[contains(., "СловоБлокировки1") and count(.//*)<childsLimit] or [contains(., "СловоБлокировки2") and count(.//*)<childsLimit]';
    

    The third variable “urlOptions” allows you to fine-tune for different sites.
    Property "url" - contains the address for which the setting will be applied.
    The “unBlock” property - a boolean value true allows not to block content on the site specified in the “url”
    property “childsLimit” property of the nesting level of the content item being blocked.
    The fourth variable, blockOnlyUrlOpt, allows you to define common logic. If the value is “true,” the lock only works on the sites listed in the variable array “urlOptions”, where the “unBlock” property is “false”.

    Expansion files are available at the link.

    To install, you must:

    • Download all files in any convenient folder.
    • In the browser go to the extension and enable developer mode.
    • By the button “Load unpacked extension ...” specify a folder from item one.

    Developed and tested in the Opera browser, it should also work with other chromium browsers.

    Also popular now: