Chrome storage API not accessible in React based chrome extension - reactjs

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!

Related

You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBlocking permission in your manifest

I try to develop my first chrome extension with react js. when I try to blocking a URL in the chrome extension using chrome.webRequest API In error page shows two errors.
'webRequestBlocking' requires manifest version of 2 or lower.
Unchecked runtime.lastError: You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBlocking permission in your manifest.
and I'm declaring the "webRequestBlocking" permission in the manifest file. here is my manifest.json
{
"manifest_version": 3,
"name": "Chrome Extension",
"description": "First Extension",
"options_page": "options.html",
"background": {
"service_worker": "background.bundle.js",
"matches": [
"<all_urls>"
]
},
"action": {
"default_title": "Open Extension",
"default_icon": "icon-34.png"
},
"icons": {
"128": "icon-128.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*",
"<all_urls>"
],
"js": [
"contentScript.bundle.js"
],
"css": [
"content.styles.css"
]
}
],
"devtools_page": "devtools.html",
"web_accessible_resources": [
{
"resources": [
"content.styles.css",
"icon-128.png",
"icon-34.png"
],
"matches": []
}
],
"permissions": [
"activeTab",
"tabs",
"webRequest",
"webRequestBlocking"
],
"host_permissions": [
"<all_urls>"
]
}
here is my background.js
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
console.log(details);
return {cancel: true};
},
{urls: ["https://reactjs.org/"]},
["blocking"]
);
and I have tried removing webRequestBlocking but also the same. can anyone help me is there a way to fix this?
the error explains it self 'webRequestBlocking' requires manifest version of 2 or lower. so you can't use webRequestBlocking in manifest version 3 .
but chrome is giving an alternative by using declarativeNetRequestWithHostAccess API witch is used to block or modify network requests by specifying declarative rules
you can check here for more details .
You can change manifest_version to 2 and webRequestBlocking to permissions.

How can i append react index.html file when i click a chrome extension

I want to make a chrome extension using react. The problem I face I can't load the index.html file that is inside the public directory. My goal is when I click my chrome extension then the index.html file append inside the existing web page
This is my manifest.json code :
{
"name": "Demo Exe",
"description": "The demo chrome extension",
"version": "1.0",
"manifest_version": 2,
"permission": ["active"],
"permissions": ["storage", "activeTab", "scripting"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["./index.js"]
}
]
}

Cannot Access WebExtension APIs

I have the following manifest.json:
{
"manifest_version": 2,
"name": "Application Name",
"version": "1.0",
"description": "blah blah blah",
"icons": {
"48": "icons/icon-48.png",
"96": "icons/icon-96.png"
},
"permissions": [
"activeTab",
"tabs",
"history",
"storage"
],
"browser_action": {
"default_icon": "icons/icon-32.png",
"default_title": "Title",
"default_popup": "popup/popup.html"
},
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": [
"content_scripts/script1.js",
"content_scripts/script2.js"
]
}]
}
I have access to the the storage API (browser.storage is defined) in my content scripts, but both the history and tabs APIs (browser.tabs and browser.history) are undefined. Am I missing something in the manifest to get access to these permissions?
One of the few WebExtensions APIs that is available for content scripts is browser.storage. Most WebExtensions APIs can only be accessed when using a background script. Using message passing you can still call those APIs (what you do is basically calling a function in the background script from within the content script). Please see the example on this page: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/sendMessage
See also Firefox WebExtention API: TypeError: browser.browserAction is undefined for a similar problem.

Eval() in chrome packaged app

I need to use eval in my chrome app. is there any way to do this? It just needs to process a mathematical expression input.
I have tried adding unsafe-eval to the manifest, but it gives me an error a loading the app. Here is the manifest.
{
"name": "Calculator",
"description": "A calculator for Chrome.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": {"128": "calculator-128.png"}
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
Read the Chrome documentation "Using eval in Chrome Extensions. Safely.". It answers this common question.

Getting geolocation to work on ZTE Open C

it seems I can't get geolocation to work in FFOS 1.3.0. The default shipped "Here Maps" does Work but my App does not even ask for the Permission.
The Code does work on my Notebook, here I'm asked for the Location which is then provieded. I Guess it's the fault of the manifest file though I don't know what exactly is the Problem.
{
"version": "1.0",
"name": "Example",
"description": "Example",
"launch_path": "/index.html",
"icons": {
"16": "/images/icon_016.png",
"32": "/images/icon_032.png",
"48": "/images/icon_048.png",
"128": "/images/icon_128.png"
},
"developer": {
"name": "Example",
"url": "http://www.example.de"
},
"default_locale": "de",
"type": "privileged",
"permissions": {
"geolocation": {
"description": "Used to locate me"
}
}
}
Any help would be appriciated :)
I found the error. It seems to be needed to add
"installs_allowed_from": [
"*"
],
to the manifest file. My app does no ask for the permission and displays the location. Thank you all for your help :)

Resources