Introduction :

In this Blog, we are going to discuss how to create a browser extension that performs tab events, for example, creating a new tab with a current website URL.

Browser extension

A browser extension is like a mini-app that adds functionality to your web browser. It typically enhances the browsing experience by providing features like ad-blocking, password management, or quick access to certain websites. Users can download and install extensions from the browser's extension store. Once installed, they appear as icons or buttons within the browser interface, allowing users to easily access their features with just a click. However, users should be cautious as some extensions may compromise privacy or security.

JavaScript:

JavaScript is a versatile programming language commonly used for web development. It enables dynamic and interactive content on websites by allowing developers to manipulate webpage elements and respond to user actions. With its widespread support across browsers, JavaScript has become integral to modern web development.

Flow Diagram :

Prerequisites :

Javascript

Steps :

Step 1: Create a manifest.json file

The manifest.json file is crucial for Chrome extensions as it serves as a blueprint, defining the extension's structure, permissions, and functionality for seamless integration with the Chrome browser ecosystem.In a manifest.js file, permissions are specified to grant or restrict access to various resources or features, ensuring that the extension operates within defined security boundaries.

First, you need to create the manifest.json file

As shown in the following screenshot.

In manifest.json, add the following code.

{
  "manifest_version": 3,
  "name": "Tab events",
  "version": "1.0",
  "description": "",
  "action": {
    "default_popup": "Popup/popup.html"
},
"background": {
    "service_worker": "background.js"
},
"permissions": [
  "activeTab",
  "tabs"
  "tabCapture",
  "storage",
  "scripting"
],
"host_permissions": [
  "<all_urls>",
  "*://*/*"
],
"content_scripts": [
    {
        "all_frames": true,
        "matches": [
            "http://*/*",
            "https://*/*",
            "<all_urls>"
        ],
        "js": [
            "content.js"
        ]
    }
]

}

Manifest Version:

Specifies the version of the Chrome Extension Manifest file format being used. In this case, it's version 3.

Name:

The name (maximum of 45 characters) is the primary identifier of the extension and is a required field.

Version:

Indicates the version number of the Chrome extension. This helps users and developers track updates and changes.

Description

A plain text string (no HTML or other formatting; no more than 132 characters) that describes the extension.

Describe what your application does. Keep it concise yet informative

Action:

default_popup: Specifies the HTML file that will be displayed when the user clicks on the browser action. It's located in the "Popup" directory and named "popup.html".

background.js:

service_workers: Points to the JavaScript file "background.js" which serves as the service worker handling background tasks for the extension.

Permission :

activeTab: Allows access to the active tab.

tabs: Grants access to browser tabs.

tabCapture: Enables capturing the content of tabs.

storage: Permits access to Chrome storage.

scripting: Allows injecting scripts into pages.

Host permission :

<all_urls>: Grants access to all URLs.

*:/ / */ *: Grants access to all protocols and domains.

Content_Scripts :

all_frames: true - Allows the content script to run in all frames within the tab.

matches: ["http:///", "https:///", "<all_urls>"] - Specifies the URLs where the content script should be injected.

js: ["content.js"] - Specifies the JavaScript file to be executed as the content script.

A sample .manifest.json file can be found in the following git repository file.

https://github.com/episyche/browser_extension_tab_events_communication/blob/master/manifest.json

Step 2: Create popup files

1) Create a file named popup.html

You need a popup.html file to define the structure and content of a browser extension's popup window, which provides a user interface for interacting with the extension's functionality.

In popup.html, add the following code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab events</title>
    <script src="popup.js"></script>
</head>
<body style="background: #f3f4f6;">
    <div style="width: 310px; height: 400px; background: #f3f4f6; display: block;" id="afterlogin">
        <div style="width: 100%; ">
            <div style="padding-top: 7%;">
                <div style="display: flex;flex-direction: row;
                    width: 200px;
                    margin-left: auto; 
                    margin-right: auto;
                    background-color: orangered;
                    border-radius: 5%;
                    height: fit-content;
                    gap: 7%;
                    padding-left: 7%; padding-right: 2%;
                    cursor: pointer;
                    " id="start_tab_events">
                    <div style="margin-top: 2px;
                    font-size: 22px; color: white;
                     border: #353030; width: fit-content;
                      height: fit-content; padding-top: 2%;
                       padding-bottom:2%;">
                        Start
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

A sample .popup.html file can be found in the following git repository file.

https://github.com/episyche/browser_extension_tab_events_communication/blob/master/popup.html

if you want to change the design edit the popup.html file.

2) Create a file named popup.js

You need a popup.js file in a Chrome extension to control the behavior and functionality of the popup window that appears when users click on the extension's icon in the browser toolbar.

In popup.js, add the following code.


window.onload = async function () {
    console.originalWarn = console.warn;
    console.warn = function () {
        if (arguments.length == 1 && typeof arguments[0] === 'string' && arguments[0].startsWith('Manifest v2 support is deprecated and will be removed in a future version of Chrome.')) {
            return;
        } else {
            console.originalWarn.apply(console, arguments);
        }
    };
    var start_tab_events = document.getElementById('start_tab_events')
    if (start_tab_events) {
        start_tab_events.onclick = () => {
            chrome.runtime.sendMessage({ action: 'start_tab_events' }, function (response) {
                window.close()
            })
        }
    }
}

This JavaScript code is for an extension's popup.js file.

A sample .popup.js file can be found in the following git repository file.

https://github.com/episyche/browser_extension_tab_events_communication/blob/master/popup.js

Step 3: Create a background.js file and content.js file

1) Create a file named background.js file

The background.js file is necessary for a Chrome extension to manage events, perform tasks, and maintain the functionality that runs in the background of the browser.

In background.js, add the following code.


console.originalWarn = console.warn;
console.warn = function () {
    if (arguments.length == 1 && typeof arguments[0] === 'string' && arguments[0].startsWith('Manifest v2 support is deprecated and will be removed in a future version of Chrome.')) {
        return;
    } 
};
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.action === 'start_tab_events') {
        let page_url;
        chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
            page_url = tabs[0].url
    
            chrome.windows.create({
                url: tabs[0].url,
                width: 370,
                height: 600,
            }, function (window) {
                var tabId = window.tabs[0].id;
                chrome.storage.sync.set({ mobiletabid: tabId });
            });
        });
    }
    else if (request.action === 'mousedown') {
        chrome.storage.sync.get("mobiletabid", function (data) {
            if (Object.keys(data)) {
                if (data.mobiletabid) {
                    chrome.tabs.sendMessage(data.mobiletabid, { message: 'id clicked', tabId: data.mobiletabid, "click_postion": request.event });
                }
            }
        })
    }
    chrome.tabs.query({ currentWindow: true, active: true }, function (tabArray) {
    }
    );
    sendResponse({ status: 'ok' });
    let scrollPositions = {};
});

A sample .background.js file can be found in the following git repository file.

https://github.com/episyche/browser_extension_tab_events_communication/blob/master/background.js

2) Create a file named content.js file

You need a content.js file in a Chrome extension to interact with and manipulate the content of web pages accessed by the extension's users.

In content.js, add the following code.

if (chrome.runtime) {
  console.originalWarn = console.warn;
  console.warn = function () {
      if (arguments.length == 1 && typeof arguments[0] === 'string' && arguments[0].startsWith('Manifest v2 support is deprecated and will be removed in a future version of Chrome.')) {
          return;
      } 
  };
}

A sample .content.js file can be found in the following git repository file.

https://github.com/episyche/browser_extension_tab_events_communication/blob/master/content.js

Step 4: Add the Chrome extension to the browser

First of all, log in with your account.

Click the Extension in the top right in the header bar.

As shown in the following screenshot.

In the pop-up window click the Manage extensions. as shown in the following screenshot.

And switch to Developer mode. as shown in the following screenshot

Click on the Load unpacked. as shown in the following screenshot.

Choose our build File and click on the open. as shown in the following screenshot.

Finally, our Extension was created. as shown in the following screenshot.

Click on the Tab events. as shown in the following screenshot.

click on the Start Button. as shown in the following screenshot.

Result

Now open a new tab. By default, our predefined URL will open

A Sample GitHub repo, with all the required configurations, is given below.

https://github.com/episyche/browser_extension_tab_events_communication

Conclusion

That’s all! Now you know how to create a browser tab events communication using JavaScript. I hope this was useful and that you will build many different cool things.

How to create a browser extension tab events communication using JavaScript?