1

Trying to get more information on why this is not working. I have never worked with Chrome extensions before. When trying to access the page DOM it seems like my popup button is accessing its own HTML instead of the page it's on. Ill include all the code to see if anything stands out for someone.

index.js


document.getElementById("ignore").addEventListener("click", function () {
  const user = document.getElementById("ignoreUser");
  const userValue = user.value.split(" ").join("-");
  console.log(userValue, allUserComments);
  //content meta a
});

manifest.json

{
    "name": "Ignore User",
    "version": "1.0.0",
    "description": "Ignore Users at Touch of Button",
    "manifest_version": 3,
    "author": "Chris",
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_title": "Test",
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab",
        "scripting"
    ],
    "host_permissions": [
        "https://www.reddit.com/*"
    ]

}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ignore User</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3 p-md-2" style="width: 450px;">
        <h2 class="text-center">Ignore User</h2>
        <label for="ignoreUser" class="form-label">User Name</label>
        <input type="text" class="form-control" id="ignoreUser">
        <button class="btn btn-primary mt-3" id="ignore">Ignore</button>
    </div>
</body>
<script src="index.js"></script>
</html>

background.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  console.log(tabId, changeInfo, tab);
  if (tab.status === "complete") {
    chrome.scripting
      .executeScript({
        target: { tabId: tab.id },
        files: ["index.js"],
      })
      .then(() => {
        console.log("INJECTED THE FOREGROUND SCRIPT.");
      })
      .catch((err) => {
        console.log("ERROR INJECTING THE FOREGROUND SCRIPT.", err);
      });
  }
});
Chris Pfaff
  • 31
  • 2
  • 4
  • The popup is indeed an entirely separate page not related to the web page. It has its own DOM, document, window. If you want to access the web page: remove background.js and `background` in manifest.json, and use executeScript inside your popup script e.g. in a click listener for the button: [examples](/a/67227376). – wOxxOm Mar 03 '23 at 18:50

0 Answers0