By using querySelector I am redirecting the user to a new webpage by using the parsed data. But the query selector seems to be not working or maybe I missed few tags. I am parsing *://leetcode.com/problems/* and want to extract the problem ID. Code is not redirecting to the problems/problemID page. How should I extract the problemID from the page? (problemID not present in the URL btw, it is used)

content.js

(() => {
  const problemTitleElement = document.querySelector('body #__next .flex .h-[100vh] .flex .flex #qd-content .flexlayout__layout .flexlayout__tab .flex .flex .flex .flex .text-title-large a');
  
  if (problemTitleElement) {
    const problemID = problemTitleElement.textContent.split('.')[0].trim();
    
    chrome.runtime.sendMessage({ problemID: problemID });
  }
})();

background.js

let problemID = '';

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.problemID) {
    problemID = message.problemID;
  }
});

chrome.action.onClicked.addListener(() => {
  if (problemID) {
    chrome.tabs.create({ url: `https://leetcode-board-two.vercel.app/problems/${problemID}` });
  } else {
    chrome.tabs.create({ url: `https://leetcode-board-two.vercel.app/problems` }); // Default URL if problemID is not available
  }
});

can you check the querySelector on a LeetCode problem if I missed some tags