ESLint: 'chrome' is not defined (no-undef)

Question

I added ESLint to my chrome extension project. I am using chrome API which starts with chrome., but obviously eslint points on it as error.

I suppose it should be something like:

"env": {
  "browser": true,
  "chrome": true,
  "es6": true
},

but apparently it's not.

UPD: I would consider best answer is to add webextensions: true – as wOxxOm suggested. Because it's a chrome extension - chrome. API is heavily used here.

Otherwise adding /* global chrome */ as other suggested would work better.

Thanks for answers.

There is no chrome env I don't think. Have you tried `/* global chrome */`? — Andrew Li, Feb 02 '18 at 14:17

score 99 · Answer 1 · answered May 24 '18 at 16:06

99

You need to add:

"env": {
    // ...
    "webextensions": true
}

to your .eslintrc.json file or eslint configuration in general.

answered May 24 '18 at 16:06

Daniel Kmak

18,164
7
66
89

2

The "webextensions" key in eslintConfig doesn't work for me.. Here's my eslintConfig from package.json: `"eslintConfig": { "extends": "react-app", "env": {"webextensions": true}},` Any idea why ? – gkpo Dec 11 '18 at 08:53
Can you add to `env`, `"browser": true,` as well? Next to webextensions. – Daniel Kmak Dec 11 '18 at 09:02
2

Still no luck... `"eslintConfig": { "extends": "react-app", "env": { "webextensions": true, "browser": true } },` so far the only solution that works for me is adding `/* global chrome */` at the top of my js files that use "chrome". – gkpo Dec 11 '18 at 13:32
1

Make sure you're using at least ESLint 1.7.0 – Nick McCurdy Nov 08 '19 at 18:55

score 9 · Answer 2 · edited Apr 25 '18 at 08:17

9

You can add this in your eslint config file to add a global variable

"globals": {
    "chrome": true
}

edited Apr 25 '18 at 08:17

IKavanagh

6,089
11
42
47

answered Apr 25 '18 at 08:00

hiluluke

115
1
4

Michael Yaworski · Answer 3 · 2020-11-09T03:14:14.087

Edit: In create-react-app v4.0.0, the EXTEND_ESLINT flag is no longer required to customize the ESLint config, so the following answer should not be necessary past version 4.0.0.

We've also upgraded eslint-plugin-hooks to version 4.0.0 and removed the EXTEND_ESLINT flag as it is no longer required to customize the ESLint config.

I am using create-react-app and found that in addition to defining:

# This is YAML btw
env:
  # ...
  webextensions: true

in my eslint config (which adds chrome as a global), I also had to set the EXTEND_ESLINT environment variable for create-react-app to true. Docs here.

There are a few different ways of setting this environment variable. For example, you can create a .env file in the root of your project folder with the content:

EXTEND_ESLINT=true

From the documentation, I believe this an experimental feature, but it provides your eslint config to the eslint-loader. Prior to setting enabling this, I had to manually comment the

/* global chrome */

in each file, since the build process was not using my eslint config and therefore not recognizing that I set chrome to be a global.

And although this question does not mention create-react-app, I'm sure lots of people will come to this question with the same circumstance as myself.

score 0 · Answer 4 · answered Feb 02 '18 at 15:53

As mentioned in the comments there is no chrome environment, you can find more information about the configurable environments in the eslint docs.

You can specify globals for each file as a top line comment, or in your configuration file, see specifying global. You can also write your custom Eslint Chrome plugin that sets the globals and parser options(that is what an environment does for you) and import that into your config file.

ESLint: 'chrome' is not defined (no-undef)

4 Answers4