How to inject react element via chrome extension?
<p>I am having trouble to inject react element via chrome extension. Although it may be duplicated, <strong>i have already read some questions in terms of injecting react element via chrome extension and tried a various methods to inject react element.</strong> but it is still not working.</p>

<p><a href="https://stackoverflow.com/questions/32734906/add-reactjs-elements-via-a-chrome-extension">READ1</a></p>

<p><a href="https://stackoverflow.com/questions/36599147/proper-way-to-inject-react-component-onto-page-in-chrome-extension">READ2</a></p>

<p><a href="https://stackoverflow.com/questions/33449634/react-js-inject-react-is-not-defined">READ3</a></p>

<p>Following my code</p>

<p><strong>manifest.json</strong></p>

<pre><code>{
    "manifest_version": 2,
    "name": "__MSG_name__",
    "version": "1.0.0",
    "description": "__MSG_description__",
    "author": "Seokjun Hong",
    "default_locale": "en",
    "browser_action": {
        "default_title": "__MSG_name__"
    },
    "web_accessible_resources": [
        "js/jquery-2.2.3.min.js",
        "html/emoji_box.html",
        "js/vendor/browser.min.js",
        "js/vendor/react.min.js",
        "js/vendor/react-dom.min.js",
        "js/vendor/react-with-addons.min.js",
        "js/test.js"
    ],
    "content_scripts": [{
        "matches": [
            "https://github.com/*",
            "https://gist.github.com/*"
        ],
        "js": [
            "js/jquery-2.2.3.min.js",
            "js/content_script.js",
            "js/semantic.min.js",
            "js/test.js"
        ],
        "css": [
            "css/semantic.min.css"
        ],
        "run_at": "document_idle",
        "all_frames": false
    }]
}
</code></pre>

<p><strong>test.js (react element)</strong></p>

<pre><code>/** @jsx React.DOM */
var Counter = React.createClass({
    getInitialState: function () {
        return { count: 0 };
    },
    handleClick: function () {
        this.setState({
            count: this.state.count + 1,
        });
    },
    render: function () {
        return (
            &lt;button onClick={this.handleClick}&gt;
                Click me! Number of clicks: {this.state.count}
            &lt;/button&gt;
        );
    }
});
ReactDOM.render(
    &lt;Counter /&gt;,
    document.getElementsByClassName('timeline-comment')[0]
);
</code></pre>

<p><strong>content_script.js</strong></p>

<pre><code>(function() {
    //append react script, following trial
})();
</code></pre>

<p>I have tried to inject react script into content. </p>

<p><strong>TRIAL1: Injecting script tag using <code>createElement</code></strong></p>

<pre><code>// Adds the react.jsx
var jsx = document.createElement('script');
jsx.src = chrome.extension.getURL('js/test.js');
jsx.type="text/babel";
jsx.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(jsx);
</code></pre>

<p>I also tried following code</p>

<pre><code>$(document.head).append('&lt;script src="' + chrome.extension.getURL('js/test.js') + '" type="text/babel"&gt;&lt;/script&gt;')
</code></pre>

<p><strong>TRIAL2: Loading script using <code>getScript of jQuery</code></strong></p>

<pre><code>$.getScript(chrome.extension.getURL('js/test.js'), function(){
});
</code></pre>

<p>In this case, I also tried to load all script to execute react code, e.g., <code>browser.min.js</code>, <code>react.min.js</code>, <code>react-dom.min.js</code>.</p>

<p>Various trial returns errors, e.g., <code>Unexpected Token '&lt;'</code> or script not loading.</p>

<p>Everything is not working. i don't know <strong>how to inject react element.</strong> </p>