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"]
}
]
}
Related
I am creating a chrome extension. It injects a chat to the page of the user choice.
It works on all websites I checked but does not on a specific one.
I have a component called , when I click the button to inject the chat in the Popup.html it sends console.log to the page, from that component, but the component is not being rendered for some reason.
That's the page https://p.priority-connect.online/webui/P3A3E/
I tried to render it on another websites and it worked well.
Created console.log inside the component and received result inside the website console but not a rendered component.
that's my manifest file
{
"manifest_version": 3,
"name": "WhatsApp Chat",
"description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
"options_page": "options.html",
"background": {
"service_worker": "background.bundle.js"
},
"action": {
"default_popup": "popup.html",
"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",
"assets/img/*"
],
"matches": [
"<all_urls>"
]
}
]
}
I'm currently developing a wallet extension using ReactJS w/bootstrap, I'm trying to build the extension and test it on google chrome, but nothing is rendering.
I thought It might be because I'm using bootstrap and I must add some plugins or script in manifest.json. But I don't have any idea how to.
This is my manifest.json:
{
"manifest_version": 3,
"name": "Wallet",
"author": "whxy",
"version": "1.0.1",
"description": "E-Wallet",
"action":{
"default_title": "E-Wallet",
"default_popup": "index.html",
"default_icon":{
"16":"logo192.png",
"128":"logo192.png"
}
},
"permissions": ["storage"]
}
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!
I'm using the Firefox WebExtensions API with the following background script
var log = console.log.bind(console)
log('hello world from browser extension')
// https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/webRequest/onCompleted
var filter = { urls: '<all_urls>' }
var extraInfoSpec = ['tlsInfo', 'responseHeaders']
browser.webRequest.onCompleted.addListener(function(details){
log(`Woo got a request, here's the details!`, details)
}, filter, extraInfoSpec)
log('Added listener')
After loading the script from about:debugging, I see the following output in DevTools:
hello world from browser extension
I do not see any output- there is no data from browser.webRequest.onCompleted.addListener and there is no 'Added listener' message.
How do I make browser.webRequest.onCompleted work?
For completeness, my manifest.json is below:
{
"manifest_version": 2,
"name": "Test extension",
"version": "1.0",
"description": "Test extension.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"permissions": [
"webRequest",
"webRequestBlocking"
]
}
The webRequest API is only available to background scripts. You seem to using it inside a content script.
urls in var filter = { urls: '<all_urls>' } needs to be be an array ['<all_urls>'].
'tlsInfo' in extraInfoSpec doesn't exist, I don't know where it comes from.
You need to specify an additional <all_urls> permission in your manifest.
script.js
var filter = { urls: ['<all_urls>'] }
var extraInfoSpec = ['responseHeaders']
browser.webRequest.onCompleted.addListener(function(details){
console.log(`Woo got a request, here's the details!`, details)
}, filter, extraInfoSpec)
console.log('Added listener')
manifest.json
{
"manifest_version": 2,
"name": "Test extension",
"version": "1.0",
"description": "Test extension.",
"icons": {
"48": "icons/border-48.png"
},
"background": {
"scripts": ["script.js"]
},
"permissions": [
"webRequest",
"webRequestBlocking",
"<all_urls>"
]
}
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.