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",
    "contextMenus"
  ],
  "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
// Open extension page when its icon is clicked
chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: 'tabs.html' });
});

// Create context menu items when the extension is installed or updated
chrome.runtime.onInstalled.addListener(() => {
  // Menu items
  chrome.contextMenus.create({
    id: 'saveTabsOnLeft',
    title: 'Save tabs on the left',
    contexts: ['action']
  });

  chrome.contextMenus.create({
    id: 'saveTabsOnRight',
    title: 'Save tabs on the right',
    contexts: ['action']
  });

  chrome.contextMenus.create({
    id: 'saveAllTabs',
    title: 'Save all tabs',
    contexts: ['action']
  });

  chrome.contextMenus.create({
    id: 'saveAllTabsExceptThis',
    title: 'Save all tabs except this',
    contexts: ['action']
  });
});

// Listen for clicks on context menu items
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'saveTabsOnLeft') {
    saveTabsOnLeft(tab);
  } else if (info.menuItemId === 'saveTabsOnRight') {
    saveTabsOnRight(tab);
  } else if (info.menuItemId === 'saveAllTabs') {
    saveAllTabs(tab);
  } else if (info.menuItemId === 'saveAllTabsExceptThis') {
    saveAllTabsExceptThis(tab);
  }
});

// Function to save tabs on the left
function saveTabsOnLeft(currentTab) {
  chrome.tabs.query({ currentWindow: true }, (tabs) => {
    saveTabs(tabs.filter(tab => (tab.index < currentTab.index) && tab.url.startsWith('http')));
  });
}

// Function to save tabs on the right
function saveTabsOnRight(currentTab) {
  chrome.tabs.query({ currentWindow: true }, (tabs) => {
    saveTabs(tabs.filter(tab => (tab.index > currentTab.index) && tab.url.startsWith('http')));
  });
}

// Function to save all tabs
function saveAllTabs(currentTab) {
  chrome.tabs.query({ currentWindow: true }, (tabs) => {
    saveTabs(tabs.filter(tab => tab.url.startsWith('http')));
  });
}

// Function to save all tabs except current
function saveAllTabsExceptThis(currentTab) {
  chrome.tabs.query({ currentWindow: true }, (tabs) => {
    saveTabs(tabs.filter(tab => (tab.id !== currentTab.id) && tab.url.startsWith('http')));
  });
}

// Generic function to save tabs
function saveTabs(tabs) {
  // Check if there are any tabs to save
  if (tabs.length === 0) {
    console.log('No tabs to save');
    return;
  }

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

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

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

    // Ensure the category name is unique
    while (savedTabGroups.some(group => group.category === defaultCategoryName)) {
      groupNumber++;
      defaultCategoryName = 'Book ' + groupNumber;
    }
    let 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 }, () => {
      console.log(`${tabs.length} tab(s) saved under "${category}"`);

      // Close the saved tabs
      const tabIdsToClose = tabs.map(tab => tab.id);
      chrome.tabs.remove(tabIdsToClose);
    });
  });
}
"""

"""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">
            <input type="text" id="searchInput" placeholder="Search tabs...">
        </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 homeLink = document.getElementById('homeLink');
    const searchInput = document.getElementById('searchInput');
    const settingsButton = document.getElementById('settingsButton');
    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 changes in the storage and update the display
    chrome.storage.onChanged.addListener((changes, namespace) => {
        if (namespace === 'local' && changes.savedTabGroups) {
            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';
    });

    // Event listener for the search bar
    searchInput.addEventListener('input', () => {
        filterTabsByTitle(searchInput.value.trim().toLowerCase());
    });

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

    // 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';
            groupContainer.style.display = '';  // Ensure the group is displayed

            // 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');
                listItem.style.display = '';  // Ensure the tab is displayed

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

        // After re-rendering, reapply the filter if any
        const currentSearchQuery = searchInput.value.trim().toLowerCase();
        if (currentSearchQuery !== '') {
            filterTabsByTitle(currentSearchQuery);
        }
    }

    // Function to filter tab groups by title
    function filterTabsByTitle(query) {
        let anyTabsVisible = false;

        // Iterate over each tab group
        savedTabGroups.forEach((group, groupIndex) => {
            const groupContainer = tabGroupsContainer.children[groupIndex];
            const tabList = groupContainer.querySelector('.tabList');
            let anyTabVisibleInGroup = false;

            // Iterate over each tab in the group
            group.tabs.forEach((tab, tabIndex) => {
                const listItem = tabList.children[tabIndex];
                const tabTitle = tab.title.toLowerCase();

                if (tabTitle.includes(query)) {
                    listItem.style.display = '';
                    anyTabVisibleInGroup = true;
                } else {
                    listItem.style.display = 'none';
                }
            });

            // Show or hide the group based on whether any tabs are visible
            if (anyTabVisibleInGroup) {
                groupContainer.style.display = '';
                anyTabsVisible = true;
            } else {
                groupContainer.style.display = 'none';
            }
        });

        // Optionally, display a message if no tabs match
        if (!anyTabsVisible) {
            if (!document.getElementById('noResultsMessage')) {
                const noResultsMessage = document.createElement('p');
                noResultsMessage.id = 'noResultsMessage';
                noResultsMessage.textContent = 'No tabs match your search.';
                noResultsMessage.style.textAlign = 'center';
                noResultsMessage.style.marginTop = '20px';
                tabGroupsContainer.parentElement.appendChild(noResultsMessage);
            }
        } else {
            const noResultsMessage = document.getElementById('noResultsMessage');
            if (noResultsMessage) {
                noResultsMessage.remove();
            }
        }
    }

    // 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;
    flex-direction: column;
}

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

#searchInput {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#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;
}
"""