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', async () => {
    const homeLink = document.getElementById('homeLink');
    const searchInput = document.getElementById('searchInput');
    const settingsButton = document.getElementById('settingsButton');
    const tabsContent = document.getElementById('tabsContent');
    const settingsContent = document.getElementById('settingsContent');

    // Load saved tab groups when the page loads
    let savedTabGroups = (await chrome.storage.local.get('savedTabGroups')).savedTabGroups || [];
    displayTabGroups();

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

        // Show the search input
        searchInput.style.display = 'block';

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

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

    // Event listener for the 'Settings' button
    settingsButton.addEventListener('click', () => {

        // Hide the search input
        searchInput.style.display = 'none';

        // Hide tabs content and show settings content
        tabsContent.style.display = 'none';
        settingsContent.style.display = 'block';
    });

    // Function to save tabs to storage
    async function saveTabGroupsToStorage() {
        await chrome.storage.local.set({ 'savedTabGroups': savedTabGroups });
    }

    // Function to display tab groups on the page
    function displayTabGroups() {
        const fragment = document.createDocumentFragment();  // Create fragment to minimizes the number of reflows and repaints

        const currentSearchQuery = searchInput.value.trim().toLowerCase();  // Get current filtering query
        let anyGroupsVisible = false;

        savedTabGroups.forEach((group, groupIndex) => {
            let anyTabVisible = false;

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

                // Show or hide the tab based on whether the query is included in the title
                if (tab.title.toLowerCase().includes(currentSearchQuery)) {
                    listItem.style.display = '';
                    anyTabVisible = true;
                } else {
                    listItem.style.display = 'none';
                }
            });

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

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

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

        // Clear existing content and append the fragment
        const tabGroupsContainer = document.getElementById('tabGroups');
        tabGroupsContainer.innerHTML = '';
        tabGroupsContainer.appendChild(fragment);

        // Display a message if no tabs match
        if ((tabGroups.length === 0) || (!anyGroupsVisible)) {
            if (!document.getElementById('noResultsMessage')) {
                const noResultsMessage = document.createElement('p');
                noResultsMessage.id = 'noResultsMessage';
                noResultsMessage.textContent = tabGroups.length === 0 ? 'No tabs saved. Try adding some.' : '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 tabGroupsContainer = document.getElementById('tabGroups');
        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
        saveTabGroupsToStorage();
    }

    // Function to toggle all checkboxes in a group
    function toggleGroupCheckboxes(groupIndex, isChecked) {
        const tabGroupsContainer = document.getElementById('tabGroups');
        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 tabGroupsContainer = document.getElementById('tabGroups');
        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 tabGroupsContainer = document.getElementById('tabGroups');
        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;
            }

            // 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
            savedTabGroups[groupIndex].category = newTitle;  // TODO: should we change also "groupTitle.textContent"?

            // Save the updated tab groups to storage
            saveTabGroupsToStorage();

            // 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) {
        // Get all checkboxes in this group's tab list
        const tabGroupsContainer = document.getElementById('tabGroups');
        const groupContainer = tabGroupsContainer.children[groupIndex];
        const tabList = groupContainer.querySelector('.tabList');
        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) => {
            tabList.removeChild(tabList.children[tabIndex]);
            savedTabGroups[groupIndex].tabs.splice(tabIndex, 1);
        });

        // Remove the group if no tabs are left
        if (savedTabGroups[groupIndex].tabs.length === 0) {
            tabGroupsContainer.removeChild(groupContainer);
            savedTabGroups.splice(groupIndex, 1);
        }

        // Save the updated savedTabGroups
        saveTabGroupsToStorage();
    }

    // Function to remove an entire tab group
    function removeTabGroup(groupIndex) {
        const tabGroupsContainer = document.getElementById('tabGroups');

        tabGroupsContainer.removeChild(tabGroupsContainer.children[groupIndex]);
        savedTabGroups.splice(groupIndex, 1);

        // Save the updated savedTabGroups
        saveTabGroupsToStorage();
    }

    // Function to remove a tab from a group
    function removeTabFromGroup(groupIndex, tabIndex) {
        const tabGroupsContainer = document.getElementById('tabGroups');
        const groupContainer = tabGroupsContainer.children[groupIndex];
        const tabList = groupContainer.querySelector('.tabList');

        tabList.removeChild(tabList.children[tabIndex]);
        savedTabGroups[groupIndex].tabs.splice(tabIndex, 1);

        // Remove the group if no tabs are left
        if (savedTabGroups[groupIndex].tabs.length === 0) {
            tabGroupsContainer.removeChild(groupContainer);
            savedTabGroups.splice(groupIndex, 1);
        }

        // Save the updated savedTabGroups
        saveTabGroupsToStorage();
    }

    // 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: 2px solid #000000;
    border-radius: 4px;
}

#searchInput:focus {
    outline: none !important;
    border: 3px solid #4285F4;
    padding: 7px 11px;
}

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