DEV Community

Robert Nowotniak
Robert Nowotniak

Posted on

Creating a Chrome extension in JavaScript

I was greatly surprised today, how simple it is to write your own extensions for Google Chrome browser. No SDK installing, no extension compilation process, nor anything like this.

Just a folder with a bunch of files and literally a few dozen lines total (JavaScript, HTML, manifest.json and the extension icon).

In below example I show how to create a simple extension with an icon in Chrome toolbar. When you click the icon, a popup comes up (written in HTML). When you click the button in popup, JS dialog is displayed, and a minor modification in the current page DOM is applied (change <body> element background color to red).

Alt Text


  "manifest_version": 2,

    "name": "My test extension Rob",
    "description": "This is a Chrome extension lab",
    "version": "0.1",

    "content_scripts": [
      "matches": ["https://*/*", "http://*/*"],
      "js": ["dom.js"]

    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    "permissions": [

Enter fullscreen mode Exit fullscreen mode


<!doctype html>
    <title>My extension</title>
    <script src="ext1.js"></script>
  <div style="background-color: #ddd; width:300px">
    <h1>This is my extension Rob</h1>
    <button id="btn1">Przycisk1</button>
Enter fullscreen mode Exit fullscreen mode
document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('btn1');
  checkPageButton.addEventListener('click', function() {

        chrome.tabs.getSelected(null, function(tab) {
          chrome.tabs.sendRequest(, {action: "getDOM"}, function(response) {

  }, false);
}, false);
Enter fullscreen mode Exit fullscreen mode
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
 if (request.action == "getDOM") {
        alert('Rob\n'+document.title); = 'red';
Enter fullscreen mode Exit fullscreen mode

You can clone this extra simple example from my github repo:

Top comments (0)