title: Modifying a webpage element using a browser extension but popup is affected instead of the webpage
body: <p>I'm learning about Google browser extension and having fun with it.</p>
  <p>I have this problem where I wanted to replace a webpage element with images and text with another image or text. It is working well if that is the only feature that I wanted but I wanted another feature to be implemented so I added a popup to have multiple checkboxes to switch the features on or off. As I was starting to mess around with checkboxes to enable this feature, it only effects on the browser extension page &quot;popup.html&quot; page instead of the webpage (tried adding an image into the popup and it only changed in the popup). I tried looking for solutions online and reading the documentation and I don't really understand how to resolve it.</p>
  <p>I noticed that if I don't have the popup, the extension will work on any webpage. So I'm not sure how to effect it directly into a webpage.</p>
  <p>Here is what I have currently.</p>
  <p><strong>content.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>function willSmithMode() {
    let willSmithImages = [
      //images here
    ];
  
    //find element by tag name and replace
    const imgs = document.getElementsByTagName(&quot;img&quot;);
  
    for (let i = 0; i &lt; imgs.length; i++) {
      const randomImg = [Math.floor(Math.random() * willSmithImages.length)];
      imgs[i].src = willSmithImages[randomImg];
    }
  
    // more code here for other tags such as h1 or p
  
    console.log('Checked Will Smith');
  }
  
  document.getElementById('RepTextAndImg').addEventListener('change', event =&gt; {
    willSmithMode();
  });
  </code></pre>
  <p><strong>popup.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;form-check form-switch&quot;&gt;
              &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; name=&quot;settings&quot; role=&quot;switch&quot; id=&quot;RepTextAndImg&quot; value=&quot;reptext&quot; /&gt;
              &lt;label class=&quot;form-check-label&quot; for=&quot;RepTextAndImg&quot;&gt;Replace Text and Images&lt;/label&gt;
          &lt;/div&gt;
  </code></pre>
  <p><strong>manifest.json</strong></p>
  <pre class="lang-json prettyprint-override"><code>...
  &quot;content_scripts&quot;: [
          {
              &quot;matches&quot;: [&quot;&lt;all_urls&gt;&quot;],
              &quot;js&quot;: [&quot;content.js&quot;]
          }
      ],
      &quot;permissions&quot;: [
          &quot;storage&quot;,
          &quot;tabs&quot;
      ],
      &quot;action&quot;: {
          &quot;default_popup&quot;: &quot;popup.html&quot;,
  </code></pre>
  <p><strong>tl;dr</strong>
  I want to modify webpages' text and images but I have a popup to toggle multiple functions. So the JavaScript only effects the popup.html instead of any webpage.</p>