Have you ever needed to get the URLs of all your open tabs in Chrome? Whether you're a developer, researcher, or just a heavy browser user, having a simple way to retrieve and manage your open tab URLs can be incredibly useful. In this tutorial, I'll walk you through creating a Chrome extension that fetches and displays the URLs of all open tabs. By the end of this guide, you'll have a fully functional extension that you can customize and expand upon as needed.

Requirements

Before we start, ensure you have the following:

• A basic understanding of HTML, JavaScript, and JSON.

• Google Chrome installed on your computer.

Step-by-Step Guide

Step 1: Set Up Your Project

• Create the Project Folder: Create a new folder on your computer. Name it something like GetTabsURLs.

• Createmanifest.json: Inside the GetTabsURLs folder, create a file named manifest.json and add the following content:

    {
      "manifest_version": 3,
      "name": "Get Open Tabs URLs",
      "version": "1.0",
      "permissions": ["tabs"],
      "background": {
        "service_worker": "background.js"
      },
      "action": {
        "default_popup": "popup.html"
      }
    }
  

  • The manifest.json file is like the blueprint for your Chrome extension. It tells Chrome what your extension does, what permissions it needs, and which files to use.

  • manifest_version: This specifies the version of the manifest file format. Version 3 is the latest and most current.

  • name: The name of your extension. This is what users will see.

  • version: The version of your extension. It helps in managing updates.

  • permissions: This is where you ask for permission to access browser tabs. Without this, your extension won't be able to get the URLs.

  • background: This section specifies the background script that runs behind the scenes. In our case, background.js will handle the functionality when the extension icon is clicked.

  • action: Defines the UI of your extension’s icon. The default_popup points to the HTML file that will show up when users click the icon.

Step 2: Create the Background Script

• Createbackground.js: In the same folder, create a file named background.js and add the following content:

    chrome.action.onClicked.addListener((tab) => {
      chrome.tabs.query({}, (tabs) => {
        let urls = tabs.map(tab => tab.url);
        console.log(urls);
        alert(urls.join('\n'));
      });
    });
  

  • This is the script that runs in the background of your extension. It listens for clicks on your extension’s icon and then performs actions accordingly.

  • chrome.action.onClicked.addListener: This listens for clicks on the extension icon. When the icon is clicked, the provided function is executed.

  • chrome.tabs.query({}, (tabs) => {...}): Queries all open tabs in the browser. The empty object {} means we're interested in all tabs.

  • tabs.map(tab => tab.url): Extracts the URL from each tab object.

  • console.log(urls): Logs the URLs to the console, which can be useful for debugging.

  • alert(urls.join('\n')): Displays the URLs in a pop-up alert, each on a new line.

Step 3: Create the Popup Interface

• Createpopup.html: In the GetTabsURLs folder, create a file named popup.html with the following content:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Get Open Tabs URLs</title>
      </head>
      <body>
        <button id="getTabs">Get Tabs URLs</button>
        <pre id="output"></pre>
        <script src="popup.js"></script>
      </body>
    </html>
  

  • This is the HTML file that creates the user interface for your extension’s popup.

  • <button id="getTabs">Get Tabs URLs</button>: A button users will click to fetch the URLs.

  • <pre id="output"></pre>: A pre element where the URLs will be displayed in a preformatted text style.

  • <script src="popup.js"></script>: Links to the JavaScript file that will handle button clicks and update the output.

Step 4: Create the Popup Script

• Createpopup.js: Finally, create a file named popup.js with the following content:

    document.getElementById('getTabs').addEventListener('click', () => {
      chrome.tabs.query({}, (tabs) => {
        let urls = tabs.map(tab => tab.url);
        document.getElementById('output').textContent = urls.join('\n');
      });
    });
  

  • This script controls the behavior of the popup interface.

  • document.getElementById('getTabs'): Selects the button element by its ID.

  • .addEventListener('click', ...): Adds a click event listener to the button.

  • chrome.tabs.query({}, (tabs) => {...}): Queries all open tabs.

  • tabs.map(tab => tab.url): Maps the tabs to their URLs.

  • document.getElementById('output').textContent = urls.join('\n'): Updates the pre element with the list of URLs, separated by new lines.

Step 5: Load and Test Your Extension

• Load the Extension in Chrome:

  • Open Chrome and navigate to chrome://extensions/.

  • Enable Developer mode by toggling the switch in the top right corner.

  • Click the Load unpacked button and select the GetTabsURLs folder.

• Use the Extension:

  • After loading the extension, you should see its icon appear in the toolbar (it might be under the puzzle piece icon).

  • Click on the extension icon to open the popup.

  • In the popup, click the Get Tabs URLs button.

  • The URLs of all open tabs will be displayed in the pre element in the popup.

Optional:

Adding an Icon

If you want to add an icon to your extension:

1. Create anicons folder: Inside your GetTabsURLs folder, create a new folder named icons.

2. Add Icon Images: Add your icon images (e.g., icon.png) in different sizes (e.g., 16x16, 48x48, 128x128).

3. Updatemanifest.json: Update your manifest.json to include the icons:

    {
      "manifest_version": 3,
      "name": "Get Open Tabs URLs",
      "version": "1.0",
      "permissions": ["tabs"],
      "background": {
        "service_worker": "background.js"
      },
      "action": {
        "default_popup": "popup.html",
       "default_icon": {
                "16": "dog_1998627.png",
                "48": "dog_1998627 (1).png",
                "128": "dog_1998627 (2).png"
            }
        },
        "icons": {
            "16": "dog_1998627.png",
            "48": "dog_1998627 (1).png",
            "128": "dog_1998627 (2).png"
        }
    }
   

Summary

• manifest.json: Sets up the extension’s basic information and permissions.

• background.js: Handles clicks on the extension icon and retrieves tab URLs.

• popup.html: Creates the visual layout of the popup.

• popup.js: Manages interactions within the popup, like fetching and displaying URLs.

By understanding each part of the code, you'll be able to modify and enhance the extension to fit your needs. Happy coding!

You can find the full code, just click on this link.