I am trying to make an extension that allows me to scroll through chrome tabs. My background.js is working fine but my content.js isn't

Question

For my content.js, I am using the 'touchmove' event to scroll through the tabs by swiping 2 fingers and it isn't working. I have used the 'wheel' event and it worked but it can only switch tabs one at a time while 'touchmove' can do it continuously.

My background.js is working since I tested it before.

// Logging to indicate that the content script has been loaded/executed. This is the only part I get from the console.
console.log("Content script loaded");

// Initializing the starting and ending x and y coordinates for touch events.
let touchStartX = 0;
let touchEndX = 0;
let touchStartY = 0;
let touchEndY = 0;

// An array to hold ongoing touch events.
let ongoingTouches = [];

// This function handles the beginning of a touch event.
function handleTouchStart(evt) {
    console.log("Touch start detected");

    // Updating ongoingTouches to hold all current touches.
    ongoingTouches = [...evt.touches];

    // Checking if there are exactly two touch points (for a two-finger swipe).
    if (ongoingTouches.length === 2) {
        // Calculating the average x and y coordinates of the two touch points.
        touchStartX = (ongoingTouches[0].pageX + ongoingTouches[1].pageX) / 2;
        touchStartY = (ongoingTouches[0].pageY + ongoingTouches[1].pageY) / 2;
    }
}

// This function handles the movement of a touch event.
function handleTouchMove(evt) {
    console.log("Touch move detected");

    // Checking again for two touch points.
    if (ongoingTouches.length === 2) {
        // Updating the end coordinates based on the current touch movement.
        touchEndX = (evt.touches[0].pageX + evt.touches[1].pageX) / 2;
        touchEndY = (evt.touches[0].pageY + evt.touches[1].pageY) / 2;

        // Determine the direction of the swipe based on the difference in the start and end coordinates.
        if (Math.abs(touchEndX - touchStartX) > Math.abs(touchEndY - touchStartY)) {

            if (touchEndX < touchStartX) {
                // Send a message to the background script to indicate a left swipe.
                chrome.runtime.sendMessage({ direction: "left" });
            } else {
                // Send a message to the background script to indicate a right swipe.
                chrome.runtime.sendMessage({ direction: "right" });
            }
        }
    }
}

// This function handles the end of a touch event.
function handleTouchEnd(evt) {
    console.log("Touch end detected");

    // Filter out the touch points that have ended.
    ongoingTouches = ongoingTouches.filter(touch => {
        for (let i = 0; i < evt.changedTouches.length; i++) {
            if (touch.identifier === evt.changedTouches[i].identifier) {
                return false; // Remove this touch point.
            }
        }
        return true; // Retain this touch point.
    });
}

// Add event listeners for the touchstart, touchmove, and touchend events.
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
document.addEventListener('touchend', handleTouchEnd, false);







My json file:


{
    "manifest_version": 3,
    "name": "Touchpad Swipe Logger",
    "version": "1.0",
    "permissions": ["scripting", "tabs"],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ]
}







My background.js:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.direction === "left") {
        // Switch to left tab
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            var currentTabId = tabs[0].id;
            chrome.tabs.query({}, function (tabs) {
                for (var i = 0; i < tabs.length; i++) {
                    if (tabs[i].id === currentTabId && i !== 0) {
                        chrome.tabs.update(tabs[i - 1].id, { active: true });
                        break;
                    }
                }
            });
        });
    } else if (request.direction === "right") {
        // Switch to right tab
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            var currentTabId = tabs[0].id;
            chrome.tabs.query({}, function (tabs) {
                for (var i = 0; i < tabs.length; i++) {
                    if (tabs[i].id === currentTabId && i !== tabs.length - 1) {
                        chrome.tabs.update(tabs[i + 1].id, { active: true });
                        break;
                    }
                }
            });
        });
    }
});