Hi there! I'm currently developing a chrome extension similar to "OneTab" and "Better OneTab". I want you to understand the source code of the extension and help me make changes to it. Here is the code:

"""manifest.json
{
  "manifest_version": 3,
  "name": "Tab Manager Extension",
  "version": "1.0",
  "description": "Manage and organize your open tabs.",
  "permissions": [
    "tabs",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}
"""

"""background.js
chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: 'tabs.html' });
});
"""

"""tabs.html
<!DOCTYPE html>
<html>
<head>
    <title>Tab Manager</title>
    <script src="tabs.js" defer></script>
    <link rel="stylesheet" href="tabs.css">
</head>
<body>
    <h1>Tab Manager</h1>
    <div id="controls">
        <input type="text" id="categoryInput" placeholder="Enter category name" />
        <button id="saveTabs">Save Current Tabs</button>
        <button id="restoreAllTabs">Restore All Tabs</button>
    </div>
    <div id="tabGroups"></div>
</body>
</html>
"""

"""tabs.js
document.addEventListener('DOMContentLoaded', () => {
    const saveTabsButton = document.getElementById('saveTabs');
    const restoreAllTabsButton = document.getElementById('restoreAllTabs');
    const categoryInput = document.getElementById('categoryInput');
    const tabGroupsContainer = document.getElementById('tabGroups');

    // Load saved tab groups when the page loads
    loadSavedTabGroups();

    // Event listener for the 'Save Current Tabs' button
    saveTabsButton.addEventListener('click', () => {
        const category = categoryInput.value.trim();
        if (category === '') {
            alert('Please enter a category name.');
            return;
        }

        // Query all open tabs in the current window
        chrome.tabs.query({ currentWindow: true }, (tabs) => {
            const tabsData = tabs.map(tab => ({
                title: tab.title,
                url: tab.url
            }));

            // Save tabs under the specified category
            chrome.storage.local.get('savedTabGroups', (data) => {
                const savedTabGroups = data.savedTabGroups || [];

                // Check if the category already exists
                const existingGroupIndex = savedTabGroups.findIndex(group => group.category === category);
                if (existingGroupIndex !== -1) {
                    // Append the new tabs to the existing group
                    savedTabGroups[existingGroupIndex].tabs = savedTabGroups[existingGroupIndex].tabs.concat(tabsData);
                } else {
                    // Add a new group
                    savedTabGroups.push({
                        category: category,
                        tabs: tabsData
                    });
                }

                // Save the updated tab groups to storage
                chrome.storage.local.set({ 'savedTabGroups': savedTabGroups }, () => {
                    // Clear the category input
                    categoryInput.value = '';
                    // Update the tab groups display
                    displayTabGroups(savedTabGroups);
                });
            });
        });
    });

    // Event listener for the 'Restore All Tabs' button
    restoreAllTabsButton.addEventListener('click', () => {
        chrome.storage.local.get('savedTabGroups', (data) => {
            const tabGroups = data.savedTabGroups || [];
            tabGroups.forEach(group => {
                group.tabs.forEach(tab => {
                    chrome.tabs.create({ url: tab.url });
                });
            });
        });
    });

    // Function to load saved tab groups from storage
    function loadSavedTabGroups() {
        chrome.storage.local.get('savedTabGroups', (data) => {
            const tabGroups = data.savedTabGroups || [];
            displayTabGroups(tabGroups);
        });
    }

    // Function to display tab groups on the page
    function displayTabGroups(tabGroups) {
        tabGroupsContainer.innerHTML = ''; // Clear existing content

        tabGroups.forEach((group, groupIndex) => {
            // Create a container for each group
            const groupContainer = document.createElement('div');
            groupContainer.className = 'tabGroup';

            // Create a header for the group
            const groupHeader = document.createElement('h2');
            groupHeader.textContent = group.category;

            // Add a remove button for the group
            const removeGroupButton = document.createElement('button');
            removeGroupButton.textContent = 'X';
            removeGroupButton.title = 'Remove this group';
            removeGroupButton.className = 'removeGroupButton';
            removeGroupButton.addEventListener('click', () => {
                removeTabGroup(groupIndex);
            });

            // Create a list for the tabs in the group
            const tabList = document.createElement('ul');
            tabList.className = 'tabList';

            group.tabs.forEach((tab, tabIndex) => {
                const listItem = document.createElement('li');

                // Create a checkbox for selection
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.className = 'tabCheckbox';
                // We store the tabIndex and groupIndex to identify the tab later
                checkbox.dataset.tabIndex = tabIndex;
                checkbox.dataset.groupIndex = groupIndex;

                const link = document.createElement('a');
                link.href = tab.url;
                link.textContent = tab.title;
                link.target = '_blank';

                const removeTabButton = document.createElement('button');
                removeTabButton.textContent = 'X';
                removeTabButton.title = 'Remove this tab';
                removeTabButton.className = 'removeTabButton';
                removeTabButton.addEventListener('click', () => {
                    removeTabFromGroup(groupIndex, tabIndex);
                });

                listItem.appendChild(checkbox);
                listItem.appendChild(link);
                listItem.appendChild(removeTabButton);
                tabList.appendChild(listItem);
            });

            // Add a button to remove selected tabs
            const removeSelectedButton = document.createElement('button');
            removeSelectedButton.textContent = 'Remove Selected Tabs';
            removeSelectedButton.className = 'removeSelectedButton';
            removeSelectedButton.addEventListener('click', () => {
                removeSelectedTabs(groupIndex);
            });

            groupContainer.appendChild(removeGroupButton);
            groupContainer.appendChild(groupHeader);
            groupContainer.appendChild(tabList);
            groupContainer.appendChild(removeSelectedButton);

            // Add a restore button for the group
            const restoreGroupButton = document.createElement('button');
            restoreGroupButton.textContent = 'Restore Group Tabs';
            restoreGroupButton.className = 'restoreGroupButton';
            restoreGroupButton.addEventListener('click', () => {
                restoreTabGroup(group);
            });

            groupContainer.appendChild(restoreGroupButton);

            tabGroupsContainer.appendChild(groupContainer);
        });
    }

    // Function to remove selected tabs from a group
    function removeSelectedTabs(groupIndex) {
        chrome.storage.local.get('savedTabGroups', (data) => {
            const tabGroups = data.savedTabGroups || [];
            const group = tabGroups[groupIndex];

            // Get all checkboxes in this group's tab list
            const groupContainer = tabGroupsContainer.children[groupIndex];
            const checkboxes = groupContainer.querySelectorAll('.tabCheckbox');

            // Collect the indices of tabs to remove
            const indicesToRemove = [];
            checkboxes.forEach((checkbox) => {
                if (checkbox.checked) {
                    indicesToRemove.push(parseInt(checkbox.dataset.tabIndex));
                }
            });

            if (indicesToRemove.length === 0) {
                alert('Please select at least one tab to remove.');
                return;
            }

            // Confirm to remove the tabs
            if (!confirm('Are you sure you want to remove the selected tabs?')) {
                return;
            }

            // Remove tabs starting from the highest index to avoid index shifting
            indicesToRemove.sort((a, b) => b - a).forEach((tabIndex) => {
                group.tabs.splice(tabIndex, 1);
            });

            // Remove the group if no tabs are left
            if (group.tabs.length === 0) {
                tabGroups.splice(groupIndex, 1);
            }

            // Save the updated tab groups to storage
            chrome.storage.local.set({ 'savedTabGroups': tabGroups }, () => {
                displayTabGroups(tabGroups);
            });
        });
    }

    // Function to remove an entire tab group
    function removeTabGroup(groupIndex) {
        chrome.storage.local.get('savedTabGroups', (data) => {
            const tabGroups = data.savedTabGroups || [];
            tabGroups.splice(groupIndex, 1);
            chrome.storage.local.set({ 'savedTabGroups': tabGroups }, () => {
                displayTabGroups(tabGroups);
            });
        });
    }

    // Function to remove a tab from a group
    function removeTabFromGroup(groupIndex, tabIndex) {
        chrome.storage.local.get('savedTabGroups', (data) => {
            const tabGroups = data.savedTabGroups || [];
            tabGroups[groupIndex].tabs.splice(tabIndex, 1);
            // Remove the group if no tabs are left
            if (tabGroups[groupIndex].tabs.length === 0) {
                tabGroups.splice(groupIndex, 1);
            }
            chrome.storage.local.set({ 'savedTabGroups': tabGroups }, () => {
                displayTabGroups(tabGroups);
            });
        });
    }

    // Function to restore tabs from a single group
    function restoreTabGroup(group) {
        group.tabs.forEach(tab => {
            chrome.tabs.create({ url: tab.url });
        });
    }
});
"""

"""tabs.css
body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 20px auto;
    padding: 10px;
}

h1 {
    text-align: center;
}

#controls {
    text-align: center;
    margin-bottom: 20px;
}

#saveTabs, #restoreAllTabs {
    padding: 10px 20px;
    background-color: #4285F4;
    color: white;
    border: none;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
}

.tabList {
    list-style-type: none;
    padding: 0;
}

.tabList li {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 5px;
    margin-bottom: 5px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.tabList a {
    text-decoration: none;
    color: #1A0DAB;
    font-size: 14px;
    flex-grow: 1;
}

.tabList a:hover {
    text-decoration: underline;
}

.removeButton {
    float: right;
    background-color: transparent;
    border: none;
    color: red;
    cursor: pointer;
    font-size: 18px;
}

#categoryInput {
    width: 200px;
    padding: 5px;
    margin-right: 10px;
}

.tabGroup {
    margin-bottom: 30px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.tabGroup h2 {
    display: inline-block;
    margin: 0 10px 10px 0;
}

.removeGroupButton {
    float: right;
    background-color: transparent;
    border: none;
    color: red;
    cursor: pointer;
    font-size: 18px;
}

.removeTabButton {
    background-color: transparent;
    border: none;
    color: red;
    cursor: pointer;
    font-size: 16px;
    margin-left: 5px;
}

.restoreGroupButton, .removeSelectedButton {
    padding: 5px 10px;
    background-color: #34A853;
    color: white;
    border: none;
    margin-top: 10px;
    margin-right: 5px;
    border-radius: 4px;
    cursor: pointer;
}

.removeSelectedButton {
    background-color: #d9534f;
}
"""