React Chrome Extension not rendering

Question

I am beginning to build a Chrome Extension using React. My first goal is just to get the React logo to open in the browser extension just like any React project would after its initial build. I followed a few tutorials and set up my manifest file:

{
  "short_name": "React App",
  "name": "React Extension",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "public/index.html",
    "default_title": "React Ext"
  },
  "version": "1.0"
}

I haven't edited any other files so the index.html looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>
  </body>
</html>

When I upload my extension file to Chrome and try to run this extension, only a small white box appears. I would expect the usual React logo to have rendered in my extension. I have been playing around with various solutions and I did discover that if I added

tags and some text into my index.html then that text will appear in the browser extension.

I'm guessing I need something to tell my manifest which files the index.html will reference, but so far I haven't had any luck. If anyone could get me on the right track I would greatly appreciate it.

That was the wrong tutorial. An extension page should have script tags that point to your js. Find a different tutorial for a react chrome extension, not just a react app. To see the basic vanilla extension page examine the official demo extensions. — woxxom
– woxxom, Commented Nov 14, 2018 at 14:09
@wOxxOm most of these do not involve a popdown extension. I understand that to add functionality to my extension I will need a content script but for now I just want to display the react logo on my extension. — tdammon
– tdammon, Commented Nov 14, 2018 at 14:25
That popup is called "browserAction", and it doesn't use content scripts (those are for web pages). Make sure to skim over the architecture overview too. — woxxom
– woxxom, Commented Nov 14, 2018 at 14:36
This is helpful. It looks like I need to add script tags into my index.html to link to any of the other pages I need my extension to interact with. — tdammon
– tdammon, Commented Nov 14, 2018 at 14:50

Adolfo · Accepted Answer · 2019-04-24 20:24:41Z

3

The issue is that the extension generated an error, most likely a Content Security Policy error.

This is how I fixed that problem:

Go to the extensions tab (chrome://extensions)
Under your extension, you should see an errors button, click on it (if you do not see it, click on the extension pop up).
You are going to see an error that says something like Refused to execute inline script because it violates the following Content Security Policy directive. Copy the sha that you see on the error message ('sha256-....')
Go to your manifest.json
Add the following key

"content_security_policy": "script-src 'self' 'sha256-...INSERT COPIED SHA256 HERE'; object-src 'self'"`

Run npm run build or yarn build again.
Reload extension
It should work now!

answered Apr 24, 2019 at 20:24

Adolfo

1,4754 gold badges16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Chrome Extension not rendering

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related