Let's remove "Corona" from our view -A chrome extension

We are all tired seeing "corona" everywhere, aren't we? , but what could we do? we could block it! , but how?
Let's see...

Firstly, we will create a new folder on our desktop named corona blocker , then open this folder in Visual Studio Code.

Once we are done with that ,we are all set to write our code.

Now create a file named manifest.json in the folder. Now this manifest.json file is the captain of the ship.

we provide version and name in the file

{ "manifest_version" : 2, "name" : "Block Corona", "version": "0.1.0", }

The name we used here will be made as our extension name in the chrome which is Block Corona,in our case.

Let us create two more files

script.js and styles.css

In the manifest.json we write

"content_scripts" : [
        {
            "matches": ["<all_urls>"],
            "js": ["script.js"],
            "css":["styles.css"]
        }
]

Let us understand the above code

"matches": ["<all_urls>"]

we are applying the code we write to each and every url, which means the extension we use is applicable for every url

"js": ["script.js"],
  "css":["styles.css"]

whatever we code in these both files effects our output

Lets us see how our manifest.json file look like

{
    "manifest_version" : 2,
    "name" : "Block Corona",
    "version": "0.1.0",
    "content_scripts" : [
        {
            "matches": ["<all_urls>"],
            "js": ["script.js"],
            "css":["styles.css"]
        }
    ]
}

Now we have everything ready!
Let's go to scripts.js file,

Note: our target word is corona

replaceText(document.body)
function replaceText(element){
    if(element.hasChildNodes()){
        element.childNodes.forEach(replaceText)
    } else if (element.nodeType === Text.TEXT_NODE) {
    if(element.textContent.match(/corona/gi)) {
        const newElement = document.createElement('span')
        newElement.innerHTML = element.textContent.replace(/(corona)/gi,
        '<span style ="background-color: black;color:black;">$1</span>')
    element.replaceWith(newElement)

Let's understand the code,

text doesn't have childNodes ,but we are checking each word with our target word corona if we find the word then we are going to create a span element

if(element.textContent.match(/corona/gi)) {
        const newElement = document.createElement('span')

we have given span some styling

 '<span style ="background-color: black;color:black;">$1</span>')

Which gives us black color on the target word.

element.replaceWith(newElement)

we are replacing existing target word with newElement which is black box. wohhooo! we have written our code.

Now open a new tab go to chrome://extensions , toggle developer mode. click on load unpacked, select folder named corona blocker.

you should now be able to see name of your extension which you have named earlier in manifest.json file,which is block corona unable it, reload. Now open a new tab and open any web page our target word will be blocked.

yay! we are done. We have sucessfully blocked it.

Do give it a try and let me know.
Thanks for reading
happy learning!