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>
    <!-- Header -->
    <header id="pageHeader">
        <div id="headerLeft">
            <a href="#" id="homeLink">Tab Manager</a>
        </div>
        <div id="headerCenter">
            <button id="saveTabs">Save Current Tabs</button>
            <button id="restoreAllTabs">Restore All Tabs</button>
        </div>
        <div id="headerRight">
            <button id="settingsButton" title="Settings">
                <img src="icons/gear_icon.png" alt="Settings" class="iconImage">
            </button>
        </div>
    </header>

    <!-- Main Content -->
    <div id="mainContent">
        <!-- Tabs Content -->
        <div id="tabsContent">
            <!-- Tab Groups will be displayed here -->
            <div id="tabGroups"></div>
        </div>

        <!-- Settings Content (Initially Hidden) -->
        <div id="settingsContent" style="display: none;">
            <h2>Settings</h2>
            <!-- Add your settings options here -->
            <p>Settings page content will go here.</p>
        </div>
    </div>
</body>
</html>
"""

"""tabs.js
document.addEventListener('DOMContentLoaded', () => {
    const saveTabsButton = document.getElementById('saveTabs');
    const restoreAllTabsButton = document.getElementById('restoreAllTabs');
    const settingsButton = document.getElementById('settingsButton');
    const homeLink = document.getElementById('homeLink');
    const tabGroupsContainer = document.getElementById('tabGroups');
    const tabsContent = document.getElementById('tabsContent');
    const settingsContent = document.getElementById('settingsContent');
    let savedTabGroups = [];

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

    // Event listener for the 'Home' link (extension name)
    homeLink.addEventListener('click', (event) => {
        event.preventDefault(); // Prevent default link behavior

        // Show tabs content and hide settings content
        tabsContent.style.display = 'block';
        settingsContent.style.display = 'none';

        // Show center buttons when on tabs page
        saveTabsButton.style.display = '';
        restoreAllTabsButton.style.display = '';
    });

    // Event listener for the 'Save Current Tabs' button
    saveTabsButton.addEventListener('click', () => {
        let category = '';

        // Query all open tabs in the current window
        chrome.tabs.query({ currentWindow: true }, (tabs) => {
            // Filter tabs to only include those with URLs starting with 'http'
            const filteredTabs = tabs.filter(tab => tab.url.startsWith('http'));

            // Check if there are any tabs to save
            if (filteredTabs.length === 0) {
                alert('No tabs with URLs starting with "http" found.');
                return;
            }

            // Map the filtered tabs to get their title and URL
            const tabsData = filteredTabs.map(tab => ({
                title: tab.title,
                url: tab.url
            }));

            // Retrieve saved tab groups to determine the default category name
            chrome.storage.local.get('savedTabGroups', (data) => {
                savedTabGroups = data.savedTabGroups || [];

                // Generate default category name as 'Book X'
                let groupNumber = savedTabGroups.length + 1;
                let defaultCategoryName = 'Book ' + groupNumber;

                // Check if this name already exists and adjust if necessary
                while (savedTabGroups.some(group => group.category === defaultCategoryName)) {
                    groupNumber++;
                    defaultCategoryName = 'Book ' + groupNumber;
                }
                category = defaultCategoryName;

                // Add the new group to the start of the array with collapsed set to false
                savedTabGroups.unshift({
                    category: category,
                    tabs: tabsData,
                    collapsed: false
                });

                // Save the updated tab groups to storage
                chrome.storage.local.set({ 'savedTabGroups': savedTabGroups }, () => {
                    // 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 });
                });
            });
        });
    });

    // Event listener for the 'Settings' button
    settingsButton.addEventListener('click', () => {
        // Hide tabs content and show settings content
        tabsContent.style.display = 'none';
        settingsContent.style.display = 'block';

        // Optionally, hide center buttons when in settings page
        saveTabsButton.style.display = 'none';
        restoreAllTabsButton.style.display = 'none';
    });

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

    // 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';

            // Ensure group.collapsed is defined
            if (group.collapsed === undefined) {
                group.collapsed = false; // default to expanded
            }

            // Create a header container for the group
            const groupHeaderContainer = document.createElement('div');
            groupHeaderContainer.className = 'groupHeaderContainer';

            // Add an event listener to toggle collapse/expand
            groupHeaderContainer.addEventListener('click', (event) => {
                // Check if the clicked element is the header container or the group title
                if ((event.target === groupHeaderContainer) || ((event.target === groupTitle) && (editGroupButton.dataset.mode === 'edit'))) {
                    toggleGroupCollapse(groupIndex);
                }
            });

            // Create the master checkbox
            const masterCheckbox = document.createElement('input');
            masterCheckbox.type = 'checkbox';
            masterCheckbox.className = 'masterCheckbox';
            masterCheckbox.title = 'Select/Deselect All Tabs in this Group';

            // Add an event listener to the master checkbox
            masterCheckbox.addEventListener('change', (event) => {
                toggleGroupCheckboxes(groupIndex, event.target.checked);
            });

            // Create a title for the group
            const groupTitle = document.createElement('h2');
            groupTitle.textContent = group.category;
            groupTitle.className = 'groupTitle';
            groupTitle.contentEditable = false;

            // Create an edit button for the group title
            const editGroupButton = document.createElement('button');
            editGroupButton.textContent = 'Edit';
            editGroupButton.title = 'Edit group title';
            editGroupButton.className = 'editGroupButton';
            editGroupButton.dataset.mode = 'edit';
            editGroupButton.addEventListener('click', () => {
                toggleEditGroupTitle(groupIndex);
            });

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

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

            // Append elements to the header container in the desired order
            groupHeaderContainer.appendChild(masterCheckbox);
            groupHeaderContainer.appendChild(groupTitle);
            groupHeaderContainer.appendChild(editGroupButton);
            groupHeaderContainer.appendChild(restoreGroupButton);
            groupHeaderContainer.appendChild(removeGroupButton);

            // Create a list for the tabs in the group
            const tabList = document.createElement('ul');
            tabList.className = 'tabList';
            tabList.style.display = group.collapsed ? 'none' : 'block';

            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';
                checkbox.dataset.tabIndex = tabIndex;
                checkbox.dataset.groupIndex = groupIndex;

                // Add event listener to update master checkbox when individual checkbox changes
                checkbox.addEventListener('change', () => {
                    updateMasterCheckboxState(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);
            });

            // Create a footer container for the group
            const groupFooterContainer = document.createElement('div');
            groupFooterContainer.className = 'groupFooterContainer';
            groupFooterContainer.style.display = group.collapsed ? 'none' : 'flex';

            // 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);
            });

            // Append the removeSelectedButton to the footer container
            groupFooterContainer.appendChild(removeSelectedButton);

            // Append elements to the group container
            groupContainer.appendChild(groupHeaderContainer);
            groupContainer.appendChild(tabList);
            groupContainer.appendChild(groupFooterContainer);

            // Append the group container to the main container
            tabGroupsContainer.appendChild(groupContainer);

            // Initialize the master checkbox state
            updateMasterCheckboxState(groupIndex);
        });
    }

    // Function to toggle group collapse/expand state
    function toggleGroupCollapse(groupIndex) {
        const groupContainer = tabGroupsContainer.children[groupIndex];
        const tabList = groupContainer.querySelector('.tabList');
        const groupFooterContainer = groupContainer.querySelector('.groupFooterContainer');

        // Toggle the display style
        if (savedTabGroups[groupIndex].collapsed) {
            tabList.style.display = 'block';
            groupFooterContainer.style.display = 'flex';
            savedTabGroups[groupIndex].collapsed = false;
        } else {
            tabList.style.display = 'none';
            groupFooterContainer.style.display = 'none';
            savedTabGroups[groupIndex].collapsed = true;
        }

        // Save the updated savedTabGroups to chrome.storage.local
        chrome.storage.local.set({ 'savedTabGroups': savedTabGroups });
    }

    // Function to toggle all checkboxes in a group
    function toggleGroupCheckboxes(groupIndex, isChecked) {
        const groupContainer = tabGroupsContainer.children[groupIndex];
        const checkboxes = groupContainer.querySelectorAll('.tabCheckbox');

        checkboxes.forEach((checkbox) => {
            checkbox.checked = isChecked;
        });
    }

    // Function to update the master checkbox state based on individual checkboxes
    function updateMasterCheckboxState(groupIndex) {
        const groupContainer = tabGroupsContainer.children[groupIndex];
        const masterCheckbox = groupContainer.querySelector('.masterCheckbox');
        const checkboxes = groupContainer.querySelectorAll('.tabCheckbox');

        const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
        const anyChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);

        masterCheckbox.checked = allChecked;
        masterCheckbox.indeterminate = !allChecked && anyChecked;
    }

    // Function to toggle between edit and save modes for the group title
    function toggleEditGroupTitle(groupIndex) {
        const groupContainer = tabGroupsContainer.children[groupIndex];
        const groupHeaderContainer = groupContainer.querySelector('.groupHeaderContainer');
        const groupTitle = groupHeaderContainer.querySelector('.groupTitle');
        const editGroupButton = groupHeaderContainer.querySelector('.editGroupButton');

        if (editGroupButton.dataset.mode === 'edit') {
            // Switch to edit mode
            groupTitle.contentEditable = true;
            groupTitle.focus();

            // Move cursor to the end of the text using Range and Selection APIs
            if ((typeof window.getSelection != "undefined") && (typeof document.createRange != "undefined")) {
                const range = document.createRange();
                range.selectNodeContents(groupTitle);
                range.collapse(false); // Collapse the range to the end

                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
            }

            // Change button to 'Save'
            editGroupButton.textContent = 'Save';
            editGroupButton.title = 'Save group title';
            editGroupButton.dataset.mode = 'save';

            // Handle Enter key to save
            groupTitle.onkeypress = function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault(); // Prevent newline
                    toggleEditGroupTitle(groupIndex); // Save on Enter key
                }
            };
        } else {
            // Switch to view mode (save changes)
            const newTitle = groupTitle.textContent.trim();

            if (newTitle === '') {
                alert('Group title cannot be empty.');
                groupTitle.focus();
                return;
            }

            // Retrieve the saved groups
            chrome.storage.local.get('savedTabGroups', (data) => {
                const savedTabGroups = data.savedTabGroups || [];
                const group = savedTabGroups[groupIndex];

                // Check if a group with the new title already exists
                const existingGroupIndex = savedTabGroups.findIndex(g => g.category === newTitle);
                if (existingGroupIndex !== -1 && existingGroupIndex !== groupIndex) {
                    alert('A group with this title already exists. Please choose a different title.');
                    groupTitle.focus();
                    return;
                }

                // Update the group title
                group.category = newTitle;

                // Save the updated tab groups to storage
                chrome.storage.local.set({ 'savedTabGroups': savedTabGroups }, () => {
                    // Disable contentEditable
                    groupTitle.contentEditable = false;

                    // Reset the edit button
                    editGroupButton.textContent = 'Edit';
                    editGroupButton.title = 'Edit group title';
                    editGroupButton.dataset.mode = 'edit';

                    // Remove keypress handler
                    groupTitle.onkeypress = null;
                });
            });
        }
    }

    // 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;
}

button {
    background-color: #4285F4;
    padding: 5px 10px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin: 0px 5px;
}

input[type="checkbox"] {
    cursor: pointer;
}

#pageHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f1f1;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
}

#headerLeft, #headerCenter, #headerRight {
    flex: 1;
    display: flex;
    align-items: center;
}

#headerCenter {
    justify-content: center;
}

#headerRight {
    justify-content: flex-end;
}

#homeLink {
    text-decoration: none;
    font-size: 24px;
    color: #333;
}

#homeLink:hover {
    text-decoration: underline;
}

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

#saveTabs, #restoreAllTabs {
    padding: 10px 20px;
}

#saveTabs:hover, #restoreAllTabs:hover {
    background-color: #3071e8;
}

#settingsButton {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-left: 10px;
}

#settingsButton:hover {
    color: #666;
}

#settingsButton .iconImage {
    width: 36px;
    height: 36px;
}

#mainContent {
    padding: 20px;
}

#tabsContent, #settingsContent {
    width: 100%;
}

.tabList {
    list-style-type: none;
    padding: 0;
    margin: 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;
}

.tabCheckbox {
    margin-right: 10px;
}

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

.groupHeaderContainer, .groupFooterContainer {
    display: flex;
    align-items: center;
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.groupHeaderContainer {
    cursor: pointer;
}

.groupHeaderContainer .masterCheckbox, .groupFooterContainer .removeSelectedButton {
    margin-right: 10px;
}

.groupHeaderContainer .groupTitle {
    flex-grow: 1;
    margin: 0;
    padding: 0;
}

.groupHeaderContainer .groupTitle[contenteditable="true"] {
    outline: 2px solid #4285F4;
    background-color: #fff;
}

.groupHeaderContainer .editGroupButton:hover {
    background-color: #3071e8;
}

.groupHeaderContainer .removeGroupButton, .groupFooterContainer .removeSelectedButton, .removeTabButton {
    background-color: #d9534f;
}

.groupHeaderContainer .removeGroupButton:hover, .groupFooterContainer .removeSelectedButton:hover, .removeTabButton:hover {
    background-color: #c9302c;
}

.groupHeaderContainer .restoreGroupButton {
    background-color: #34A853;
}

.groupHeaderContainer .restoreGroupButton:hover {
    background-color: #2c8c47;
}
"""