如何通過鉻延伸注入反應元素？

Question

我無法通過鍍鉻擴展注入反應元素。 雖然它可能是重復的，但我已經閱讀了一些關於通過鉻延伸注入反應元素的問題，並嘗試了各種方法來注入反應元素。 但它仍然無法正常工作。

READ1

READ2

讀3

按照我的代碼

的manifest.json

{
    "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
    }]
}

test.js（反應元素）

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

content_script.js

(function() {
    //append react script, following trial
})();

我試圖將反應腳本注入內容。

TRIAL1：使用createElement注入腳本標記

// 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);

我也嘗試過以下代碼

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

TRIAL2：使用getScript of jQuery getScript加載腳本

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

在這種情況下，我還嘗試加載所有腳本來執行反應代碼，例如browser.min.js ， react.min.js ， react-dom.min.js 。

各種試驗返回錯誤，例如， Unexpected Token '<'或腳本未加載。

一切都行不通。 我不知道如何注入反應元素。

Answer 1

實現這一目標的最簡單方法是使用manifest.json注入而不是像chrome.tabs.executeScript那樣編程注入或插入腳本標記。

示例manifest.json如下，

的manifest.json

{
    "manifest_version": 2,
    "name": "__MSG_name__",
    "version": "1.0.0",
    "description": "__MSG_description__",
    "author": "Seokjun Hong",
    "browser_action": {
        "default_title": "__MSG_name__"
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "react.js",
                "react-dom.js",
                "react-with-addons.js",
                "test.js"
            ],
            "run_at": "document_idle",
            "all_frames": false
        }
    ]
}

test.js

var HelloMessage = React.createClass({
  displayName: "HelloMessage",

  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
   }
});

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), document.body);

請注意，在這種情況下，您需要使用已編譯的js而不是JSX。

如果你想進行編程注入，請確保在注入test.js之前注入所有與反應有關的js 。 至於你的注入代碼，你需要使用相同的方法在注入react.js之前注入test.js ，或者只是在content_scripts字段中包含這些文件。