+ Reply Thread
#1

In a bricklayer's[1] terms, Programming as an act of instructing your computing device to do a certain thing or behave in a certain manner. In this same sense, you can also instruct your browser do a certain thing or behave in a certain manner. The possibilities of programming are endless so far the object you are programming provide the interface to work with.

How do you programme your browser?

To the best of my knowledge as am writing this article, there are 1 and/or 2 ways you can programme your browser and they are as follow:

1=> Creating browser addons or extensions: this allows you to extend the functionality of your browser.

1b=> Making Userscript with Tampermonkey or GreaseMonkey: You may not have the programming skillset to make a browser addons or extensions, but with the knowledge of CSS and Javascript you can use this option to do some stuff a browser extension could do, but it has some limitation. One good thing about userscript is the cross-browser compatibility, that is you don't have to download browser specific extension, either of Tampermonkey or GreaseMonkey will do the job.

2=> Check 1b above or any other source. Thanks


Let's try to programme our browser.

In this little guide, we will be using Tampermonkey to instruct our browser to perform a nice operation. First of all, you need to install Tampermonkey extension on your browser. Download for Firefox here or Chrome here.

Once the extension is installed, you’ll see a little icon in the top right hand corner of your browser window that looks like this:


To create a new script click on this icon, then select Create a new script… A new tab will open which looks like this:

So, let’s fill those details out. They’re all fairly self explanatory, except perhaps line 6 (which begins @match). Here, using a regular expression, you can specify a full or partial URL. When this regular expression matches your current URL, Tampermonkey will fire the script., this will make sure your script do not run on every page. But for this example am going to use https://www.nairaland.com/ and we will use it to block to nasty multi image bet advert. So my header is going to like like below:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.nairaland.com/
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==


Also you will notice that I introduce @require  at the last line, this will make sure jQuery (latest version) is loaded when this script is running, you can as well load as many as you need.

Let’s complete the whole user script by add some Javascript and CSS, so the whole code will look like below


// ==UserScript==
// @name         Nairaland Nasty Blocker
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Block Nasty Image on Nairaland.com
// @author       GoodMuyis
// @match        https://www.nairaland.com/*
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==

(function() {
    'use strict';
        // Your code here...

    $(document).ready(function() {
        $("head").append(`<style>img[src*="screenshot"]{display: none}<style>`);
    //end of ready()
    });

})();


So what am doing basically here is is the use jquery to `append()` to add addition css block to the end of `<head>` or above `</head>` on the current page. If you inspect element of the page you will find `<style>img[src*="screenshot"]{display: none}<style>` above `</head>`.


What the CSS line do is to find the matching DOM element that match the css selector `img[src*="screenshot"]` and apply display `display:none` rule to it, which will hide all image that has the keyword `screenshot` in its filename.


So save and test your script, it run successfully, you will see a red icon in the Tampermonkey icon on your browser toolbar, indicating the number of script running on that page, like image below, in my case i have 1 running.



For testing purpose, use the page here or any other page. If you continue to the end of this guide, the complete code should work anywhere on nairland.com


There are lot of stuff you can do with userscript. Another example is if I don’t want to see those 300x100 ads on nairaland you can still use a CSS rule to hide or use jQuery function to remove them from the page. Example below:


Using CSS to hide the ads

The CSS selector for the wrapper div for the ads (both top and bottom) is `vertipics`

So addition CSS rule to the script above  will be:

.vertipics{display:none !important}

I had `!important` to sure we override existing css rule


Using jQuery to remove the Ads

Simply use

$(".vertipics").remove();
the element will be removed from the page.


Here is the complete code, copy and paste

// ==UserScript==
// @name         Nairaland Nasty Blocker
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Block Nasty Image on Nairaland.com
// @author       GoodMuyis
// @match        https://www.nairaland.com/*
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==


(function() {
    'use strict';
        // Your code here...

    $(document).ready(function() {
        $("head").append(`<style>img[src*="screenshot"]{display: none} .vertipics{display:none !important}<style>`);
        $(".vertipics").remove();
    //end of ready()
    });


})();


The end

You can perform a more advanced operation with Userscript, like connecting to API, Developer can Auto fill forms for testing and so on. If you search greasyfork.org or openuserjs.org you will find many functional user scripts.

I hope you have enjoyed the guide and also learn that you can Programme your browser, thanks for ready, kindly leave a comment. If you are yet to signup on africoders.com, kindly Do here it’s free and you Browse AfricaCoder on Freebasic for Free.


Note: For public release of your userscript, you can upload it to greasyfork.org, openuserjs.org or any other place, with this you can push update, fixes and patches and your user won't have to border about Manual update


If you see any typo I will fix em soon, I wrote this in a hurry to meet up with my Freelance job. Am a Wordpress developer, I can install a Nice Wordpress theme for yous website, I can clone and customize too.

#2

bricklayer also mean layman, as-in lay, lay block

#3
Nice job
Back to top