Multiple .js files for content script not working

Question

I am working on a chrome extension that uses content scripts. To make the code a bit more easy to maintain i want to split things up into multiple files. I followed all the instructions everywhere on how to use multiple files for the same match pattern, but nothing seems to be working.

This is my manifest.json:

{

  "manifest_version": 2,
  "name": "Test Extension",
  "version": "0.1",

  "description": "This is a test extension",

  "icons": {
    "48": "icons/icon-48.png"
  },

  "content_scripts": [
    {
      "js": ["test.js", "main.js"],
      "matches": ["*://*.netflix.com/*"],
      "run_at": "document_end"
    }
  ]

}

Now i have two scripts that i want to use together, test.js and main.js.

test.js:

var test = "Hello";
console.log("This is a test");

and main.js:

console.log(test);

The variable declared in test.js should be global and accessible from the main.js script, but when i try it in chrome it says that "test is not defined". Apparently the first script is not even executed, because the console.log i added to test.js is not showing up in the console at all. I have also made sure that test.js is before main.js so that it loads in the correct order and i also tried using a library like jquery, but i am just not able to access the variables and functions from the other file inside main.js.

Any help is greatly appreciated.

Answer 1

I am using the addon "Extension Reloader" for Chrome to quickly reload the my extension and the current site and it apparently does not reload the manifest.json. Changes to files that are already in the manifest work, but when you add another file into it, it does not run.
So if you use that extension aswell be sure to reload your extension in chrome://extensions when changing anything in the manifest.