Chrome extension in under 60 seconds

Chrome is most popular browser, according to this Wikipedia article more than 50% of Internet users are using it. So it has pretty good coverage, and it makes sense to start from it when it comes to browser extensions.

In this tutorial I will develop the simplest Chrome extension ever in under 60 seconds. This extension will look for certain word on the website and replace it with other word. No buttons, no interface, pretty straightforward. For promotinal purposes I added example pop-up and browser icon but it is not needed.

You can find entire code used in this tutorial on Github.

First I will create chrome-extension folder and inside it I will put manifest.json file. Manifest as expected is holding extension details like name, icon, permissions and many more.


{
  "manifest_version": 2,

  "name": "Simple String Replace",
  "description": "This extension will replace all occurrences of word Best to Codingo",
  "version": "1.0",

  "browser_action": {
    "default_icon": "chrome-codingo.png",
    "default_popup": "switcher.html"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["switcher.js"],
      "run_at": "document_end"
    }
  ]
}

Browser action array is defining icon displayed in browser and default pop-up html file.

Content scripts is where I define which js file is activated on certain urls, and when. In this example it is activated for all urls which are using http protocol.

Pop-up html is like simple web page. I loaded some css files there and js libraries.


<!doctype html>
<html>
<head>
    <title>Codingo Tuts - Chrome extension in under 60 seconds</title>
    <script src="switcher.js"></script>
    <link rel='stylesheet' id='googlefont1-css'  href='http://fonts.googleapis.com/css?family=Raleway%3A400%2C100%2C200%2C300%2C500%2C600%2C700&#038;ver=4.2.2' type='text/css' media='all' />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="company">
        <img src="codingo.png"/> Codingo Tuts
    </div>
<p>Codingo LTD is development agency, with extensive experience in Mobile APIs, Email solutions, SaaS platforms, mobile applications, many prototypes etc.</p>

<p>Now we decided to pass some of our knowledge in form of tutorials through Codingo Tuts project.</p>

<p>To find out more follow link bellow.</p>

<a href="http://tuts.codingo.me" target="_blank">Start learning</a>
</body>
</html>

Styling for this pop-up it in styles.css and it is not obligatory.


body{
    min-width: 300px;
    font-family: Raleway, sans-serif;
}
img{
    width:50px;
    float: left;
    padding-right:10px;
}
.company{
    vertical-align: middle;
    line-height: 50px;
    font-size:34px;
    color:rgb(119, 119, 119);
}
p{
    font-size: 13px;
}
a{
    font-size: 16px;
}

Main logic is located in switcher.js. This example will look for word Best and replace it with Codingo.

Options in RegExp function are for:

  • g - look for every occurrance
  • i  - case-insensitive search

Full reference of RegExp at W3 Schools.


    document.body.innerHTML = document.body.innerHTML.replace(new RegExp("Best", "gi"), "Codingo");

Now I have everything, and I need to test it. I will direct my Chrome to chrome://extensions/ and enable Developer mode.

After this Chrome will display Load unpacked extensions... button. There I will locate my new extension folder and select it. Now I can Enable this extension.

Enabling extension in Chrome configuration

It is enabled, and I will test it by searching on Bing for word Best. As you can see below it is working.

Extension in action

This solution is working but it is not so perfect cause document.body.innerHTML = document.body.innerHTML.replace(new RegExp("Best", "gi"), "Codingo");  will look entire web page like one string and do string replace on it. After that it will fill page body with that new string. This will make a mess in DOM, meaning some fields and actions may not work.

Because of this I will improve switcher.js with implementation which will loop through each DOM element one by one. And for each child it will search for node value, and that is what I need.


var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/Best/gi, 'Codingo');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

This improved solution is taken from here.

Now everything is working perfectly.

Trending

Newsletter

Subscribe to our newsletter for good news, sent out every month.

Tags