Develop your extension for Chrome

Sam Madadi — Mon, 07 Sep 2020 05:22:22 +0000

Do you want some extra functionality in your browser which is not available? Worry not, you can add that with extensions.

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

In this post I will show you how I developed a simple extension for Chrome browser, which copies url of all open tabs in the browser.

First, create a directory to store all the files needed for the extension. I named mine as "copy-tabs", you can name anything you want.

Next, create manifest.json file, it will contain the information about our extension. Then add the following in the manifest file:

{
    "manifest_version": 2,
    "name": "Name of your extension",
    "description": "Describe your extension.",
    "version": "1.0.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs"
    ]
}

We want to get information about browser tabs, hence we added tabs intent in permissions field of the manifest file.

For details about the fields of manifest file, please visit Manifest File Format.

The functionality of this extension is; when user clicks the extension icon, a pop-up will open, the pop-up will contain a button to copy url of all open tabs when clicked. For the pop-up we create an HTML file, and add the following:

<h3 class="title">&nbsp;<img src='icon.png'>&nbsp;Copy Tabs</h3>
<button id="copyUrls" class="btn">Copy URL of Open Tabs</button>
<div id="log"></div>

Add some styles to pop-up content:

html {
    width: 15em;
    text-align: center;
}
.title {
    display: flex;
    padding-bottom: 5px;
    border-bottom: #18ab29 solid 1px;
    align-content: center;
}
.btn {
    margin: 0 auto;
    background-color: #44c767;
    border-radius: 5px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    padding: 5px;
}
.btn:hover {
    background-color: #5cbf2a;
}

Finally, we add the JavaScript to make the extension functional.

We add the click event listener to the button in the pop-up.

document.addEventListener('DOMContentLoaded', function () {
    var copyBtn = document.getElementById('copyUrls');
    copyBtn.addEventListener('click', function () {
        loadWindowList();
    });
});

To get the url of open tabs, we create loadWindowList function inside which we call getAll method of chrome.windows API. getAll has two parameters, first is an (optional) object, and the second is a callback function.

function loadWindowList() {
    chrome.windows.getAll({ populate: true }, function (windowList) {
        for (var i = 0; i < windowList.length; i++) {
            for (var j = 0; j < windowList[i].tabs.length; j++) {
                urls += windowList[i].tabs[j].url + '\n';
            }
        }
        copyTextToClipboard(urls);
    });
}

To implement copy feature, we create another function copyTextToClipboard. This function will call writeText property of the Clipboard interface. writeText property writes the specified content to the system clipboard.

function copyTextToClipboard(text) {
    navigator.clipboard.writeText(text).then(function () {
        appendToLog('URL of open tabs copied to clipboard successfully!');
    }, function (err) {
        appendToLog('Could not copy URLs: ' + err);
    });
}

To show any message in the pop-up we create another function:

function appendToLog(txt) {
    document.getElementById('log')
        .appendChild(document.createElement('p'))
        .innerText = txt;
}

Now our extension is ready and we can test it in the browser.

Testing the extension

Open Google Chrome and go to "Extensions" from "Settings",
Enable "Developer mode" on top right,
Click on "Load unpacked" button, and select the extension folder,
You will see your extension loaded in the "Extensions" page.

Once loaded, you can test your extension.

You can get the source code for this extension from Github.

That's all for this post, thanks for reading.

DEV Community: Sam Madadi

Develop your extension for Chrome

Testing the extension