title: Chrome Extension: Issues modifying a DOM element via content script
body: <p>I'm having issues modifying a DOM element on <a href="https://lichess.org/tv" rel="nofollow noreferrer">https://lichess.org/tv</a> using a content-script. Eventually the goal is to display additional information <a href="https://i.stack.imgur.com/JyElb.png" rel="nofollow noreferrer">bellow the user name</a> (e.g. is he/she playing aggressive/defensive chess, ...) - for that reason I started by trying to change the user name:</p>
  
  <pre><code>targetNode[0].innerHTML = "test"
  </code></pre>
  
  <p>but it does not seem to have an effect for this particular element (I get the element though via the querySelector - verified with console.log()). When I try to change a other element on the site it works though:</p>
  
  <pre><code>const otherNode = document.querySelectorAll(".player &gt; a");
  otherNode[0].innerHTML = "othertest"
  </code></pre>
  
  <p>I'm new to developing extensions/javascript so I'm having a hard time figuring out what I'm doing worng here - any insights help. Thanks!</p>
  
  <p><strong>manifest.json</strong> </p>
  
  <pre><code>{
    "name": "SomeExtension",
    "version": "0.0.0",
    "description": "Description.",
    "content_scripts": [
      {
        "matches": [ "http://*.lichess.org/*", "https://*.lichess.org/*" ],
        "js": [ "content.js" ]
      }
    ],
    "manifest_version": 2
  }
  </code></pre>
  
  <p><strong>content.js</strong></p>
  
  <pre><code>console.log("Hello, World from content.js!");
  
  //node(s) I want to change
  const targetNode = document.querySelectorAll(".ruser &gt; a");
  console.log(targetNode[0].innerHTML);
  
  targetNode[0].innerHTML = "test"
  
  document.addEventListener('keypress', k);
  function k(e) {
    console.log(`${e.code}`)
    targetNode[0].innerHTML = "test"
  }
  
  //other node where it works
  const otherNode = document.querySelectorAll(".player &gt; a");
  otherNode[0].innerHTML = "othertest"
  </code></pre>