DEV Community

Cover image for Make a chrome extension to save the URL of all the current tab under an instance and open them whenever and wherever you want...

Posted on

Make a chrome extension to save the URL of all the current tab under an instance and open them whenever and wherever you want...

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": [

Enter fullscreen mode Exit fullscreen mode

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>
  <meta charset="UTF-8">
  <title>URL Manager</title>
.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;
    <div class="container">
        <h1>URL Saver</h1>
        <div id="instanceList"></div>
        <div class="dropdown">
          <div class="dropdown-content" id="urlDropdown"></div>
        <button id="saveButton">Save URLs</button>
  <script src="popup.js"></script>

Enter fullscreen mode Exit fullscreen mode

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'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.addEventListener('click', function() {
        var windowId = instanceData.windowId;
        var urls = instanceData.urls;
        openUrls(windowId, urls);


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


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

        var instanceName = prompt('Enter instance name:');
        if (instanceName) {
          var instanceData = {
            urls: urls

          appendInstance(instanceName, instanceData);

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

  { 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;

    // Open the URLs in a new window
    function openUrls(windowId, urls) {{ url: urls, incognito: false }, function(newWindow) {, { focused: true });
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)