Bolboa Bolboa - 1 year ago 100
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

in order to get it to work.

This is my

"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

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

My app displays on
. 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
file gets loaded but nothing is rendered. Can someone explain how to do this?


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

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

Answer Source

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:

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

Comment if any further help needed.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download