How to manipulate content of a page using a Chrome Extension?

Question

I apologise for asking multiple questions all at once.

1. I am trying to manipulate the content of a page using a chrome extension using this code:

let container = document.querySelector('p');
let newtext = container.innerHTML.split('').map(
    m => Math.random() > .49 ? <strong>${m}</strong> : m
);

container.innerHTML = newtext.join('')

The first problem I encounter is that the code only manipulates the first p of the page. I have tried using querySelectorAll(), but it does not work. The second is the code does not work on all the pages I load. Here is the code for my manifest.json file:

    {
        "manifest_version": 3,
        "version": "1.0",
        "name": "name",
        "description": "description",
        "action": {
            "default_title": "title",
            "default_popup": "popup.html",
            "default_icon": "icon.png"
        },
        "content_scripts": [
            {
                "js": ["content.js"],
                "matches": ["<all_urls>"],
                "run_at": "document_start"
            }
        ]

  }

2. I am experiencing a new problem with my code (which I think might be a page-specific issue). Whenever I reload the page it displays the HTML tags that exist on the page, like this:
   strong>Question</strong>&nbsp; <span>How does the efficacy of cefepime/enmetazobactam compare with piperacillin/tazobactam for the treatment of complicated urinary tract infection (UTI) or acute pyelonephritis?</span>.

Any advice would be appreciated.

Answer 1

After doing document.querySelectorAll('p') you'll need to iterate over that NodeList (example at https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll#accessing_the_matches).

And <strong>${m}</strong> needs backticks around it to indicate a template literal (How to interpolate variables in strings in JavaScript, without concatenation?) or you could concatenate the string like '<strong>' + m + '</strong>'.

Also, to handle nested HTML elements you should get the .innerText of the container, not .innerHtml to avoid breaking existing HTML.

let containers = document.querySelectorAll('p');

containers.forEach((container) => {
  // .innerText will ensure only text content gets potentially bolded
  // if you change this to .innerHTML it will break nested HTML elements.
  let newtext = container.innerText.split('').map(
    m => Math.random() > .49 ? `<strong>${m}</strong>` : m
  );
  
  container.innerHTML = newtext.join('')
});

<p>testing some text and random bolding</p>
<p>another test with some text</p>
<p>a third paragraph tag to test with</p>
<p>and one more for good measure</p>

<p><span>testing</span> some text <a>and nested tags</a></p>