Making a simple Chrome Extension with JavaScript
Tags: javascript, webdev, pwa, frontend
Published: 2020-11-13 21:58:08

We will create a simple and fun chrome extension with javascript very very quickly.


Assume that we are eating our meal and reading an article (or tweets) from laptop but we cannot scroll down because our hands are not clean... 
**Let's create a chrome extension which is gonna scroll down automatically for us!**


We will need three files: "manifest.json", "background.js", "foreground.js". Our files should looks like:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tq82sssfmqx2b1giahc6.png) 


**1) Upload our extension**
After creating our files, we will upload our extension to chrome extensions. So we can see how it works.


a) Go to this url: chrome://extensions/
b) Click 'Load unpacked' button.
c) Choose your folder which includes your codes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kayf9qyjsmhrbblpjv69.png)


That is it. We are ready. (Don't forget to click 'update' button when you add new code lines.) 


**2) manifest.json**
Every chrome extension needs a manifest.json. Chrome will handle our extension, thanks to this file.


```json
{
    "name": "Infinite Scroll",
    "version": "1.0",
    "description": "Scroll without fingers.",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "js/background.js"
        ],
        "persistent": true
    },
    "permissions": [
        "activeTab",
        "contextMenus"
    ]
}
```


Important points about manifest.json:

a) name, version, manifest_version fields are COMPULSORY.
b) manifest_version should be 2 to be working on modern chrome versions.
c) in 'permissions' field, We declare the chrome extension methods we will use. 


**3) background.js**

This file will work in background and we will use chrome extension methods here. For our example, we will use: 

a) **activeTab** which we will be using for accessing to active chrome tab. 

b) **contextMenus** which will be using for creating a context menu.


```javascript
var contextMenus = {};

// Here is how we create a context menu for our extension.
contextMenus.createInfiniteScroll =
    chrome.contextMenus.create(
        {
            "title": "Infinite Scroll"
        },
        function () {
            if (chrome.runtime.lastError) {
                console.error(chrome.runtime.lastError.message);
            }
        }
    );

// Here is gonna be triggered when we clicked on our item on the menu.
chrome.contextMenus.onClicked.addListener(contextMenuHandler);


function contextMenuHandler(info, tab) {
// Execute the file which will be working on foreground.
    chrome.tabs.executeScript({
        file: 'js/foreground.js'
    });
}
```


Now, when you make a right click on a page, you should see our extension on the context menu, like:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9k70533jeg4zbz0vraxl.png)



**4) foreground.js**
We will write our main codes here. When you run your extension, this file will be triggered.


```javascript
let i = 0;

var count = window.prompt("Scrolling delay (seconds) ?", 2);

const start = setInterval(function () {
    i = i + 50;
    window.scrollBy({
        left: 0,
        top: i,
        behavior: "smooth"
    })
}, count * 1000)
```

Let's click our extension on the context menu **AND SEE WHAT IS GONNA HAPPEN** 🎉



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v4hyoojbwxii3s644s5i.gif)


For more detailed guide about chrome extensions: 
https://developer.chrome.com/extensions

Thank you for reading! 🍕

***

**Github repo of these codes:**
https://github.com/inancakduvan/chrome-extension-infinite-scroll

**My github profile:**
https://github.com/inancakduvan

**My twitter account:**
https://twitter.com/InancAkduvan