如何通过chrome扩展注入react元素？

Question

我无法通过 chrome 扩展注入反应元素。虽然它可能是重复的，但我已经阅读了一些有关通过 chrome 扩展注入反应元素的问题，并尝试了各种方法来注入反应元素。但它仍然不起作用。

读1

读2

读3

按照我的代码

清单.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]
);

内容脚本.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(chrome.extension.getURL('js/test.js'), function(){
});

在这种情况下，我还尝试加载所有脚本来执行反应代码，例如browser.min.js，，，。react.min.jsreact-dom.min.js

各种试验返回错误，例如，Unexpected Token '<'或脚本未加载。

一切都不起作用。我不知道如何注入反应元素。

Answer 1

实现这一点的最简单方法是使用manifest.json注入，而不是像编程注入chrome.tabs.executeScript或插入脚本标签。

样本manifest.json如下，

清单.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
        }
    ]
}

测试.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. 至于您的注入代码，您需要react.js在注入之前使用相同的方式进行注入等test.js，或者仅将这些文件包含在content_scripts字段中。