Modifying a webpage element using a browser extension but popup is affected instead of the webpage

Question

I'm learning about Google browser extension and having fun with it.

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 "popup.html" 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.

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.

Here is what I have currently.

content.js

function willSmithMode() {
  let willSmithImages = [
    //images here
  ];

  //find element by tag name and replace
  const imgs = document.getElementsByTagName("img");

  for (let i = 0; i < 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 => {
  willSmithMode();
});

popup.html

<div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="settings" role="switch" id="RepTextAndImg" value="reptext" />
            <label class="form-check-label" for="RepTextAndImg">Replace Text and Images</label>
        </div>

manifest.json

...
"content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "storage",
        "tabs"
    ],
    "action": {
        "default_popup": "popup.html",

tl;dr 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.