React Js inject (React is not defined)

Question

Why: For use react in chrome extension

Code:

var files = [

    {element: 'script', parameters: {src: chrome.extension.getURL("ui/react.min.js")}},
    {element: 'script', parameters: {src: chrome.extension.getURL("ui/react-dom.min.js")}},
    {element: 'script', parameters: {src: chrome.extension.getURL("ui/popup.js")}},

    ]

    for(var i=0; i < files.length; i++){
        file = files[i]

        var e = document.createElement(file.element);

        for(var j in file.parameters){
            param = file.parameters[j];
            console.log(param)
            e[j] = param;
        }
        document.head.appendChild(e);
    }

Result: files injected successfully, but I got error (Uncaught ReferenceError: React is not defined) when try to use it in popup.js

Answer 1

Scripts are not injected synchronously. Consider using stuff like webpack, to bundle them into 1 piece with out-of-the-box dependency management(we are living in 2015, after all :))

see document.createElement("script") synchronously

as reference