satendra02/react-chrome-extension

chrome extension boilerplate with ReactJs using inject page strategy

React Chrome Extension

A chrome extension boilerplate project with ReactJs using inject page strategy.

Stop worrying about the configurational challenges of setting up the Chrome extension, just start writing your components as usual. Read detailed blog

This project is sponsored By Recast Studio

The boilerplate is to quickly create a chrome extension using ReactJs, The motivation behind creating a boilerplate was:

1. Instead of Chrome's ready-made popup, We wanted our page injected into DOM as a sidebar for better UX.

2. We wanted to use ReactJs for the Component-based approach, Routing, and its build mechanism.

3. We need to make sure that the extension CSS does not conflict with the host page styles in any case.

Features

• Used ReactJs to write Chrome extension
• Injecting extension to host page as a content script
• Utilized the Chrome messaging API
• Isolated extension CSS using Iframe

Installation

Make sure you have NodeJs(>18) version installed

Clone repo

git clone https://github.com/satendra02/react-chrome-extension.git

Go to the react-chrome-extension directory and run

yarn install

Now build the extension using

yarn build

You will see a build folder generated inside [PROJECT_HOME]

To avoid running yarn build after updating any file, you can run

yarn watch

which listens to any local file changes, and rebuilds automatically.

Adding React app extension to Chrome

In the Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.

Now click on the LOAD UNPACKED and browse to [PROJECT_HOME]\build, This will install the React app as a Chrome extension.

When you go to any website and click on the extension icon, the injected page will toggle.

Using SASS

Boilerplate contains sass-loader, so you can use SASS instead of pure CSS in your project. To do so:

1. Rename src/App.css file to src/App.scss
2. Change import line in src/app.js from import './App.css'; to import './App.scss';

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/satendra02/react-chrome-extension/. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The repo is available as open source under the terms of the MIT License.

react-chrome-extension's Issues

iFrame margin 8px

Hello
I'm currently injecting the following HTML into my page:

However for some reason I'm automatically getting a margin of 8px applied to the iFrame

I realise this isn't from your plugin but have you experienced this before and if so how did you fix it?

Unable to `require` or import `ipcRenderer` into a container

I want to be able to communicate between the injected React app and the background.js. In the past I've communicated between a new BrowserWindow and the main process using ipcRenderer, but can't figure it out with the injected app, which doesn't use BrowserWindow.

When I try to require electron, I get the following error:

const { ipcRenderer } = window.require('electron');

Uncaught TypeError: window.require is not a function
    at Object.<anonymous> (content.js:630)
    at __webpack_require__ (content.js:20)
    at Module.<anonymous> (content.js:2216)
    at __webpack_require__ (content.js:20)
    at Object.<anonymous> (content.js:2197)
    at __webpack_require__ (content.js:20)
    at content.js:84
    at content.js:87

Here's my App.js

/*global chrome*/

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const { ipcRenderer } = window.require('electron');

class App extends Component {
  render() {
    const sendMessageTest = () => {
      ipcRenderer.sendSync('synchronous-message', {
        test: 'asdf',
      });
    };
    return (
      <div className="App">
        <header className="App-header">
          {this.props.isExt ?
            <img src={chrome.runtime.getURL("static/media/logo.svg")} className="App-logo" alt="logo" />
          :
            <img src={logo} className="App-logo" alt="logo" />
          }
          <button onPress={sendMessageTest} />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Thanks!

PS - This repo has been a life saver for me!

How to build material ui into production?

I was using import statement like import { makeStyles } from '@material-ui/core/styles' and import CircularProgress from '@material-ui/core/CircularProgress' and it works fine in development and I can see that the style is being injected onto the page with an attribute of data-jss.

But when I ran npm run build and the content.css does not include the styles and the page in production does not have the styles from material ui. I tried modifying the webpack.config.prod.js to use

test: /\.css$/, use: [{ loader: MiniCssExtractPlugin.loader, options: { esModule: true, }, },'css-loader']

but that doesn't seem to work. Is there a solution? Thanks in advance.

Migration to Manifest V3?

Hi! New chrome extension developer here. As I've been learning to develop chrome extensions, I'm reading about the migration to Manifest V3 and was wondering if there are plans to migrate this repo.

Additionally, this repo is still built using older versions of CRA that been ejected. I noticed in newer versions the config folder looks very different. Are there any anticipated issues if I build an extension on these older files?

Hopefully in the near future I will be able to contribute to the migration of this repo to Manifest V3 once I have learned enough, but wanted to leave this note here to see if anyone else has been thinking about this!

Is it possible to inject without an iframe?

Is it possible to inject without an iframe?

How to create package in src?

Hi again!
I'd like to put my React files into packages, but I'm not able to do it.

CSS Injected globally from App.css

Hello

First off thanks for this awesome repo and especially your amazing medium article.

What's Wrong

I'm having a slight issue with the app.css being injected into my page regardless of me wrapping the actual usage of App in a frame component from react-frame-component.

For example:
I have defined my app.css file to have the className: css-19rsoyj which at this point in time happens to be the same className shared by the header on reactjs.org

However, when I do this, the app.css file which is being imported into my app.js file, which is then imported into content.js to be rendered, will affect that class with the following result:

I don't have an image editor however if you look at the CSS styling for this div with the afore-mentioned class name, you can see styles being applied, despite being overridden after.

I have had this issue where if I had a class container it would override another site's container css making the website un-usable.

What have I tried:

I've tried a number of things to debug and validate this problem, they aren't in-depth but I hope they can provide some clarity with where I'm at:

• Disable the app.css import in the app.js file. This removes the css injection confirming this is where the problem is 'originating' from.
• Attempt to wrap the HTML code in app.js in a frame from react-frame-component. This did not work
• disable the import with JS and instead tried: el="stylesheet" href={chrome.runtime.getURL("/static/css/app.css")}. This did not work either.

Conclusion

Any assistance would be great! So far I'm only having cosmetic issues however if this goes live as it is, it will break a lot of people stuff which I don't want happening. Thanks again for putting this together! I hope my issue is clear, it's a little tricky to explain everything haha!

Use google login react library with chrome extension

https://www.npmjs.com/package/react-google-login

when I try to use this library with your code, it's not working. can you please help me out to solve this issue.

Can't seem to add SASS

Is there a straight forward way of adding SASS? Can't seem to get it to work.

Here is what I tried:

1. Change src/app.css to src/app.scss
2. In app.js, change the import statement to import './App.scss';
3. In webpack.config.prod.js - add sass-loader (reference from https://www.npmjs.com/package/sass-loader)

{
    test: /\.s[ac]ss$/,
    use: [
      // Creates `style` nodes from JS strings
      require.resolve('style-loader'),
      // Translates CSS into CommonJS
      require.resolve('css-loader'),
      // Compiles Sass to CSS
      require.resolve('sass-loader'), 
    ],
},

Result : Extension popup doesn't have any styling applied.

How to get local storage in chrome extension

i am trying to access local storage using chrome api but not able to get the values. can u show me how to access it

yarn install does not work

Main branch fails on yarn install due to package dependencies

yarn start and install extension

is it possible to yarn start and not yarn build for every changes?

Where to make API calls?

Where is an appropriate place to make API calls?

Is there a way to erase the few-pixel border around the content?

Hi,

Thanks for the nice addon. Here's the issue I'm asking about:

I cannot find a way to erase that few-pixel white frame around the main content.
If the extension is a single color on a usual website, it's possible to add in the definition of the frame:
<Frame style={{width: "100%", height: "100%", backgroundColor: bgColor}} ...>
However, that's problematic because

1. on some dark mode websites, this background color is overruled, becoming white
2. if the extension is a mixed bag of colors

Any solution?

Thanks!

Can't use "import" in public/app/background.js file

Hello!
I want to import some functions from other files. src files are built ok, so I can use import in them, but I can't do it in my background.js file.
Uncaught SyntaxError: Cannot use import statement outside a module
Could you help me?

React components broken when rendered inside iframe

It seems a great deal of React UI components do not work properly when rendered using this technique inside iframe. Is there any way around it?

Things I have tested that do not work as expected inside iframe using the inject technique:

1. react-beautiful-dnd
2. material-ui
3. react-rnd

Thanks in advance!

add more js files when build

i have added couple of more .js files in src folder. My file name is contentinjector.js. Now i also want to create same name file when i build project. where should i make change that it will also create contentinjector.js along with app.js and content.js in build/static/js

Extension doesn't open on all pages.

Great repo!
Just getting my feet wet with react and chrome Ext dev.

I cloned and setup this repo but noticed the side panel doesn't open on some webpages and right clicking and changing this menu item in picture doesn't affect in those situations.

Am I missing something? Again I just followed the instructions.
Much appreciated

Extension not working on chrome new tab page

Describe the bug
The extension is not doing anything/working on Chrome's 'New Tab' page, accessed by CMD/CTRL + T in the browser.

To Reproduce
Steps to reproduce the behavior:

1. Open Chrome Browser
2. CTRL + T
3. Try to open extension
4. Notice it does not work

Expected behavior
Expected extension to also work on the 'New Tab' screen.

Desktop (please complete the following information):

• OS: Mac OS X (Latest version)
• Browser: Chrome
• Version: Latest version

How to run the content script for the first time?

When I install the chrome extension, the content script does not run on the tabs that were
already present. The tabs should be reloaded before the script works. Is there a solution?

Can we turn this off when running the app from `yarn start`? Failed to compile - No unused vars

When you include an unused var, the app fails to compile and you get the following error:

Failed to compile
./src/components/sidebar/CurrentProduct.js
  Line 1:27:  'useEffect' is defined but never used  no-unused-vars

Search for the keywords to learn more about each error.

That's great for a production build, but while working, it'd be nice to just see the warning but still be able to run the app. This is especially true when running the app from yarn start, rather than yarn watch.

Updating the package.json to ignore the issue doesn't help:

"eslintConfig": {
	"rules": {
		"no-unused-vars": "off"
	}
}

Thanks!

how to use this with hot reloader

its a pain to wait 50+ seconds for each build to complete just to see the changes I made, my app has a lot of components.

what can I do to speed up development?

Make extension compatible with Create React App v2.x

Error: Cannot find module './polyfills'

After running yarn run eject

Extension not working on Yarn Start

Cloned the repo and have the same manifest.json file and package.json and my Node Version is v14.11.0

I receive the following error when running yarn start and cannot open the popup after uploading build folder to the chrome store. Can you help me understand why it's not working?

{
  "name": "my-extension",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/runtime": "^7.10.4",
    "autoprefixer": "^9.8.5",
    "case-sensitive-paths-webpack-plugin": "^2.3.0",
    "chalk": "^4.1.0",
    "css-loader": "^3.6.0",
    "dotenv": "^8.2.0",
    "dotenv-expand": "^5.1.0",
    "fs-extra": "^9.0.1",
    "postcss-flexbugs-fixes": "^4.2.1",
    "promise": "8.0.1",
    "prop-types": "^15.7.2",
    "raf": "3.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-frame-component": "^4.1.2",
    "resolve": "^1.17.0",
    "whatwg-fetch": "3.2.0"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "watch": "npm-watch"
  },
  "watch": {
    "build": {
        "patterns": [
            "src",
            "public"
        ],
        "extensions": "js,html,css,json,svg"
    }
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node",
      "mjs"
    ]
  },
  "babel": {
    "presets": [
      "react-app",
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@babel/plugin-transform-runtime": "^7.10.4",
    "@typescript-eslint/eslint-plugin": "^3.6.0",
    "@typescript-eslint/parser": "^3.6.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.1.0",
    "babel-loader": "^8.1.0",
    "babel-preset-react-app": "^9.1.2",
    "eslint": "^7.4.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.0.7",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "jest": "^26.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "npm-watch": "^0.6.0",
    "postcss-loader": "^3.0.0",
    "react-dev-utils": "^10.2.1",
    "style-loader": "^1.2.1",
    "sw-precache-webpack-plugin": "^1.0.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-manifest-plugin": "^2.2.0"
  }
}

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:117:11)
    at Object.join (path.js:1039:7)
    at noopServiceWorkerMiddleware (/Users/samframpton/Documents/code/outflow/react-chrome-extension/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
    at Layer.handle [as handle_request] (/Users/samframpton/Documents/code/outflow/react-chrome-extension/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/samframpton/Documents/code/outflow/react-chrome-extension/node_modules/express/lib/router/index.js:317:13)
    at /Users/samframpton/Documents/code/outflow/react-chrome-extension/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/samframpton/Documents/code/outflow/react-chrome-extension/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/samframpton/Documents/code/outflow/react-chrome-extension/node_modules/express/lib/router/index.js:275:10)
    at launchEditorMiddleware (/Users/samframpton/Documents/code/outflow/react-chrome-extension/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
    at Layer.handle [as handle_request] (/Users/samframpton/Documents/code/outflow/react-chrome-extension/node_modules/express/lib/router/layer.js:95:5)

Module build failed

I am using npm
just following your instructions
running npm run build but its giving an error
Module build failed: BrowserslistError: Unknown browser query dead at Array.forEach (<anonymous>)

Full Error log
./src/content.css Module build failed: BrowserslistError: Unknown browser query dead`
at Array.forEach ()

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
`

Unwanted styling leaking into iframe

Issue
Some websites have CSS like div {margin: 5em auto;} which targets all of the divs that are injected into the website.

Example
The best example of a real-world website where this is happening is http://example.com, which shows that the styling from the website is overriding the styling inside of the iframe (below).

Extension working nominally on google.com

Extension styling breaking on example.com

Plausible Fix
I'm pretty sure the only way to fix this universally is to implement a shadow dom.

Thoughts?

Cannot get window in Frame

Hi
I cannot get window.grecaptcha in frame. But in console i can do it!

Please check and if you have any solution, please help me!

Cannot install project dependencies

Describe the bug
When running npm install I receive the following error message.

To Reproduce

$ git clone https://github.com/satendra02/react-chrome-extension.git
Cloning into 'react-chrome-extension'...
remote: Enumerating objects: 31, done.
remote: Counting objects: 100% (31/31), done.
remote: Compressing objects: 100% (25/25), done.
remote: Total 203 (delta 11), reused 16 (delta 6), pack-reused 172
Receiving objects: 100% (203/203), 763.39 KiB | 1.23 MiB/s, done.
Resolving deltas: 100% (90/90), done.
$ cd react-chrome-extension/
$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   dev @typescript-eslint/eslint-plugin@"^3.6.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @typescript-eslint/eslint-plugin@"2.x" from [email protected]
npm ERR! node_modules/eslint-config-react-app
npm ERR!   dev eslint-config-react-app@"^5.2.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/<myname>/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/<myname>/.npm/_logs/2020-11-13T00_56_34_520Z-debug.log

Assets in React app don't have extension's path

Hi,
It seems that any assets (image tags) inside the React App, will not have the extension's path.

<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">

Is there a way with webpack to prefix the url links with the extension's url
like chrome-extension://<extension_dynamic_code>?
And also, can this <extension_dynamic_code> be dynamic somehow?

I have added in the manifest.json the asset dir:

"web_accessible_resources":[
   "/static/media/*"
]

so that i can access the assets.

Great work by the way! Thanks a lot!

Reduce width of original webpage to accommodate extension

Is it possible to import npm modules in background.js?

Can't seem to make it work, should it be possible?

es6 not working

i create a function like this in content.js file

a =()=>{ console.log("asd") }

when i do build it gives me error like this.

Missing class properties transform.
  31 | class Main extends React.Component {
  32 |   
> 33 |     a =()=>{
     |     ^
  34 |       console.log("asd")
  35 |     }
  36 | 
 @ multi ./config/polyfills.js ./src/content.js content[1]

Is there a way by which I can keep the dev server running and it builds the changes directly into an html file which I can load in chrome ?

I want to know if there is a way by which I can keep coding in react and on each file save it will build the app into an html file then I just hit the refresh button in chrome and it reloads the html and then my content script will just inject a iframe into the page and set the src to the html file which is getting built from react?

`yarn start` failing

Hi @satendra02, been using your boilerplate template to start on a new chrome extension. But running yarn start fails with the error:

Cannot read property 'entryOption' of undefined

Steps to reproduce it

1. Clone this repository
2. Run yarn
3. Run yarn start

Is there a way I can get around this?

Please find attached a screenshot of the same.

How to use Material UI with this?

Hello, I need help figuring out how to use Material UI with this iframe based extension. I've gone through the previous open/close issues explaining how this can be done, specifically

• #19
• #17

But from the workaround mentioned in #17 what I need help with is how to get the CSS file for Material UI as the styles are inline and apparently we cannot get the CSS files.

Any help or guidance on how to do this will be very much appreciated. Thanks!

Access chrome object (in this case for current tab URL from any component)?

I have this in my content.js component:

  useEffect(() => {
    const queryInfo = { active: true, lastFocusedWindow: true };
    chrome.tabs &&
      chrome.tabs.query(queryInfo, (tabs) => {
        const url = tabs[0].url || "";
        alert(url)
      });
  }, [])

the alert does not get fired. How can I access tabs in content.js (or any components which I import into content.js)?

manifest.json includes already the right permissions:

  "permissions": [
    "tabs",
     "activeTab",
     "<all_urls>"
 ],

Update to Manifest V3

Describe the bug
Update to Manifest V3

SHA code in content_security_policy of the manifest

Could you please advise what file was coded in SHA in the following line of the manifest?

• "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='

After making changes to the extension, it's giving errors when trying to load the extension to chrome.
Thanks!

P.S. removing it still allows the extension to run, so I wonder if that's even needed.

Hey! Can we have an iframe inside the popup? Will that work? I tried it, but got connection refused error

Content Security Policy issue

Hello,

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='". Either the 'unsafe-inline' keyword, a hash ('sha256-N/tHXVVQthcO77tcS7VT2tmLWxdumYi73F87h+hd5s0='), or a nonce ('nonce-...') is required to enable inline execution.

My manifest.json - I tried both hashes: the default one, and the suggested in the error message, but none of them work.

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_security_policy": "script-src 'self' 'sha256-N/tHXVVQthcO77tcS7VT2tmLWxdumYi73F87h+hd5s0='; object-src 'self'"
}

Material UI styling is not correctly rendered inside of iframe.

Hi, Thanks for sharing this project.
But I have a problem using this bolierplate.
I am using Material UI for styling and it doesn't rendered correctly.
It rendered outside of iframe causing broken styling of extension page.

Scraping Website from Extension

Hello

Thanks a lot for helping me here: #24

Just wondering if I can get some advice on how I would use this module and set-up to scrape a webpage I've navigated to?

Ideally, I'd like to avoid JQuery or Cheerio however I am comfortable with it if that's the easiest way.

Thanks a bunch

Just want to know how click event will work

/* * For openning the Hamburger Menu */ openMenu(){ var element = document.getElementById("body"); element.classList.toggle("menu-open"); }

<div className="menu-icon" onClick={() => this.openMenu()}> <div className="menu-box"> <span></span> <span></span> <span></span> </div> </div>

Used above code! in component named as header.js which is included in app.js

"document.getElementById("body");" Hopefully this line should access the iframe's body but that;s not the case it is catching the main page's body!

Thanks in advance!

Clone the code and install extension does not pop up any page

This is a great sample. Thank you for the sharing, however when I clone the project, follow README.md to build, load to chrome extension, clicking the extension icon popup nothing, do you have some insights? Yarn start can open the page.

Jest won't work out of the box

Hi, first of all let me thank you for this CRA-based boilerplate. You've saved me so much time!

Now, straight to the point — There's a problem with the test script, yarn test won't work out the box.

Steps to reproduce

Clone this repository, run yarn install and try to run tests with yarn test, you'll run into two issues:

events.js:187
      throw er; // Unhandled 'error' event
      ^

Error: EMFILE: too many open files, watch
    at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:123:28)
Emitted 'error' event on FSWatcher instance at:
    at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:129:12) {
  errno: -24,
  syscall: 'watch',
  code: 'EMFILE',
  filename: null
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I thought it was a problem with not ignoring node_modules at first, but AFAIK jest ignores node_modules by default. So I solved this updating the jest package.

Then there's this one:

ReferenceError: [BABEL] /Users/<your-user>/Desktop/react-chrome-extension/config/polyfills.js: Unknown option: /Users/<your-user>/Desktop/react-chrome-extension/node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
      `{ presets: [{option: value}] }`
    Valid:
      `{ presets: [['presetName', {option: value}]] }`

Which I solved updating the babel-jest package.

Solution (to sum up)

• Update jestand babel-jest packages.