Chrome Extension - Manifest V3
I am trying to build a simple chrome extension and am getting stuck on a particular error.
Uncaught (in promise) Error: Cannot access a "chrome://" URL
I found a way to counter the error, but it does not solve the problem itself.
I understood that when I use my extension, it works on "chrome://..." which I see when I inspect the extension, but can not figure out how to change that (if that even needs changing)
My code:
manifest.json
{
"version": "0.1.0",
"manifest_version": 3,
"name": "Super cool name",
"description" : "A super cool intro",
"author": "you wouldn't know him",
"permissions": ["storage", "activeTab", "scripting", "tabs"],
"host_permissions": ["tabs", "notifications", "http://*/*", "https://*/*"],
"background": {
"service_worker": "background.mjs",
"type": "module"
},
"action": {
"default_icon": {...},
"default_popup": "popup.html"
},
"icons": {...},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["contentScripts.mjs"]
}]
}
background.mjs
chrome.tabs.onUpdated.addListener((tabId, tab) => {
if (tab.url?.startsWith("chrome://")) return undefined;
if (tab.active && changeInfo.status === "complete") {
chrome.scripting.executeScript({
target: {tabId: tabId},
files: ['contentScripts.mjs']
Any tips? Thank you for your time!
Related
When I send a message from content to background, I am getting this error in the content script log (chrome console log):
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
In the service worker log, nothing is being logged when I send message fronm content. Below are my backgroundScript, contentScript, and my manifest.json. I am using manifest v3.
backgroundScript.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log('request: ', request);
});
contentScript.js
chrome.runtime.sendMessage({ greeting: 'hello' });
manifest.json
{
"manifest_version": 3,
"name": "Chrome Extension with React & Webpack",
"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"
},
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"icons": {
"128": "icon-128.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
"js": ["contentScript.bundle.js"],
"css": ["content.styles.css"]
}
],
"host_permissions": ["http://*/"],
"devtools_page": "devtools.html",
"web_accessible_resources": [
{
"resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
"matches": []
}
]
}
I have used "<all_urls>" for permissions.
But, I am getting this error. "Cannot access contents of the page. Extension manifest must request permission to access the respective host."
chrome.tabs.create({ url: 'chrome-extension://padekgcemlokbadohgkifijomclgjgif/options.html#!/profile/proxy' }, function(tab) {
chrome.tabs.executeScript(tab.id, { file: 'js/content.js' });
});
manifest.json
{
"manifest_version": 2,
"version": "1.0.0",
"name": "Gmail Automation",
"description": "Automation",
"permissions": [
"storage",
"notifications",
"<all_urls>"
],
"icons": {
"16": "resources/img/16.png",
"32": "resources/img/32.png",
"48": "resources/img/48.png",
"64": "resources/img/64.png"
},
"web_accessible_resources": ["js/content.js"],
"background": {
"persistent": false,
"scripts": [
"/js/background.js"
]
}
}
If this is not possible. Then please suggest me other ways to do. My goal is to change or modify options in other existing extensions.
I simpley want to get the extension fired if the action on 'onBeforeNavigate' happens. But for no reason the extension always trows this error:
Cannot read property 'onBeforeNavigate' of undefined
Error is on this line chrome.webNavigation.onBeforeNavigate.addListener(setProxy);
Here is my code so far:
popup.js
function setProxy(details){
console.log("Got fired!\n");
}
chrome.webNavigation.onBeforeNavigate.addListener(setProxy);
manifest.json
{
"manifest_version": 2,
"name": "Proxy Changer",
"description": "This extension Changes the Proxy settings every time you load a website",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"activeTab",
"webRequest",
"notifications",
"debugger",
"background",
"management",
"https://ajax.googleapis.com/",
"<all_urls>",
"webRequestBlocking"
],
"background": {
"scripts": ["popup.js"],
"persistent": true,
"js": ["jQuery.js", "popup.js"]
}
}
I hate to say that I am very new to the Google Chrome Extension API but for me the Extension API is not working... I don't know what I am doing wrong..
I already watched to videos but still same error...
I would appreciate your help. Thank you and kind regards!
just add "webNavigation" permission to Manifest.json
{
"name": "My extension",
...
"permissions": [
"webNavigation"
],
...
}
see documentation
https://developer.chrome.com/docs/extensions/reference/webNavigation/#event-onCreatedNavigationTarget
EDIT
My chrome extension calling an api service in the background.js file and i can get the data. But after closing the browser window, i cant get the data from the api service in background.js file. It showing null value. When go to the chrome://extensions/ and reload the extension I can get the data.
When close the browser window, the data fetched is being reset and when open the browser, data not fetching. Data can be fetched from the api only after reloading the extension.
Why happening so. Does any one have an idea about this?
This is my manifest.json file
{
"manifest_version": 2,
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"name": "Test",
"short_name": "Test",
"description": "Test",
"version": "3.0.0",
"background": {
"scripts": [
"build/background-bundle.js"
]
},
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"cookies",
"storage",
"activeTab",
"http://*/",
"https://*/"
],
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": [
"build/content-bundle.js"
],
"run_at": "document_end"
}],
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"content_security_policy": "script-src 'self' https://www.google-analytics.com/analytics.js https://api.algorithmia.com/v1/algo/algo://nlp/SummarizeURL/0.1.1; object-src 'self'"
}
You can't reload the background file based on anything other than reopening the browser or reloading the extension manually. What you should instead do is have a content script tell background.js to run getTaxonomyList again when the user log in happens.
background.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.userLoggedIn) {
getTaxonomyList().done(function(list) {
sendResponse(list);
});
}
})
I have an extension that i'm trying to add content scrips alongside background scripts but it just says invalid when trying to temp load.
{
"description": "Creates tasks and calculates application incomplete date",
"manifest_version": 2,
"name": "Task Creator",
"version": "1.31",
"permissions": [
"http://*/*", "tabs", "https://*/*",
],
"icons": {
"48": "icons/page-48.png"
},
"web_accessible_resources": [
"style/popUpStyle.css",
"script/popUpTask.js",
"script/logicTaskFiller.js",
"js/autosize.js",
"style/jquery-ui.css",
"js/jquery-1.12.4.js",
"js/jquery-ui.js"
],
"content_scripts":{
"matches": ["*urlhere.com*"],
"js": ["comSendForm.js"]
},
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
}
}
I'm not quite sure where i'm messing up. It works instantly after I take out the content scripts, but I'm doing multiple things with this extension and I really do need the content scripts to run on a certain page. Any help is appreciated.
error message
1477430058898 addons.webextension. ERROR Loading extension 'null': Reading manifest: Error processing content_scripts: Expected array instead of {"matches":["*://url.com/"],"js":["comSendForm.js"]}
The error that you are getting is that your manifest.json has the value of the content_scripts key as an Object. The value of the content_scripts key needs to be an Array of Objects, not just an Object.
In addition, you have the following problems:
The line:
"http://*/*", "tabs", "https://*/*",
should not have the trailing ,. This is actually reported as the first error, so you may have copied the contents of your manifest.json file inaccurately.
Your matches pattern is invalid. You probably wanted something like:
"matches": ["*://*.urlhere.com/"],
With all of those changes your manifest.json would look like:
{
"description": "Creates tasks and calculates application incomplete date",
"manifest_version": 2,
"name": "Task Creator",
"version": "1.31",
"permissions": [
"http://*/*", "tabs", "https://*/*"
],
"icons": {
"48": "icons/page-48.png"
},
"web_accessible_resources": [
"style/popUpStyle.css",
"script/popUpTask.js",
"script/logicTaskFiller.js",
"js/autosize.js",
"style/jquery-ui.css",
"js/jquery-1.12.4.js",
"js/jquery-ui.js"
],
"content_scripts": [
{
"matches": ["*://*.urlhere.com/"],
"js": ["comSendForm.js"]
}
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icons/page-32.png"
}
}