1

I'm trying to use Chrome storage API to store access token after the user logs in the extension. However, when I try to use chrome.storage.local it throws error which says local was called on undefined.

I've added /* global chrome */ on the top of JS file in which I want to access the storage API. But the storage is still is not accessible.

As suggested in the documentation I've the storage permission added. Also, I've already tried multiple times to reload/reinstall the extension in chrome but the problem persists.

Following is my manifest file.

{
"manifest_version": 2,
"name": "My Extension",
"description": "This is My Extension",
"version": "1.0.0",
"homepage_url": "https://stylestash.dev",

"icons": {
"16": "ss-logo.png",
"48": "ss-logo.png",
"128": "ss-logo.png"
}, 

"browser_action": {
"default_icon": "ss-logo.png",
"default_title": "My Extension"
},


"background": {
"scripts": ["./jquery.js", "background.js"]
},
"content_scripts": [
{
  "matches": ["<all_urls>"],
  "all_frames": false,
  "js": ["./content.js", "./jquery.js"],
  "run_at": "document_end"
 }
],
 "permissions": ["storage", "tabs", "activeTab", "<all_urls>"],
 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
 "web_accessible_resources": ["index.html", "/static/*"]
}

Any help would be very appreciated. Thanks!

Osama Asif
  • 21
  • 3
  • You probably add your app using a `script` tag, in which case it runs in [page context](/a/9517879) where chrome.storage is undefined, which is what the error says. Instead, run your app inside an iframe, [example](https://stackoverflow.com/a/25100953) and [tutorial](https://itnext.io/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39). – wOxxOm Aug 06 '21 at 15:21
  • @wOxxOm I inject my extension inside the webpage. Hence it becomes a part of the weboage HTML document body. Do I have to inject my extension inside a iframe? – Osama Asif Aug 06 '21 at 17:19
  • Sounds like my assumption was correct then. – wOxxOm Aug 06 '21 at 17:22
  • @wOxxOm thanks for the comments! so my only option is to use an iframe instead of a div when injecting the extension inside the webpage? Only then will I be able to the Storage API? – Osama Asif Aug 06 '21 at 18:20
  • The only other methods: 1) use CustomEvent DOM messaging but it's not secure, 2) load react as a content script (I don't know how) instead of web_accessible_resources. – wOxxOm Aug 06 '21 at 18:46

0 Answers0