CODEWITHSUNDEEP
javascriptgoogle-chrome-extensioncreate-react-app
Evan
Evan

Reputation: 242

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?

Upvotes: 3

Views: 3322

Answers (1)

Sidney
Sidney

Reputation: 4775

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.

Upvotes: 10

Related Questions