Develop your extension for Chrome
Tags: javascript, html, css, chrome
Published: 2020-09-07 05:22:22

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:
```json
{
    "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](https://developer.chrome.com/extensions/manifest).

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:
```html
<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:
```css
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.
```javascript
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.

```javascript
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.

```javascript
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:
```javascript
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](https://github.com/skm2017/copy-tabs).

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