Add-on overwrites my #wanted and #seen content on my page

[pdehaan]

I have a sample page. In it, I "randomly" have a <div id="wanted">, but that content gets overwritten and all the data is replaced w/ code from the add-on.

<p>THis is a test privacy page:</p>

I have a zero data privacy policy, because the privacy revolution is just a dark illusion. You can Encrypt and do Decryption. THe truthiness is that the robot army will hack the corporations and cause a cryptocurrency panic that will rewind society.

<div id="wanted">
  <h2>Wanted:</h2>
  <img src="bonjovi.jpg" />
</div>
<div id="seen">
  <h2>Seen:</h2>
  These are some dogs that I have seen.
</div>

In fact, when the page first loads, you can see the broken image and the <h2> blocks display in the DOM, but then the content is overwritten.

---

I believe the offending code in question is:

https://github.com/gregglind/addon-wr/blob/191d7b000265e174d38a5bcc77d76e67a792dd9e/addon/webextension/content-script.js#L77-L83

[pdehaan]

I think we should probably delete the document.querySelector() code in the snippet above, but if we want to keep it, we should probably cache the querySelector() lookup so we aren't searching the DOM for "#wanted" three times. Possible solution is

// For using with debug / and test pages.
const $wanted = document.querySelector('#wanted');
if ($wanted) { 
  $wanted.innerText="wanted: " + Array.from(wordList);
  document.querySelector('#seen').innerText="seen: " + Array.from(seen);
}

Although if the page doesn't have a "#seen" element (because it's a random page that has a randomly named "wanted" id but no "seen" id), that'd still throw browser console errors like the following:

document.querySelector(...) is null             content-script.js:79