Evan Evan - 1 month ago 15
Javascript Question

Using chrome storage API with create-react-app build

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?

Answer Source

That error ('chrome is not defined no-undef') looks like a linting error; the linter that comes 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.