Question

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

关注我的代码

的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(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字段中包含这些文件。

如何通过铬延伸注入反应元素？

1 个答案: