1

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");
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
P.Gardenas
  • 11
  • 2
  • 1. Your `index.html` tries to load `react.js` and `JSXTransformer.js` from an external CDN, this will work only on sites that allow this particular CDN. 2. If `reactjs` posts/pushes some data to its API server you'll need a [CSP rule](https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing-remote-script). – wOxxOm Sep 23 '15 at 09:11
  • Thank you for the answer, do you know if it is possible to load the script some other way even if the site don't allow the CDN, for example via javascript? – P.Gardenas Sep 23 '15 at 13:19
  • Simply load the scripts from your extension package. You're manually assigning the `innerHTML` anyway so you can manually insert two ` – wOxxOm Sep 23 '15 at 13:24
  • I don't seem to have any success with the changes I have tried out, would you care to give an example how one might make a CSP rule so the script would for example work on this site? – P.Gardenas Sep 24 '15 at 08:48
  • CSP rule might be not needed if the script doesn't make any requests, you can see it in the devtools Network panel and I think the console log would contain an error. – wOxxOm Sep 24 '15 at 08:54
  • Only the content script seemed to do any requests. I can find both react.js and JSXTransformer.js in sources so both should be added right? – P.Gardenas Sep 24 '15 at 09:16

0 Answers0