Question

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

我添加了两个控制台并使用相同的方法做出反应，唯一的区别是我将反应类型声明为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);

的manifest.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"));

的index.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>

console.js

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

通过chrome扩展添加ReactJS元素

0 个答案: