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.

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')
            }
        };
});