Chrome extensions - loading JavaScript files added by the extension

Question

My Chrome extension adds several references to js files (e.g. <script src="javascript_file_1.js"></script> ). Using chrome's 'Inspect element' feature I can see that all references are added correctly, however they do not seem to be 'loaded'. Is there any way to 're-execute' the page so these new js files are loaded?

Here is the code I use:

var srcArray = ["javascript_file_1.js",
        "javascript_file_2.js",
        "javascript_file_3.js",
        "javascript_file_4.js",
        "javascript_file_5.js",
        "javascript_file_6.js",
        "javascript_file_7.js"];
                
function AddScript(value)
{
    var entry = document.createElement("SCRIPT")
    entry.src = value;
    document.head.appendChild(entry);
    
}

They seem to be added after the page got rendered, hence their content was not used while rendering the page.

Answer 1

Inject your content script with "run_at" : "document_start", scripts injected with this option are injected right after css injection, but before DOM is constructed or any other script is run.

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"],
      "run_at": "document_start"
    }
  ],
  ...
}

With this option your code is used while rendering the page.