Bolboa Bolboa - 1 month ago 16
JSON Question

How to run react (using webpack) as a chrome extension

I am building a chrome extension, but I want to use react to build it. I am not sure how I need to configure my

manifest.json
in order to get it to work.

This is my
manifest.json
file...

{
"name": "Get pages source",
"version": "1.0",
"manifest_version": 2,
"description": "Get pages source from a popup",
"browser_action": {
"default_popup": "./src/index.html"
},
"permissions": ["tabs", "<all_urls>"]
}


Now the way that I run my app locally, is with the following script in
package.json
...

"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
}


My app displays on
localhost:8080
. However, I want the app to open up when I click on my extension. How can I do this? Do I need to reference the path to the localhost?

At the moment, when I run my extension, the
index.html
file gets loaded but nothing is rendered. Can someone explain how to do this?

EDIT

I also tried the following but it did not work...

"browser_action": {
"default_popup": "http://localhost:8080/src/index.html"
},

Answer

Change default_popup in manifest.json to "src/index.html".

Always build your code before packing extension and use webpack instead of webpack-dev-server

Also babel-core and webpack-dev-server were missing from package.json

Here is the screenshot of working extension:

enter image description here

Screenshot of development:

enter image description here

Make a new folder when you publish your extension which excludes node_modules folders ( only after you npm run build )

Here is the link with the updated code: https://drive.google.com/open?id=0ByrxEyIevnFmNXlDZERaRTBMSlE

Please don't forget to run npm install and npm run build before loading unpacked extension.

Comment if any further help needed.