DEV Community

İnanç Akduvan
İnanç Akduvan

Posted on • Updated on

Making a simple Chrome Extension with JavaScript

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

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

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"
    ]
}
Enter fullscreen mode Exit fullscreen mode

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'
    });
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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)
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Discussion (0)