-1

Please note: before marking this post as duplicate, I have already went through all the similar SO posts one by one & tried the following solutions:

  1. Linking JS at the bottom
  2. Using querySelector instead of getElementById
  3. making sure the IDs are the same
  4. Adding windows.onload

However, none have worked hence my post.

HTML

<form>
  <label for="cars"></label>
  <select name="cars" id="cars">
    <option value="volvo">volvo</option>
    <option value="saab">Saab</option>
  </select>
  <br><br>
</form>
<script type="text/javascript" src="./content.js"></script>
 <script type="text/javascript" src="./background.js"></script>

JS

chrome.storage.local.get(['list'], function(result) {
    if (result){
        for (i of result.list)
            {
            var option = document.createElement("option");
            option.text = i; //nonempty
            option.value = "myvalue";
            // var select = document.getElementById("cars");
            var select = document.querySelector("cars");
            select.appendChild(option);
            console.log(i + ' got appended')
            }
        };
});
Daniyal dehleh
  • 2,314
  • 2
  • 7
  • 22
  • You are looking for a `` element. If getElementById does not find it.... there is no special reason querySelector would. Sounds like your issue is timing or how you are creating the extension. – epascarello Jan 15 '21 at 19:43
  • 1
    Remove `script` tag for `background.js`. The background script already runs in a separate hidden background page which doesn't have any of the popup's HTML. See [Accessing console and devtools of extension's background.js](https://stackoverflow.com/a/10258029). Also remove `script` for `content.js` because content scripts are for web pages, not for the extension pages such as the popup. – wOxxOm Jan 15 '21 at 19:44
  • **"The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned."** [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) – Rob Moll Jan 15 '21 at 19:44
  • @wOxxOm ok so you mean declaring them only in the manifest is enough? – Daniyal dehleh Jan 15 '21 at 19:49
  • By timing do you mean if JS is being called after/before HTML tag gets loaded? if not, would you mind explaining? I believe I took the standard approach on building extension from a udemy course – Daniyal dehleh Jan 15 '21 at 19:51
  • @RobMoll I do understand the error but I'm not sure why it's occurring when the element with the same ID is clearly there w/o any spelling mismatch – Daniyal dehleh Jan 15 '21 at 19:53
  • Try this: `var select = document.querySelector("#cars");` – Rob Moll Jan 15 '21 at 20:06
  • unfortunately, didn't help either :( – Daniyal dehleh Jan 15 '21 at 20:48

1 Answers1

0

Despite testing it on the console of https://www.blank.org/ which is permitted by manifest.json:

"content_scripts": [{
    "matches": ["https://www.blank.org/"], 
    "js": ["content.js"],

I realized that the values do get inputted despite the error being still generated in the dev console. Not sure why but no longer face the problem.

Daniyal dehleh
  • 2,314
  • 2
  • 7
  • 22