Javascript 通过chrome扩展添加ReactJS元素_Javascript_Google Chrome Extension_Reactjs

Javascript 通过chrome扩展添加ReactJS元素

javascript google-chrome-extension reactjs

Javascript 通过chrome扩展添加ReactJS元素,javascript,google-chrome-extension,reactjs,Javascript,Google Chrome Extension,Reactjs,我想通过添加一些元素来改变一个网站。我正在运行一个内容脚本，其中添加了react脚本、index.html和console.js，后面两个都可以我使用相同的方法添加console和react，唯一的区别是我将react的类型声明为text/jsx 我已尝试通过html文档和以下内容添加jsxtTransformer.js和react.js： var a = document.createElement('script'); a.src = chrome.extension.getURL('bu

我想通过添加一些元素来改变一个网站。我正在运行一个内容脚本，其中添加了react脚本、index.html和console.js，后面两个都可以

我使用相同的方法添加console和react，唯一的区别是我将react的类型声明为text/jsx

我已尝试通过html文档和以下内容添加jsxtTransformer.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"));

1.您的

index.html

尝试从外部CDN加载

react.js

和

JSXTransformer.js

，这仅在允许此特定CDN的站点上有效。2.如果

reactjs

向其API服务器发布/推送一些数据，您将需要一个。谢谢您的回答，您知道即使站点不允许CDN，是否可以以其他方式加载脚本，例如通过javascript？只需从扩展包加载脚本即可。您正在手动分配

innerHTML

，因此可以手动插入两个

元素，例如

src

设置为

chrome.extension.getURL（“script1.js”）

。此外，这些脚本已经在

“web\u可访问的\u资源”

中列出，因此您应该实际使用它们。只是别忘了调查我提到的CSP问题。我尝试的更改似乎没有任何成功，您是否愿意举例说明如何制定CSP规则，以便脚本在该站点上运行？如果脚本不发出任何请求，则可能不需要CSP规则，您可以在devtools网络面板中看到它，我认为控制台日志将包含一个错误。1。您的

index.html

尝试从外部CDN加载

react.js

和

JSXTransformer.js

，这仅在允许此特定CDN的站点上有效。2.如果

reactjs

innerHTML

，因此可以手动插入两个

元素，例如

src

设置为

chrome.extension.getURL（“script1.js”）

。此外，这些脚本已经在

“web\u可访问的\u资源”

中列出，因此您应该实际使用它们。只是别忘了调查我提到的CSP问题。我尝试的更改似乎没有任何成功，您是否愿意举例说明如何制定CSP规则，以便脚本在该站点上运行？如果脚本不发出任何请求，则可能不需要CSP规则，您可以在devtools网络面板中看到它，我认为控制台日志将包含一个错误。

<!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.log("Normal JS is working fine");