this is my first chrome extention project and Im having trouble getting it to work. Im totally lost

this is my manifest.json

{
  "manifest_version": 3,
  "name": "Bionic Reading Extension",
  "version": "1.0",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

this is content.js

try {
document.addEventListener('DOMContentLoaded', () => {

  console.log('Content script loaded and running.');  // This line is for debugging

  function getBoldLength(word) {
    let boldLength = 2;
    if (word.length > 6) {
      boldLength = 4;
    }
    if (word.length > 10) {
      boldLength = 5;
    }
    return boldLength;
  }

  function makeTextBionic(text) {
    const words = text.split(' ');
    return words.map((word) => {
      const boldLength = getBoldLength(word);
      const boldPart = word.substr(0, boldLength);
      const normalPart = word.substr(boldLength);
      return `<b>${boldPart}</b>${normalPart}`;
    }).join(' ');
  }

  function processNode(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      node.parentElement.innerHTML = makeTextBionic(node.nodeValue);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      Array.from(node.childNodes).forEach(processNode);
    }
  }

  document.body.innerHTML = makeTextBionic(document.body.innerText);
  console.log('Bionic Reading Script Loaded');
});
} catch (error) {
  console.error(error); 
}

the extention is supposed to take the text from a page and print the first few letters in bold. nothing is happening