Highlight Tabs with Edge Extension

Overview

Today, I will introduce you how to highlight Edge browser tabs when you double click on the active tab page. Every time you click on the tab page, you get highlighted tabs so that you can see which tabs are important for you throughout your web search activity by using this Edge Extension.

Edge Extension Link

Using Chrome Extensions API

• chrome.tabs.get(): To get tab information, I will use this tabs.get() method.
• chrome.tabs.highlight(): To highlight the specific tab(s), I will use this tabs.highlight() method.

Now, I will show you the exact JavaScript code here.

1. content.js

This content.js will be injected to each tab page.

The “tabInfo” object in the sendMessage() method is not related to this highlighting feature. It is used to show the page title and URL to the popup dialog, see the previous post.

For the highlighting feature, the to send message to the background.js is important. Because the event argument “sender” has the “tab.id” information. With this “tab.id”, I’ve got more details about the tab.

document.addEventListener('dblclick', (event) => {    
    chrome.runtime.sendMessage({
        action: "tabDoubleClicked",
        tabInfo: { title: document.title, url: location.href }
    });

    console.log(document.title);
});

2. background.js

This is a part of the background.js code. Complete code is located in the repository.

chrome.tabs.get()

You can see the code “chrome.tabs.get(sender.tab.id, (tab) => { }“.
Yes, this is just the code to get a tab information by passing “tab.id” which is sent from content.js! The tab.index and tab.windowId are needed to highlight the tab. This is the reason why I need to get a tab information by using tabs.get() API.

chrome.tabs.highlight()

You can see the code “chrome.tabs.highlight()“.
Yes, this is just the code to highlight the specific tab(s). You can set one or more tabs to highlight, but it needs to be defined as numeric array of tab index.

let doubleClickedTab = null;
let highlightedTabIndexes = [];

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {

    if (message.action === 'tabDoubleClicked') {
        doubleClickedTab = message.tabInfo;

        chrome.tabs.get(sender.tab.id, (tab) => {
            const tabIndex = tab.index;
    
            if (!highlightedTabIndexes.includes(tabIndex)) {
                highlightedTabIndexes.push(tabIndex);
            }

            chrome.tabs.highlight(
                { tabs: highlightedTabIndexes, windowId: tab.windowId },
                (window) => {console.log('Highlighted!');} 
            );
        });
        return true;
    }
}

3. manifest.json

Lastly, I will show you a part of manifest.json file for background.js and content.js and permission corresponding to this feature.

"action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content-scripts/content.js"]
        }
    ],
    "background": {
        "service_worker": "background.js"
   },
    "host_permissions": ["<all_urls>"],
    "permissions": [
        "history",
        "favicon",
        "scripting",
        "tabs",
        "activeTab"
    ]

4. Reload and Test the Edge Extension

I open multiple tabs in Edge window. And double clicked on every other tab page. (Not double-clicking on the tab title!)

Here is the image that shows double-clicked tabs are highlighted.