I want to change a website by adding some ReactJS elements onto it. I'm running a content script where I add the react script as well as index.html and a console.js, the later two works fine.
I'm adding both console and react with the same method with the only difference being that I declare the type of react to be text/jsx.
I have tried adding the JSXTransformer.js and react.js both via the html document and:
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);
But I didn't notice any difference with either.
Some code:
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");
index.htmltries to loadreact.jsandJSXTransformer.jsfrom an external CDN, this will work only on sites that allow this particular CDN. 2. Ifreactjsposts/pushes some data to its API server you'll need a CSP rule.innerHTMLanyway so you can manually insert two<script>elements withsrcset tochrome.extension.getURL("script1.js")for example. Moreover these scripts are already listed in"web_accessible_resources", so you should actually use them. Just don't forget to investigate the CSP issue I mentioned.