I'm creating a chrome extension and bootstrapped the project using create-react-app.

General Problem:

I want to access chrome.storage api in my react app

Specific Issues:

I want to be able to use chrome.storage API in my react app to store some settings so I created a script in my src directory which tried calling chrome.storage.sync.set() and I got 'chrome' is not defined no-undef. I think this is because I need to include the script that makes this call in the manifest. The problem is that I can't include this script from src in my manifest because after create-react-app builds my project, src gets minified and the file structure is all changed.

The other problem is that create-react-app enforces that I import only from src but I need data from public, so I can't just make chrome API calls by importing functions from public. I know there is an eject feature on create-react-app but I want to maintain the build features that create-react-app gives me.

How can I maintain create-react-app's build feature while getting access to the chrome.storage API from my src directory?

I'm creating a chrome extension and bootstrapped the project using create-react-app.

General Problem:

I want to access chrome.storage api in my react app

Specific Issues:

I want to be able to use chrome.storage API in my react app to store some settings so I created a script in my src directory which tried calling chrome.storage.sync.set() and I got 'chrome' is not defined no-undef. I think this is because I need to include the script that makes this call in the manifest. The problem is that I can't include this script from src in my manifest because after create-react-app builds my project, src gets minified and the file structure is all changed.

The other problem is that create-react-app enforces that I import only from src but I need data from public, so I can't just make chrome API calls by importing functions from public. I know there is an eject feature on create-react-app but I want to maintain the build features that create-react-app gives me.

How can I maintain create-react-app's build feature while getting access to the chrome.storage API from my src directory?

• javascript
• google-chrome-extension
• create-react-app

1 Answer 1

That error ('chrome is not defined no-undef') looks like a linting error; the linter that es with create-react-app thinks that chrome is undefined because your code never defines it. Little does the linter know, for Chrome extensions, it's a global variable, so you don't have to define it.

Try adding /* global chrome */ to the top of the file(s) that use(s) the chrome variable.