Make a chrome extension to save the URL of all the current tab under an instance and open them whenever and wherever you want...
Tags: webdev, javascript, chrome, extensions
Published: 2023-06-04 11:45:42

## Lets Start
**Create a New Folder**

Inside It

**Create the manifest.json file:**

```
{
    "manifest_version": 2,
    "name": "URL Saver",
    "version": "1.0",
    "description": "Save and open URLs from currently opened tabs",
    "browser_action": {
      "default_popup": "popup.html"
    },
    "permissions": [
      "tabs",
      "storage"
    ]
  }
  

```


## Create the popup.html file:
**The popup.html file represents the popup window that appears when the extension's browser action button is clicked. It contains the user interface elements and logic for saving and opening URLs.**

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>URL Manager</title>
  <style>
.container {
      width: 300px;
      padding: 20px;
    }

    h1 {
      font-size: 20px;
      text-align: center;
      margin-bottom: 20px;
    }

    label {
      font-weight: bold;
      margin-bottom: 10px;
      display: block;
    }

    select {
      width: 100%;
      margin-bottom: 20px;
    }

    button {
      display: block;
      margin-bottom: 10px;
    }

    .instance {
      cursor: pointer;
      margin-bottom: 5px;
    }

    .instance-name {
      font-weight: bold;
    }

    .instance-urls {
      margin-left: 10px;
      list-style-type: disc;
    }

    .dropdown {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>
<body>
    <div class="container">
        <h1>URL Saver</h1>
        <h2>Instances</h2>
        <div id="instanceList"></div>
        <div class="dropdown">
          <span>URLs</span>
          <div class="dropdown-content" id="urlDropdown"></div>
        </div>
        <button id="saveButton">Save URLs</button>
      </div>
  <script src="popup.js"></script>
</body>
</html>

```

## Create the popup.js file:

**The popup.js file contains the JavaScript logic for handling user interactions and performing the necessary actions such as saving and opening URLs.**

```
document.addEventListener('DOMContentLoaded', function() {
    var instanceList = document.getElementById('instanceList');
    var urlDropdown = document.getElementById('urlDropdown');

    // Retrieve the saved instances from storage and display them
    chrome.storage.sync.get('instances', function(result) {
      if (result.instances) {
        var instances = result.instances;
        Object.keys(instances).forEach(function(instanceName) {
          appendInstance(instanceName, instances[instanceName]);
        });
      }
    });

    // Append an instance to the list
    function appendInstance(instanceName, instanceData) {
      var instance = document.createElement('div');
      instance.className = 'instance';

      var instanceNameElem = document.createElement('span');
      instanceNameElem.className = 'instance-name';
      instanceNameElem.textContent = instanceName;
      instance.appendChild(instanceNameElem);

      instance.addEventListener('click', function() {
        var windowId = instanceData.windowId;
        var urls = instanceData.urls;
        openUrls(windowId, urls);
      });

      instanceList.appendChild(instance);

      var dropdownLink = document.createElement('span');
      dropdownLink.textContent = instanceName;
      dropdownLink.addEventListener('click', function(event) {
        event.stopPropagation();
        var urls = instanceData.urls;
        displayUrls(urls);
      });

      urlDropdown.appendChild(dropdownLink);
    }

    // Save the URLs as an instance and update the list
    document.getElementById('saveButton').addEventListener('click', function() {
      chrome.windows.getCurrent({ populate: true }, function(window) {
        var urls = window.tabs.map(function(tab) {
          return tab.url;
        });

        var instanceName = prompt('Enter instance name:');
        if (instanceName) {
          var instanceData = {
            windowId: window.id,
            urls: urls
          };

          appendInstance(instanceName, instanceData);

          chrome.storage.sync.get('instances', function(result) {
            var instances = result.instances || {};
            instances[instanceName] = instanceData;

            chrome.storage.sync.set({ instances: instances });
          });
        }
      });
    });

    // Display the URLs in the dropdown
    function displayUrls(urls) {
      urlDropdown.innerHTML = '';
      urls.forEach(function(url) {
        var p = document.createElement('p');
        p.textContent = url;
        urlDropdown.appendChild(p);
      });
    }

    // Open the URLs in a new window
    function openUrls(windowId, urls) {
      chrome.windows.create({ url: urls, incognito: false }, function(newWindow) {
        chrome.windows.update(newWindow.id, { focused: true });
      });
    }
  });
```

## Load the extension in Chrome:
To test the extension, open the Extensions page in Chrome by typing `chrome://extensions` 
in the address bar.

> Enable the "Developer mode" option.
Click on "Load unpacked" and select the folder containing your extension files.
The extension will be loaded and its browser action button will appear in the Chrome toolbar.

**That's it!**