While fetching a files contents with the following code in a background.js file:
function readFile(filename) {
let response = fetch(`file:///${filename}`);
console.log(response);
}
I get the following error:
Security Error: Content at moz-extension://86d386b7-2904-441f-8dbe-47f0af9b6bfb/_generated_background_page.html may not load or link to file:///C:/Users/rando/Downloads/jest-26.6.1.zip.
TypeError: NetworkError when attempting to fetch resource.
My manifest file looks like this:
"permissions": [
"webNavigation",
"webRequest",
"webRequestBlocking",
"cookies",
"tabs",
"http://*/*",
"https://*/*",
"ws://*/*",
"wss://*/*",
"storage",
"downloads",
"sessions",
"file://*/*"
],
"background": {
"scripts": [
"app/scripts/background.js"
],
"persistent": true
},
How do I solve this error and fetch the contents of the file using the background.js file?
Extension access to local file system file:/// has been blocked since Firefox 57 for security reasons.
Extensions can use the input type="file" to launch the file picker on user-click.
Extensions also can:
read files that are packed within the extension
communicate with a software on the local computer via Native messaging
get files via HTTP/s, if the localhost has a server running
Related
I'm building a Chrome Extension that needs to detect DOM events (click, mouseover, etc.) on any tab the user switches to or opens during a recording session. The way that seems most appropriate to do this is using the scripting API to inject a script that set's the appropriate event listeners and can post messages back to the chrome.runtime API to collect data.
However, I'm unable to inject the content Script successfully. My project is a Vue3 + Vite + Manifest V3 Chrome Extension, and in my background.js on the appropriate chrome.tabs listeners I'm executing:
chrome.scripting.executeScript({
target: { tabId },
files: ['src/content_scripts/events.js']
});
The documentation clearly states that a relative path from the directory root is required. However, no matter how I structure that path, it says the file isn't found.
The exact error I'm receiving is:
Uncaught (in promise) Error: Could not load file: 'src/content_scripts/events.js'.
Also, my manifest.js file is:
{
"manifest_version": 3,
"name": "walkthrough.ai capturer",
"version": "1.0.0",
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128x128.png"
},
"permissions": [
"desktopCapture",
"tabCapture",
"scripting",
"activeTab",
"tabs"
],
"host_permissions": ["https://*/*", "http://*/*"],
"action": {
"default_icon": {
"16": "icons/icon16.png",
"32": "icons/icon32.png"
},
"default_title": "Open Options"
},
"background": {
"service_worker": "src/background/index.js",
"type": "module"
}
}
Any ideas on what could be happening?
Thank you
How about using
chrome.runtime.getURL('where content script is from you are calling this API')
instead of moving the content script file to public folder?
That way I get my file path correctly after building the project.
After doing some more digging on #wOxxOm 's suggestion, I was able to figure it out.
The content script wasn't showing up in the build folder, which is where the scripting API was looking for it to be a relative import from.
In order to solve the issue, I put the content script in my /public folder so that it gets placed in the /dist folder when the project is built.
This worked for now. Thank you!
I'm in the process of updating my chrome extension from manifest v2 to v3.
Here's the old manifest:
Manifest V2:
{
"manifest_version": 2,
"name": "Legacy Search Assistant",
"version": "0.1.1",
"content_scripts": [
{
"matches": [
"https://*.legacysite.io/*","*://*/api*"
],
"js": ["jquery-3.6.0.min.js","content.js"]
}
],
"options_page": "options.html",
"background": {
"scripts": ["jsencrypt.min.js", "jquery-3.6.0.min.js", "background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Legacy Search"
},
"permissions": [
"storage"
]
}
Since jsencrypt.min.js was already loaded in the manifest I was able to call it's functions in background.js, but now that I've gone to manifest v3 I am having problems getting the service worker to access this library.
For example, when I make this call in background.js:
importScripts("/scripts/jsencrypt.min.js");
It throws the following error:
Error handling response: Error: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'chrome-extension://<extension ID>/scripts/jsencrypt.min.js' failed to load.
If I click the link in the error it takes me directly to the library I want loaded.
I've already tried all of the fixes in this answer. Please help if you can.
importScripts() is old way to load scripts in workers.
Now we can use more modern, ES modules instead.
Starting from Chrome 91, we can use JavaScript modules in service workers.
Just set type property to module in the manifest.
{
"manifest_version": 3,
"background": {
"service_worker": "background.js",
"type": "module"
}
This loads the service worker as an ES module, which lets you use the import keyword in the service worker to import other modules. Ex-
// background.js
import * as module from './scripts/jsencrypt.min.js';
But make sure that the script you are importing like ./scripts/jsencrypt.min.js in this case, has exported the required code that you want to use.
Learn about ES modules
The solution I ended up using was to move all usage of jsencrypt to the content.js. This allowed the module to function correctly and will not expose the public key in the environment we use our chrome extension in.
After creation and initializing of the jsencrypt object I pass it to the background script via a message.
recently I came across an error during trying to get JQuery to my chrome extension. I wrote following code and then when I try to reload my extension in Chrome browser I get the message:
Failed to load extension
Error
Could not load javascript 'jquery.js' for content script.
Could not load manifest.
The file of jquery was downloaded from their webpage (compressed production 3.5.1).
I checked several webpages connected to this problem but I couldn't find the solution.
Files in which inserting JQuery matters are below:
manifest.json
https://ideone.com/EGKlfQ
"manifest_version": 2,
"name" : "name",
"version": "1.0",
"offline_enabled": true,
"content_scripts": [
{
"matches": [
"https://www.zalando-lounge.pl/*"
],
"js": ["jquery.js","content.js"]
}
],
"background" : {
"scripts": ["background.js"]
},
"browser_action":{
"default_icon": "img/icon.png",
"default_popup": "popup.html",
"default_title": "A popup will come here"
},
"permissions": ["tabs","storage"],
"content_security_policy": "script-src 'self' https://cdnjs.cloudflare.com/; object-src 'self'"
popup.html
https://ideone.com/exMgYq
<script type="text/javascript" src="jquery.js"></script>
...other code in this file doesn't matter in this case...
I tried using chorome.identity to auth my app but it seems NWJS can not load login page that provided by chrome at chrome://chrome-signin/?access_point=6&reason=0.
I have my package.json just like this:
"permissions": ["tabs", "identity", "storage", "https://www.googleapis.com/*",
"https://*.googleusercontent.com/*",
"https://ssl.gstatic.com/",
"https://www.googleapis.com/",
"https://accounts.google.com/",
"chrome://chrome-signin/?access_point=6&reason=0"],
"oauth2": {
"client_id": "xxxxxx.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/drive"
]
},
"key": "MIIBIjANBxxxxxxx"
and this is my code:
chrome.identity.getAuthToken({'interactive': true}, function (token) {
if (chrome.runtime.lastError) {
console.log(chrome.runtime.lastError);
return;
}
console.log('Tokennya adalah', token);
});
is there any wrong code I've written?
Mostly your oauth2 client_id does not match the package id of your extension. When generating oauth2 token for chrome app, it will ask for your app's web store id after you upload the initial app with the manifest. Check if it is the same as that of your extension loaded to the chrome for development. If not, give the local extension instead of the web store id. And use that client_id in your manifest for development. Later on change it to the webstore url id to publish.
And there is no need for "chrome://chrome-signin/?access_point=6&reason=0" url under permissions.
I'm working on a Chrome extension that works with the Aviary API. I need to add the Aviary Javascript to the extension. Here's what my manifest looks like:
"content_scripts": [ {
"js": ["http://feather.aviary.com/js/feather.js", "jquery-1.7.2.min.js", "chosen/chosen.jquery.js", "main.js" ],
"css": [ "assets/css/style.css" ],
}],
"permissions": [
"http://feather.aviary.com*",
"tabs",
"cookies"
]
But it keeps throwing the error "Could not load javascript 'http://feather.aviary.com/js/feather.js' for content script." . Am I doing anything wrong? I've been searching around but haven't found the solution.
You should set permission example
"permissions": [
"http://*feather.aviary.com*", "webRequest",
"tabs"
]