0

I am trying to create a chrome extension which takes a number from a hidden input element and injects a html table showing the number. However, the extension loads only after I refresh the page. The webpage I am getting the data from is completely static, no fancy stuff going on. Just a basic HTML page. When I first go to the page, this is the error I get. When I refresh it, everything runs how it should

Here is how the manifest file looks like.

{
    "name": "Extension name",
    "version": "1.0",
    "description": "Extension description",
    "content_scripts": [
        {
            "matches": ["*://*.example.com/something/*/something"],
            "js": ["/dostuff.js"]
        }
    ],
    "manifest_version": 3
}

And here is dostuff.js

let hiddenElement = document.getElementById("someId").value;
let var1 = hiddenElement * 2;

let leftCol = document.getElementById("anotherId").parentElement;
let table = document.createElement("table");
table.innerHTML = "<tr><td>Number: </td><td>" + var1 + "</td></tr>"
leftCol.appendChild(table);

Any help is greatly appreciated :)

ilko2712
  • 3
  • 4
  • It's a SPA site, probably, so see [this answer](https://stackoverflow.com/a/39508954) and [How to listen for url change with Chrome Extension](https://stackoverflow.com/a/50548409). And you'll need to match the entire site `*://*.example.com/*`, then check the URL on change to see if it's the one you want. – wOxxOm Apr 02 '21 at 16:23

1 Answers1

-1

Add a run_at property to your content script to ensure it only runs when the page has loaded.

{
    "name": "Extension name",
    "version": "1.0",
    "description": "Extension description",
    "content_scripts": [
        {
            "matches": ["*://*.example.com/something/*/something"],
            "js": ["/dostuff.js"],
            "run_at": "document_end"
        }
    ],
    "manifest_version": 3
}
Zulfe
  • 820
  • 7
  • 25