Making a simple Chrome Extension with JavaScript

#javascript #webdev #pwa #frontend

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:

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.

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.

{
    "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.

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:

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

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)