Boilerplate for Chrome Extension React.js project

License: MIT License

JavaScript 86.78% HTML 1.77% CSS 11.45%

react-chrome-extension-boilerplate's Introduction

React Chrome Extension Boilerplate

Boilerplate for Chrome Extension React.js project.

Features

Simple React/Redux examples of Chrome Extension Window & Popup & Inject pages
Hot reloading React/Redux (Using Webpack and React Transform)
Write code with ES2015+ syntax (Using Babel)
E2E tests of Window & Popup & Inject pages (Using Chrome Driver, Selenium Webdriver)

Examples

The example is edited from Redux TodoMVC example.

Popup

The todos state will be saved to chrome.storage.local.

Window

The context menu is created by chrome/extension/background/contextMenus.js.

Inject page

The inject script is being run by chrome/extension/background/inject.js. A simple example will be inject bottom of page(https://github.com/*) if you visit.

If you are receiving the error message Failed to load resource: net::ERR_INSECURE_RESPONSE, you need to allow invalid certificates for resources loaded from localhost. You can do this by visiting the following URL: chrome://flags/#allow-insecure-localhost and enabling Allow invalid certificates for resources loaded from localhost.

Installation

# clone it
$ git clone https://github.com/jhen0409/react-chrome-extension-boilerplate.git

# Install dependencies
$ npm install

Development

Run script

# build files to './dev'
# start webpack development server
$ npm run dev

If you're developing Inject page, please allow https://localhost:3000 connections. (Because injectpage injected GitHub (https) pages, so webpack server procotol must be https.)
Load unpacked extensions with ./dev folder.

React/Redux hot reload

This boilerplate uses Webpack and react-transform, and use Redux. You can hot reload by editing related files of Popup & Window & Inject page.

Using Redux DevTools Extension

You can use redux-devtools-extension on development mode.

Build

# build files to './build'
$ npm run build

Compress

# compress build folder to {manifest.name}.zip and crx
$ npm run build
$ npm run compress -- [options]

Options

If you want to build crx file (auto update), please provide options, and add update.xml file url in [manifest.json](https://developer.chrome.com/extensions/autoupdate#update_url manifest.json).

--app-id: your extension id (can be get it when you first release extension)
--key: your private key path (default: './key.pem')
you can use npm run compress-keygen to generate private key ./key.pem
--codebase: your crx file url

See autoupdate guide for more information.

Test

test/app: React components, Redux actions & reducers tests
test/e2e: E2E tests (use chromedriver, selenium-webdriver)

# lint
$ npm run lint
# test/app
$ npm test
$ npm test -- --watch  # watch files
# test/e2e
$ npm run build
$ npm run test-e2e

LICENSE

MIT

react-chrome-extension-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

sseppola snehesht przeor chytanya eljoaquin youiest tylergannon jketcham rotaryden gazet rothfels leecade go4roc athmangude bankasgushenki sangwonl rahul-tarafdar-synerzip nuclearspike wkw razab shaharhalutz manhhailua michalczaplinski jamesmcintyre nicholas-b-carter liamqma tidjungs decamun tyao1 heartrunner phucpnt azakordonets supostat beavis28 nhz-io attfarhan rtkgogrady kokjinsam karn09 marcamartin northerneyes nickbytes zjlovezj fortranlee jonathanlehner sihui akulaggarwal minhlucvan bradparks niubaba63 mayk93 pavelnartov packetlost rvenugopal oliveratutexas zalmoxisus samsongz vladfr agrcrobles atfzl jin501 bibikhadiza forkhome izagz henji mattlk13 lasergoat robertsi gdseller jasoncyu alejosanudo hackur abhinavzspace tmashuang arvinh pranaygp vinceprofeta tecsyscom telnicky swapkats couturecraigj neomen vlashchanka turquoisemelon dottenpixel sohwendy alexandre-roitman international wjhurley warent mbondyra seabsaye cdcharlebois c-jacquin ankithkonda horacioh adiog niilante dinhbinh1610 yuanyu90221

react-chrome-extension-boilerplate's Issues

Simplify boilerplate

Just use npm scripts instead of gulp
- webpack, webpack-dev-server, eslint, mocha, crx use CLI tool instead.
- ~~Move replace-webpack-code to webapck config, it's sync code of purely.~~
- ~~Don't use jade, just use chrome/*.html, dist/*.html.~~
- ~~No manifest.{env}.json, just use chrome/manifest.json, dist/manifest.json~~
Remove redux-devtools monitor dependencies, and recommend use redux-devtools-extension.
Implement all #8 tasks.

Use with semantic-ui-react

While the below refers to semantic-ui, I would guess the same problem occurs with other ui frameworks.

Installed the boilerplate

$ git clone https://github.com/jhen0409/react-chrome-extension-boilerplate.git
$ npm install

Installed semantic ui from https://react.semantic-ui.com/usage

$ npm install semantic-ui-react --save
$ npm install semantic-ui-css --save

Imported semantic css inside /app/containers/Root.js
import 'semantic-ui-css/semantic.min.css';

I then get the following errors

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/images/flags.png' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:202659-202708

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.eot' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264152-264200 6:264218-264266

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.woff2' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264315-264365

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.woff' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264395-264444

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.ttf' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264473-264521

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.svg' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264554-264602

Trying to solve this, I then installed file-loader and url-loader
npm install --save-dev file-loader
npm install --save-dev url-loader

And I updated /webpack/dev.config.js to use these loaders for the various image file types.

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['react-hmre']
        }
      },
      {
        test: /\.css$/,
        loaders: [
          'style',
          'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss'
        ]
      },
      {
        test: /\.(png|gif)$/,
        loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader'
      },
      {
        test: /\.jpg$/,
        loader: 'file-loader'
      },
      {
        test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }
    ]
  }

After updating /webpack.dev.config, I continue to get the exact same error.

TravisCI fails

I'm using the .travis.yml file from master, and enabled the repo at travis-ci.com.

The Travis build fails, not having changed the boilerplate.

The error is:

Some packages could not be installed. This may mean that you have
requested an impossible situation or if you are using the unstable
distribution that some required packages have not yet been created
or been moved out of Incoming.
The following information may help to resolve the situation:

The following packages have unmet dependencies:
 google-chrome-stable : Depends: lsb-base (>= 4.1) but 4.0-0ubuntu20.3 is to be installed

See the full log file here.

Module not found: Error: Cannot resolve module 'webpack-hot-middleware/client'

I see the below errors while npm run dev. It was because 'webpack-hot-middleware' package is missing. How about including that package in `package.json'?

ERROR in multi todoapp
Module not found: Error: Cannot resolve module 'webpack-hot-middleware/client' in /Users/sangwonl/Develops/others/react-chrome-extension-boilerplate
@ multi todoapp

ERROR in multi background
Module not found: Error: Cannot resolve module 'webpack-hot-middleware/client' in /Users/sangwonl/Develops/others/react-chrome-extension-boilerplate
@ multi background

Change injectpage to localhost page & GitHub page

The original injectpage is detect visiting GitHub and start, it will cause some problems, so I have plan to move it to the localhost and GitHub page.

I has three reasons:
~~1. The injectpage include redux-devtools, it will affect developers read on GitHub.~~
~~2. The webpack-dev-server will no longer use https.~~
~~3. The injectpage E2E test run on localhost of CI build, everything will work well.~~

Add bootstrap-loader problem

I'm trying to add bootstrap to my chrome extension but I don't know how to integrate the "entry" of bootstrap loader to existent "entry" at "webpack/dev.config.js" and "webpack/prod.config.js".

ERR_TOO_MANY_REDIRECTS

I get ERR_TOO_MANY_REDIRECTS after navigating to https://localhost:3000

accessing `document` in React components

I'd like to use the inject.js to scrape data from the DOM and pass it back to the background redux store.

Is that possible with the way the app is injected?

So far I have tried importing the store into inject.js and calling dispatch, but that doesn't work.

When I try to access document from within a React component, it only returns the DOM of the react component, not the page being viewed.

popup: How can I define a popup.html for the extension?

How can I use a popup react page and communicate with chrome messages with my inject script?

inject.js how to include css?

I can't seem to be able to add css to inject.js (the file containing injectApp) in any way, how to import/require/?

(I tried adding '< link > ' of cdn-hosted stylesheet in background.html to no avail, it won't read it. )

Thank you!

Fail to run npm run dev

When i tried to run npm run dev this is the output.

terminal output

> [email protected] dev /var/www/chrome-extension
> node scripts/dev

/var/www/chrome-extension/scripts/tasks.js:3
exports.replaceWebpack = () => {
                          ^
SyntaxError: Unexpected token )
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/var/www/chrome-extension/scripts/dev.js:1:77)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

npm ERR! Linux 3.19.0-43-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v0.12.2
npm ERR! npm  v2.7.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `node scripts/dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'node scripts/dev'.
npm ERR! This is most likely a problem with the react-chrome-extension-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/dev
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-chrome-extension-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /var/www/chrome-extension/npm-debug.log

npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info predev [email protected]
6 info dev [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec dev script
9 verbose stack Error: [email protected] dev: `node scripts/dev`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack     at EventEmitter.emit (events.js:110:17)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12)
9 verbose stack     at ChildProcess.emit (events.js:110:17)
9 verbose stack     at maybeClose (child_process.js:1015:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd /var/www/chrome-extension
12 error Linux 3.19.0-43-generic
13 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
14 error node v0.12.2
15 error npm  v2.7.4
16 error code ELIFECYCLE
17 error [email protected] dev: `node scripts/dev`
17 error Exit status 1
18 error Failed at the [email protected] dev script 'node scripts/dev'.
18 error This is most likely a problem with the react-chrome-extension-boilerplate package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     node scripts/dev
18 error You can get their info via:
18 error     npm owner ls react-chrome-extension-boilerplate
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Remove `babel-preset-es2015`

This boilerplate is only for Chrome Extension, so we can just following ES2015 compatible syntax of Google Chrome.
The Webpack@2 is supported ES2015 import/export transform, we can remove babel-preset-es2015 in Webpack build.

Waiting

Webpack@2 stable released
UglifyJS2 supported ES2015 syntax (harmony branch)

Unable to update styling

When I run "npm run dev" or modify any of the css files, I get the following message on the console "PostCSS Config could not be loaded. Please check your PostCSS Config."

Thanks
RV

Memory runs out on installation

==== JS stack trace =========================================

Security context: 0x2c5a67fb4629 <JS Object>
    2: /* anonymous */(aka /* anonymous */) [/usr/local/lib/node_modules/npm/node_modules/validate-npm-package-license/node_modules/spdx-expression-parse/index.js:~3] [pc=0x3c6ad1aa2aff] (this=0x2c5a67f041b9 <undefined>,argument=0x348489a0cca9 <String[3]: MIT>)
    3: /* anonymous */ [/usr/local/lib/node_modules/npm/node_modules/validate-npm-package-license/index.js:36] [pc=0x3c6ae02f7287] (thi...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
[1]    26068 abort      npm install react-chrome-extension-boilerplate --dev

Replace deprecated babel-preset-react-hmre

Currently it looks like babel-preset-react-hmre is being deprecated. Maybe it make sense to investigate and replace it?

How can I add devtools.panel?

I'm new to this repo so I'm now confusing with how to create a devtools.panel.

Unsupported manifest property in latest Chrome Canary 49

The icons.scalable property is not supported in latest Canary, and as a result the extension fail to install. I do not see any alternatives as to remove it.

BTW, @jhen0409, what do you think if we'll test (on Travis or AppVeyor) in Canary as well, so it would be possible to avoid some problems in new Chrome version before it would be released? Not sure though if it would be possible.

allow extension for all urls?

I am trying to allow the extension to work on all websites.

I modified the manifest.json (including the dev version) adding necessary permissions:
"permissions": [ "contextMenus", "management", "tabs", "storage", "https://*/*", "<all_urls>" ],

but it doesn't help, it won't work. Apparently it only works on github, and the matter is dealt with by this variable, which, would only work for github.com (tried replacing it with other websites, won't work)

const arrowURLs = ['^https://github\\.com'];

any clues?

Thanks,

Chrome extension doesn't work in dev mode

Hey guys, I'm trying to run the chrome extension in dev mode.

I've done everything the instructions say, and everything works EXCEPT the todo app.

When I load the production version with npm run build, I get the todo app, but when I do npm run dev and load the dev folder, the todo app is blank.

Attaching images below. Any idea why?

How to use content.js script and popup.js in this architecture ??

I have file for content.js which is actually contains Whole UI of the Extension.
This is Code Snippet

import React from 'react';
import ReactDOM from 'react-dom';
import AppClass from '../../app/index';
import { Provider } from 'react-redux';
import { Store } from 'react-chrome-redux';

const store = new Store({ state: {}, portName: 'TAB_STORE' });

store.ready().then(() => {
ReactDOM.render(

,
document.querySelector('#root')
);
});

Another File is popup.js .
If I write the following code in my popup.js file then Chrome console gives me error as
Failed to load resource: the server responded with a status of 404 (Not Found) popup.bundle.js

Following code I am including in popup.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
POPUP
, document.querySelector('#app')
);

My issue is I actually don't get what should i write in my popup.js.

As I am using boilerplate example so that automatically converts .js in to .html in chrome Folder.

Please help me I am stuck in this issue from last 5 days.

Thanks in advance.

`inject.js` is actually redundant.

There is actually no content script injected I think. No such field in manifest.json, and the bundle file is not actually written to disk.

Error font url at development mode

I use bootstrap-loader in my project and got this error.

What does chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/inject.bundle.js') come from?

Hello there! Thank you for creating this boilerplate. It has been tremendously useful to me! I'm trying to dig deep into the code and I found this:

chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/inject.bundle.js')

in multiple files like chrome/extension/background/inject.js and jade templates under /chrome/views. I removed it and it didn't seem it's affecting anything. So is it safe to remove it?

Remove DEVELOPMENT constant

Are any reasons of using webpack __DEVELOPMENT__ constant while we have process.env.NODE_ENV? Doesn't uglify remove dead code in the latter case?

Roadmap

MINIMAL boilerplate?

Is there a way to download a MINIMAL boilerplate without all the stuff you put inside it?

I'd just like to have the basic configuration without have to delete ton of files and try to make it work...

Problems on Windows

To make build command run under Windows I had to modify package.json like this:

"build": "set BABEL_ENV=production & gulp build",

same for the other:

"test:app": "set BABEL_ENV=test & mocha --recursive --compilers js:babel-core/register test/app",

cannot GET

Hello there, I installed the boilerplate and it works, rendering the toDoApp, however, when I open a tab on port 3000, it says Cannot GET / :

this is terminal webpack output:

Is anyone else experiencing the same issue? Any suggestions on how to tackle this?

ERR_FILE_NOT_FOUND for inject

I am trying to work on the inject script, but I keep getting the error:

chrome-extension://pheloakanjmafejdhjgcgfbcdlladodf/js/inject.bundle.js net::ERR_FILE_NOT_FOUND

I haven't changed the inject.js at all other than changing the id for the extension, so am unsure of what the issue may be. Any ideas?

Thanks

Changes to backgound script [background.js] doesn't trigger hot reloading

Unlike other files, changes made to background.js doesn't propagate automatically and requires manual reloading of the chrome extension. Any workaround?

syncronize across tabs with localstorage

Hi,

Updating the popup doesn't persist to localstore or propagate to other windows where the extension is running. How would I rerender all reacts when localstore changes?

I'm looking to persist state to localstorage in a way similar to these:

https://github.com/STRML/react-localstorage
http://stackoverflow.com/questions/21741754/react-js-syncing-entire-state-to-localstorage

I can then fire chrome.storage.onChanged.addListener but where does that go to reload the DOM(s) ?

Cheers,

Elias

Need to update the package.json

Here's the error log that occurred while running npm install

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.2.6
npm ERR! npm  v2.14.12
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint@^2.4.0
npm ERR! peerinvalid Peer [email protected] wants eslint@<2.0.0

inject.js not working on fresh install

Great boilerplate project, really helps get of the ground running for someone new to extensions.

I have the popup working fine but am having issues with the inject portion on github.

In the docs it states simply:
"The inject script is being run by chrome/extension/background/inject.js. A simple example will be inject bottom of page(https://github.com/*) if you visit."

I would think that if my popup is working fine I've done the install and setup correctly, but nothing happens when i got to any link on github. Is there some setup that I might be missing and is also missing from the docs to get inject to work correctly?

Also when I try to console log in inject.js to debug there's nothing gets logged. From what I've read injected/content scripts should log to the normal browser console.

Same store, different root

I added an extra view for the new tab and it works great! Also, I updated the popup view to render a form for adding a new item to the list. All works great but I still need to refresh the new tab window to see the new item.

What I would like to do is have the new item show automatically in the new tab list when I add it via the popup.
Does anyone know if I can make it work without refresh?

For reference, I replaced #root with #popupRoot in popup.pug, and then edited todoapp.js as:

...

const createStore = require('../../app/store/configureStore');
const store = createStore(initialState);

if (document.querySelector('#root')) {
    ReactDOM.render(
      <Root store={store} />,
      document.querySelector('#root')
    );
  }
  if (document.querySelector('#popupRoot')) {
    ReactDOM.render(
      <PopupRoot store={store}/>,
      document.querySelector('#popupRoot')
    );
  }

Question... how to configure "web_accessible_resources" for js files?

Background:

I am trying to inject a script via script tag. The normal injection run by current bioler plate is to excuted still under the contentscript context, beucase it uses chome.tabs.executeScript()...

The reason I need the scrip tag to inject the code is named in that Stockoverflow page below: Since scripts injected under a script tag (by contentscript) have access to some resources that content script itself do not have.

http://stackoverflow.com/questions/9263671/google-chome-application-shortcut-how-to-auto-load-javascript/9310273#9310273

If you want to access global methods or properties, you have to dynamically create a <script>, and inject it in the page.

contentscript.js

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
    s.parentNode.removeChild(s);
};

So my question/problem is:

In both the dev manifest and production, I added

  "web_accessible_resources": [
    "inject.html",
    "js/myfile.bundle.js"
  ],

but I keep getting the error:

Denying load of chrome-extension://pbibkaembagmglekahlenkagincbkpnl/js/myfile.bundle.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

So if I want to add files to web_accessible_resources, how should I configure it differently for dev and prod?

Thanks

How would I add a content script?

I have a need to manipulate the DOM in my extension and need a content script, but not sure how that fits in this structure

Add npm scripts: Load unpack extension with chrome-launch

Use remote version React / Redux DevTools

Standalone react-devtools app with connectToDevTools
remote-redux-devtools - due to zalmoxisus/crossbuilder#48 we can't use redux-devtools-extension for now :\

Using Redux DevTools inside extensions is deprecated

Noticed this in my console today:
Using Redux DevTools inside extensions is deprecated and won't be supported in the next major version. Please use https://github.com/zalmoxisus/remote-redux-devtools instead.

`yarn run dev`, Module build failed: SyntaxError: Unexpected token

Hi, Jhen-Jie Hong :-)

yarn run dev

yarn run v0.24.6
$ node scripts/dev
[Copy assets]
--------------------------------------------------------------------------------

  rendered /Users/HaveF/Desktop/proj/xq-helper/dev/background.html
  rendered /Users/HaveF/Desktop/proj/xq-helper/dev/inject.html
  rendered /Users/HaveF/Desktop/proj/xq-helper/dev/popup.html
  rendered /Users/HaveF/Desktop/proj/xq-helper/dev/window.html
[Webpack Dev]
--------------------------------------------------------------------------------
If you're developing Inject page,
please allow `https://localhost:3000` connections in Google Chrome,
and load unpacked extensions with `./dev` folder. (see https://developer.chrome.com/extensions/getstarted#unpacked)

[webpack-httpolyglot-server] http(s)://localhost:3000
webpack built 03869fb5b1e89a8e5998 in 647ms
Hash: 03869fb5b1e89a8e5998
Version: webpack 1.15.0
Time: 647ms
           Asset     Size  Chunks       Chunk Names
inject.bundle.js  3.48 kB       0       main
chunk    {0} inject.bundle.js (main) 629 bytes [rendered]
    [0] multi main 40 bytes {0} [built] [1 error]
    [1] ./webpack/customPublicPath.js 589 bytes {0} [built]

ERROR in ./chrome/extension/inject.js
Module build failed: SyntaxError: Unexpected token (11:16)

   9 |   }
  10 |
> 11 |   buttonOnClick = () => {
     |                 ^
  12 |     this.setState({ isVisible: !this.state.isVisible });
  13 |   };
  14 |

 @ multi main
webpack built b15585277b2fb9a9d53f in 1123ms
Hash: b15585277b2fb9a9d53f
Version: webpack 1.15.0
Time: 1123ms
               Asset    Size  Chunks       Chunk Names
background.bundle.js  754 kB       0       background
   todoapp.bundle.js  232 kB       1       todoapp
chunk    {0} background.bundle.js (background) 271 kB [rendered]
    [0] multi background 52 bytes {0} [built]
    [1] ./webpack/customPublicPath.js 589 bytes {0} {1} [built]
    [2] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 6.68 kB {0} {1} [built]
    [3] (webpack)/buildin/module.js 251 bytes {0} {1} [built]
    [4] ./~/querystring/index.js 127 bytes {0} {1} [built]
    [5] ./~/querystring/decode.js 2.4 kB {0} {1} [built]
    [6] ./~/querystring/encode.js 2.09 kB {0} {1} [built]
    [7] ./~/strip-ansi/index.js 161 bytes {0} {1} [built]
    [8] ./~/ansi-regex/index.js 135 bytes {0} {1} [built]
    [9] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} {1} [built]
   [10] ./~/ansi-html/index.js 4.26 kB {0} {1} [built]
   [11] ./~/html-entities/index.js 231 bytes {0} {1} [built]
   [12] ./~/html-entities/lib/xml-entities.js 2.99 kB {0} {1} [built]
   [13] ./~/html-entities/lib/html4-entities.js 6.59 kB {0} {1} [built]
   [14] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} [built]
   [15] (webpack)-hot-middleware/process-update.js 4.11 kB {0} {1} [built]
   [16] ./chrome/extension/background.js 676 bytes {0} [built] [1 error]
   [17] ./~/bluebird/js/release/bluebird.js 291 bytes {0} [built]
   [18] ./~/bluebird/js/release/promise.js 25.8 kB {0} [built]
   [19] ./~/process/browser.js 5.42 kB {0} [built]
   [20] ./~/bluebird/js/release/util.js 10.3 kB {0} [built]
   [21] ./~/bluebird/js/release/es5.js 1.98 kB {0} [built]
   [22] ./~/bluebird/js/release/async.js 4.13 kB {0} [built]
   [23] ./~/bluebird/js/release/schedule.js 2.09 kB {0} [built]
   [24] ./~/timers-browserify/main.js 1.36 kB {0} [built]
   [25] ./~/setimmediate/setImmediate.js 6.47 kB {0} [built]
   [26] ./~/bluebird/js/release/queue.js 1.87 kB {0} [built]
   [27] ./~/bluebird/js/release/errors.js 3.72 kB {0} [built]
   [28] ./~/bluebird/js/release/thenables.js 2.13 kB {0} [built]
   [29] ./~/bluebird/js/release/promise_array.js 5.21 kB {0} [built]
   [30] ./~/bluebird/js/release/context.js 2.38 kB {0} [built]
   [31] ./~/bluebird/js/release/debuggability.js 29.5 kB {0} [built]
   [32] ./~/bluebird/js/release/finally.js 4.61 kB {0} [built]
   [33] ./~/bluebird/js/release/catch_filter.js 1.43 kB {0} [built]
   [34] ./~/bluebird/js/release/nodeback.js 1.56 kB {0} [built]
   [35] ./~/bluebird/js/release/method.js 1.77 kB {0} [built]
   [36] ./~/bluebird/js/release/bind.js 1.97 kB {0} [built]
   [37] ./~/bluebird/js/release/cancel.js 3.71 kB {0} [built]
   [38] ./~/bluebird/js/release/direct_resolve.js 1.4 kB {0} [built]
   [39] ./~/bluebird/js/release/synchronous_inspection.js 2.81 kB {0} [built]
   [40] ./~/bluebird/js/release/join.js 8.22 kB {0} [built]
   [41] ./~/bluebird/js/release/map.js 5.38 kB {0} [built]
   [42] ./~/bluebird/js/release/call_get.js 4.36 kB {0} [built]
   [43] ./~/bluebird/js/release/using.js 7.53 kB {0} [built]
   [44] ./~/bluebird/js/release/timers.js 2.4 kB {0} [built]
   [45] ./~/bluebird/js/release/generators.js 7.76 kB {0} [built]
   [46] ./~/bluebird/js/release/nodeify.js 1.65 kB {0} [built]
   [47] ./~/bluebird/js/release/promisify.js 12.2 kB {0} [built]
   [48] ./~/bluebird/js/release/props.js 3.12 kB {0} [built]
   [49] ./~/bluebird/js/release/race.js 1.25 kB {0} [built]
   [50] ./~/bluebird/js/release/reduce.js 5.13 kB {0} [built]
   [51] ./~/bluebird/js/release/settle.js 1.26 kB {0} [built]
   [52] ./~/bluebird/js/release/some.js 3.96 kB {0} [built]
   [53] ./~/bluebird/js/release/filter.js 314 bytes {0} [built]
   [54] ./~/bluebird/js/release/each.js 789 bytes {0} [built]
   [55] ./~/bluebird/js/release/any.js 421 bytes {0} [built]
   [56] ./chrome/extension/background/contextMenus.js 795 bytes {0} [built]
   [58] ./chrome/extension/background/badge.js 352 bytes {0} [built]
chunk    {1} todoapp.bundle.js (todoapp) 81.5 kB [rendered]
    [0] multi todoapp 52 bytes {1} [built] [1 error]
    [1] ./webpack/customPublicPath.js 589 bytes {0} {1} [built]
    [2] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 6.68 kB {0} {1} [built]
    [3] (webpack)/buildin/module.js 251 bytes {0} {1} [built]
    [4] ./~/querystring/index.js 127 bytes {0} {1} [built]
    [5] ./~/querystring/decode.js 2.4 kB {0} {1} [built]
    [6] ./~/querystring/encode.js 2.09 kB {0} {1} [built]
    [7] ./~/strip-ansi/index.js 161 bytes {0} {1} [built]
    [8] ./~/ansi-regex/index.js 135 bytes {0} {1} [built]
    [9] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} {1} [built]
   [10] ./~/ansi-html/index.js 4.26 kB {0} {1} [built]
   [11] ./~/html-entities/index.js 231 bytes {0} {1} [built]
   [12] ./~/html-entities/lib/xml-entities.js 2.99 kB {0} {1} [built]
   [13] ./~/html-entities/lib/html4-entities.js 6.59 kB {0} {1} [built]
   [14] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} [built]
   [15] (webpack)-hot-middleware/process-update.js 4.11 kB {0} {1} [built]

ERROR in ./chrome/extension/todoapp.js
Module build failed: SyntaxError: Unexpected token (13:4)

  11 |
  12 |   ReactDOM.render(
> 13 |     <Root store={createStore(initialState)} />,
     |     ^
  14 |     document.querySelector('#root')
  15 |   );
  16 | });

 @ multi todoapp

ERROR in ./chrome/extension/background/inject.js
Module parse failed: /Users/HaveF/Desktop/proj/xq-helper/node_modules/babel-loader/lib/index.js?{"presets":["react-hmre"]}!/Users/HaveF/Desktop/proj/xq-helper/chrome/extension/background/inject.js Unexpected token (33:65)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (33:65)
    at Parser.pp$4.raise (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.expect (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:597:28)
    at Parser.pp$3.parseExprList (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:2152:16)
    at Parser.pp$3.parseSubscripts (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1741:35)
    at Parser.pp$3.parseExprSubscripts (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1718:17)
    at Parser.pp$3.parseMaybeUnary (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1597:21)
 @ ./chrome/extension/background.js 25:0-30
webpack building...
webpack built b15585277b2fb9a9d53f in 68ms
Hash: b15585277b2fb9a9d53f
Version: webpack 1.15.0
Time: 68ms
               Asset    Size  Chunks       Chunk Names
background.bundle.js  754 kB       0       background
   todoapp.bundle.js  232 kB       1       todoapp
chunk    {0} background.bundle.js (background) 271 kB
    [0] multi background 52 bytes {0}
    [1] ./webpack/customPublicPath.js 589 bytes {0} {1}
    [2] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 6.68 kB {0} {1}
    [3] (webpack)/buildin/module.js 251 bytes {0} {1}
    [4] ./~/querystring/index.js 127 bytes {0} {1}
    [5] ./~/querystring/decode.js 2.4 kB {0} {1}
    [6] ./~/querystring/encode.js 2.09 kB {0} {1}
    [7] ./~/strip-ansi/index.js 161 bytes {0} {1}
    [8] ./~/ansi-regex/index.js 135 bytes {0} {1}
    [9] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} {1}
   [10] ./~/ansi-html/index.js 4.26 kB {0} {1}
   [11] ./~/html-entities/index.js 231 bytes {0} {1}
   [12] ./~/html-entities/lib/xml-entities.js 2.99 kB {0} {1}
   [13] ./~/html-entities/lib/html4-entities.js 6.59 kB {0} {1}
   [14] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1}
   [15] (webpack)-hot-middleware/process-update.js 4.11 kB {0} {1}
   [16] ./chrome/extension/background.js 676 bytes {0} [2 errors]
   [17] ./~/bluebird/js/release/bluebird.js 291 bytes {0}
   [18] ./~/bluebird/js/release/promise.js 25.8 kB {0}
   [19] ./~/process/browser.js 5.42 kB {0}
   [20] ./~/bluebird/js/release/util.js 10.3 kB {0}
   [21] ./~/bluebird/js/release/es5.js 1.98 kB {0}
   [22] ./~/bluebird/js/release/async.js 4.13 kB {0}
   [23] ./~/bluebird/js/release/schedule.js 2.09 kB {0}
   [24] ./~/timers-browserify/main.js 1.36 kB {0}
   [25] ./~/setimmediate/setImmediate.js 6.47 kB {0}
   [26] ./~/bluebird/js/release/queue.js 1.87 kB {0}
   [27] ./~/bluebird/js/release/errors.js 3.72 kB {0}
   [28] ./~/bluebird/js/release/thenables.js 2.13 kB {0}
   [29] ./~/bluebird/js/release/promise_array.js 5.21 kB {0}
   [30] ./~/bluebird/js/release/context.js 2.38 kB {0}
   [31] ./~/bluebird/js/release/debuggability.js 29.5 kB {0}
   [32] ./~/bluebird/js/release/finally.js 4.61 kB {0}
   [33] ./~/bluebird/js/release/catch_filter.js 1.43 kB {0}
   [34] ./~/bluebird/js/release/nodeback.js 1.56 kB {0}
   [35] ./~/bluebird/js/release/method.js 1.77 kB {0}
   [36] ./~/bluebird/js/release/bind.js 1.97 kB {0}
   [37] ./~/bluebird/js/release/cancel.js 3.71 kB {0}
   [38] ./~/bluebird/js/release/direct_resolve.js 1.4 kB {0}
   [39] ./~/bluebird/js/release/synchronous_inspection.js 2.81 kB {0}
   [40] ./~/bluebird/js/release/join.js 8.22 kB {0}
   [41] ./~/bluebird/js/release/map.js 5.38 kB {0}
   [42] ./~/bluebird/js/release/call_get.js 4.36 kB {0}
   [43] ./~/bluebird/js/release/using.js 7.53 kB {0}
   [44] ./~/bluebird/js/release/timers.js 2.4 kB {0}
   [45] ./~/bluebird/js/release/generators.js 7.76 kB {0}
   [46] ./~/bluebird/js/release/nodeify.js 1.65 kB {0}
   [47] ./~/bluebird/js/release/promisify.js 12.2 kB {0}
   [48] ./~/bluebird/js/release/props.js 3.12 kB {0}
   [49] ./~/bluebird/js/release/race.js 1.25 kB {0}
   [50] ./~/bluebird/js/release/reduce.js 5.13 kB {0}
   [51] ./~/bluebird/js/release/settle.js 1.26 kB {0}
   [52] ./~/bluebird/js/release/some.js 3.96 kB {0}
   [53] ./~/bluebird/js/release/filter.js 314 bytes {0}
   [54] ./~/bluebird/js/release/each.js 789 bytes {0}
   [55] ./~/bluebird/js/release/any.js 421 bytes {0}
   [56] ./chrome/extension/background/contextMenus.js 795 bytes {0}
   [58] ./chrome/extension/background/badge.js 352 bytes {0}
chunk    {1} todoapp.bundle.js (todoapp) 81.5 kB
    [0] multi todoapp 52 bytes {1} [2 errors]
    [1] ./webpack/customPublicPath.js 589 bytes {0} {1}
    [2] (webpack)-hot-middleware/client.js?path=__webpack_hmr&dynamicPublicPath=true 6.68 kB {0} {1}
    [3] (webpack)/buildin/module.js 251 bytes {0} {1}
    [4] ./~/querystring/index.js 127 bytes {0} {1}
    [5] ./~/querystring/decode.js 2.4 kB {0} {1}
    [6] ./~/querystring/encode.js 2.09 kB {0} {1}
    [7] ./~/strip-ansi/index.js 161 bytes {0} {1}
    [8] ./~/ansi-regex/index.js 135 bytes {0} {1}
    [9] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} {1}
   [10] ./~/ansi-html/index.js 4.26 kB {0} {1}
   [11] ./~/html-entities/index.js 231 bytes {0} {1}
   [12] ./~/html-entities/lib/xml-entities.js 2.99 kB {0} {1}
   [13] ./~/html-entities/lib/html4-entities.js 6.59 kB {0} {1}
   [14] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1}
   [15] (webpack)-hot-middleware/process-update.js 4.11 kB {0} {1}

ERROR in ./chrome/extension/todoapp.js
Module build failed: SyntaxError: Unexpected token (13:4)

  11 |
  12 |   ReactDOM.render(
> 13 |     <Root store={createStore(initialState)} />,
     |     ^
  14 |     document.querySelector('#root')
  15 |   );
  16 | });

 @ multi todoapp

ERROR in ./chrome/extension/background/inject.js
Module parse failed: /Users/HaveF/Desktop/proj/xq-helper/node_modules/babel-loader/lib/index.js?{"presets":["react-hmre"]}!/Users/HaveF/Desktop/proj/xq-helper/chrome/extension/background/inject.js Unexpected token (33:65)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (33:65)
    at Parser.pp$4.raise (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.expect (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:597:28)
    at Parser.pp$3.parseExprList (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:2152:16)
    at Parser.pp$3.parseSubscripts (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1741:35)
    at Parser.pp$3.parseExprSubscripts (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1718:17)
    at Parser.pp$3.parseMaybeUnary (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/HaveF/Desktop/proj/xq-helper/node_modules/acorn/dist/acorn.js:1597:21)
 @ ./chrome/extension/background.js 25:0-30

node --version
v8.1.3
npm --version
5.0.3

Have any idea? thanks!

jslint: Arrow function used ambiguously with a conditional expression

Since npm run lint is one of the commands of this boilerplate, it would be a good idea to deal with all jslint errors. I'm having issues resolving this:

/app/components/MainSection.js
  73:41  error  Arrow function used ambiguously with a conditional expression  no-confusing-arrow

The relevant code is:

const completedCount = todos.reduce((count, todo) =>
      todo.completed ? count + 1 : count,
      0
    );

It seems as though jslint doesn't like arrow functions with a conditional expression. I've tried other ways, such as a traditional function, but these resulted in other jslint errors.

Using icons (e.g. font awesome)

I've tried to use react-fa by setting up the following loaders:

  {
    test: /\.css$/,
    include: /node_modules/,
    loaders: ['style-loader', 'css-loader'],
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
  }

This works fine on development when injecting into a HTTP page. However, when navigating to a HTTPS page, the url-loader will try to access woff2 files from a unsecured endpoint. The exact error is:

addStyles.js?b980:242Mixed Content: The page at 'https://tweakers.net/?brudy' was loaded over HTTPS, but requested an insecure font 'http://localhost:3000/js/926c93d201fe51c8f351e858468980c3.woff2'. This request has been blocked; the content must be served over HTTPS.

This seems like a tricky issue that would be a good addition to the boilerplate. Do you have an idea on how to resolve this?

Similarly, when building the extension, rather than running with webpack-dev-server, the files cannot be loaded at all.

Add messaging example

Hi,
I've been trying to add messaging from the injected script to a dev panel aaaaand the learning curve is pretty steep.

It might be a great addition to add messaging, since I've seen people struggling with it on stack overflow as well.

I haven't been able to pass a message from injected script yet.

Unable to get RHL3 to work

Hello,

I'm trying to upgrade this boilerplate to use Webpack2 and RHL3. Webpack2 is pretty stable now and babel-preset-react-hmr is no longer maintained. I was able to get Webpack2 up and running but failed to make RHL3 work. I keep getting this:

If anyone has successfully intergrated RHL3 with this boilerplate, it would be greatly appreciated if you can share some tips!

Unable to reach momentumdash.com?

Hi and thank you for this repo.

I am having troubles getting it to run.

I'm running the dev-server
I have loaded the unpacked extension
I see the new tool button

but I get this stack trace on the console:

POST https://stats.momentumdash.com/ingest 503 (Service Unavailable)
   Z.ajaxTransport.G.cors.t.crossDomain.send @ lib.min.js:4
   Z.extend.ajax @ lib.min.js:4submitStats @ app.min.js:5
   (anonymous function) @ app.min.js:9
   Z.Callbacks.l @ lib.min.js:2
   Z.Callbacks.h.fireWith @ lib.min.js:2
   Z.extend.ready @ lib.min.js:2o @ lib.min.js:1

Thank you!

Misplaced elements at first display

After a simple click on the extension icon, the elements inside the popup are all displayed in a messy order, until I start using it by clicking anywhere in the popup.

The weird thing is that I took a screenshot and all seems fine on it!

Just wanted to know if you see what I mean (if it happens, it's quite obvious to notice)?

On Mac and my Chrome is up-to-date.

Readme: unclear how to run in development

Please provide more information on how to run the project in development:

[13:42:14] Please allow `https://localhost:3000` connections in Google Chrome

[13:42:14] and load unpacked extensions with ./dev

In particular, what does "load unpacked extensions with ./dev" mean?

How to run it without running the whole npm run compress and manually installing it via dragging it to chrome://extensions/?

Handle inject page on extension icon click

Is there a way to trigger Dock opening on extension icon click event?

Loading images from inject.js

Thanks for creating this extension. It is tremendously helpful.

I am trying to inject a picture into a page from chrome/extension/inject.js. I have installed the file-loader webpack plugin. Then in inject.js, I have the following code in my render():

<img src={require('../assets/img/picture.png')} />

In my manifest file, I have included:

"web_accessible_resources": ["inject.hmtl", "assets/*"]

In my console in Google chrome, I get:

Denying load of chrome-extension://boaecdlopamogbahmoinodmlbnipdpol/js//images/picture.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

What am I doing wrong?

Cannot run dev on pages with special CSP

When I navigate to URLs like https://github.com/ColdSauce/CosmosBrowserAndroid I see in my console:

Refused to connect to 'https://localhost:3000/__webpack_hmr_for_injectpage' because it violates the following Content Security Policy directive: "connect-src 'self' uploads.github.com status.github.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com wss://live.github.com".

The problem is that the extension's CSP has no influence on the react app, which is injected into the page using a content script. The react app becomes part of the injected website's scope, resulting in the use of the website's (in this case Github's) CSP.

Do you have any idea how to circumvent this?

jhen0409 / react-chrome-extension-boilerplate Goto Github PK