Solution 1 :

Despite testing it on the console of which is permitted by manifest.json:

"content_scripts": [{
    "matches": [""], 
    "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.

Problem :

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.


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

JS['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");
            console.log(i + ' got appended')


Comment posted by epascarello

You are looking for a

Comment posted by Accessing console and devtools of extension’s background.js


Comment posted by MDN

“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.”

Comment posted by Daniyal dehleh

@wOxxOm ok so you mean declaring them only in the manifest is enough?

Comment posted by Daniyal dehleh

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