IT技术 - 通过 chrome 扩展添加 ReactJS 元素 - 吾爱随笔录

我想通过在网站上添加一些 ReactJS 元素来更改网站。我正在运行一个内容脚本，我在其中添加了react脚本以及 index.html 和一个 console.js，后两个工作正常。

我正在添加控制台并使用相同的方法做出react，唯一的区别是我将react的类型声明为 text/jsx。

我尝试通过 html 文档添加 JSXTransformer.js 和 react.js 并且：

var a = document.createElement('script');
a.src = chrome.extension.getURL('build/JSXTransformer.js');
a.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(a);

但我没有注意到两者有任何区别。

一些代码：

contentScript.js

// Loads the html document onto the page.
var xmlHttp = null;

xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", chrome.extension.getURL ("index.html"), false );
xmlHttp.send( null );

var inject  = document.createElement('div');

inject.innerHTML = xmlHttp.responseText


document.body.insertBefore (inject, document.body.firstChild);


// Adds the react.jsx
var jsx = document.createElement('script');

jsx.src = chrome.extension.getURL('React.jsx');

// Adding type="text/jsx"
jsx.type="text/jsx";
jsx.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(jsx);


// Adds the cosole.js
var js= document.createElement('script');

js.src = chrome.extension.getURL('console.js');

js.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(js);

清单.json

{
"name":"Test react",
"description":"",
"version":"1",
"web_accessible_resources": ["index.html","React.jsx","console.js","build/react.js","build/JSXTransformer.js"],
"manifest_version":2,

"content_scripts": [
    {
      "matches": ["http://stackoverflow.com/*"],
      "js": ["contentScript.js"]


    }
  ]

}

react.jsx

/*** @jsx Reaxt.DOM */
var Start = React.createClass({
  render: function() {
    return (
      <div>

        React is working fine
      </div>
    );
  }
});

React.render(<Start/>, document.getElementById("test"));

索引.html：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <meta charset="UTF-8">


</head>
<body>


  <h1> Hallo World</h1>
  <div  id="test"></div>


</body>
</html>

控制台.js

console.log("Normal JS is working fine");