This is my first attempt writing a Chrome extension. I added "web_accessible_resources": ["images/icon.png"] to manifest.json because I wanted to access the image from content script. After adding this line, I got the error "Invalid value for 'web_accessible_resources[0]'.
Could not load manifest." I have checked to make sure the file path is correct, where else could I be wrong?
Any help is appreciated.
{
"name": "Bookmark Checker",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"bookmarks",
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches":["https://www.google.com/search?*"],
"js": ["content/content.js"]
}
],
...
"web_accessible_resources": ["images/icon.png"]
}
The syntax for web_accessible_resources in Manifest V3 has changed:
"web_accessible_resources": [{
"resources": ["/images/icon.png"],
"matches": ["<all_urls>"]
}]
The matches key must specify where to expose these resources since Chrome 89.
Related
I'm trying to build a Chrome Extension for my work that will help me with day-to-day work. Without getting into specifics I'm seeing that it's running on all pages that I load except for company pages. It's also not running on Google.com (which could be an indicator for the former issue).
Note - I tested and it run on Stackoverflow, IMDB, many more, but not Google.com.
I'm wondering is there something wrong with my manifest.json file or perhaps Google and other sites have some tough restrictions for outside JS.
Manifest.json
{
"name": "Screenshot Expander (Alpha)",
"version": "1.0.0",
"description": "Preview screenshots directly in the same page",
"manifest_version": 3,
"author": "Josh Gallant",
"action":{
"default_popup": "index.html",
"default_title": "Screenshot Expander"
},
"content_scripts" : [{
"js" : ["screenshot123.js"],
"matches" : ["*://*/*"],
"run_at": "document_end"
}],
"host_permissions": [
"<all_urls>"
],
"permissions": [
"tabs",
"scripting",
"activeTab"
],
"web_accessible_resources": [
{
"resources": [ "screenshot123.js" ],
"matches": [ "https://*/*" ]
}
]
}
screenshot123.js
function main(){
console.log('hello there');
}
window.onload = main;
Main question - Why is the above code working on most sites, but not google.com?
Any help is appreciated.
Thanks!
I have an extension I've developed for Chrome (and Firefox, down the road), but can't get it to work when downloaded from the App Store. I think the problem is the permissions.
It's simple: the extension looks for particular text on a page (say: "dog") and highlights it. Just a simple HTML swap.
The .crx file includes the manifest and the javascript which does the replacement (and works locally). This is packaged with the icon and another version of the manifest (unless I'm doing something wrong here?) and submitted to the store. I tried various permissions (like "activetab") but it didn't work.
The three files are:
manifest.json (sits outside .crx)
{
"name": "[name]",
"version": "[version]",
"description": "[description]",
"manifest_version": 2,
"icons": {
"128": "icon_128.png"
},
"permissions": ["activeTab"],
"content_scripts":
[
{
"matches": ["<all_urls>"],
"all_frames": true,
"js": ["script.js"],
"run_at": "document_end"
}
]
}
manifest.json (sits inside the .crx)
{
"name": "[name]",
"version": "[version]",
"description": "[description]",
"manifest_version": 2,
"author": "[author]",
"permissions": ["activeTab"],
"content_scripts":
[
{
"matches": ["<all_urls>"],
"all_frames": true,
"js": ["script.js"],
"run_at": "document_end"
}
]
}
script.js (sits inside the .crx)
Runs the actual search and replace. Runs without issue locally.
What am I doing wrong? Pulling out my hair.
When developing my extension and testing it by loading unpacked extension I am able to get the correct path.
For example the following code points to one of my images and loads correctly.
theIcon.src = chrome.runtime.getUrl(goatPath); // "chrome-extension://extensionID/img/myImage.png
I have the above code running in both a popup page and content script.
However when I upload to the Chrome Web Store and publish the packed version, I'm unable to access the resource because it is trying to look for it at
chrome-extension://extensionID/chrome-extension://extensionID/img/myImage.png
Popup page error
Failed to load resource: net::ERR_FILE_NOT_FOUND
Content Script error
Denying load of chrome-extension://kjohofijdcbjeanfinadbebghfegbhop/chrome-extension://kjohofijdcbjeanfinadbebghfegbhop/img/myimage.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Manifest File -
{
"manifest_version": 2,
"name": "Feed the Goat",
"description": "Feed the Goat provides a fun way for you to stay focused so you can get more done.",
"version": "1.5",
"icons": { "16": "img/goat-icon16.png",
"32": "img/goat-icon32.png",
"128": "img/goat-icon128.png" },
"background": {
"scripts": ["event/background.js"]
},
"browser_action": {
"default_icon": "img/goat-icon.png",
"default_popup": "popup/authentication/authentication.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content/content.js"]
}
],
"web_accessible_resources": [
"img/goat-icon128.png",
"img/goat-icon256.png",
"img/GarytheGoat-icon128.png",
"img/GarytheGoat-icon256.png",
"img/BillyBuck-icon128.png",
"img/BillyBuck-icon256.png",
"img/UncleUnicorn-icon128.png",
"img/UncleUnicorn-icon256.png"
],
"content_security_policy":"script-src 'self' https://cdnjs.cloudflare.com/ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com https://use.fontawesome.com; object-src 'self'",
"permissions": [
"tabs",
"activeTab",
"<all_urls>",
"identity",
"idle",
"notifications",
"storage"
],
}
Thanks
In your manifest.json try to add following:
"web_accessible_resources": [
"img/*"
]
Also, make sure that in your dist(build) folder there is img folder with images.
"goatPath" should be img/myImage.png
and funnction should have all upper-case for URL like this
chrome.runtime.getURL(goatPath)
I am working with a chrome extension . I want to inject js script in all tab. I am using this manifest.json :
{
"name": "ABC",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"src/background/background.min.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icons/128.png",
"default_title": "ABC",
"default_popup": "src/browser_action/index.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"<all_urls>"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["./src/inject/inject.min.js"],
"css": ["./css/inject.min.css"],
"all_frames": true
}]
}
And my inject.js is like this :
(function() {
console.log("Hello");
});
I am getting all log from all tab except the tab of the chrome setting (eg : chrome://extensions/:id , chrome://history etc).
Am I missing something in manifest.json or chrome disables the feature of injection in settings page ?
Thanks in advance.
Indeed, you can't inject code into chrome:// pages. They contain control elements / code that can modify the browser in ways that an extension is not allowed to.
Chrome resolves this by simply not allowing permissions to be set for chrome:// URLs, and <all_urls> does not include it.
However, you could use Override Pages to replace some of them (well, History page at least) completely.
Content scripts usually list the exact URL or a blanket acceptance of certain types of URl's Example below is for every webpage. I want the "matches" to be a data set.
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html "
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
],
"content_scripts": [
{
"matches": ["*://*/*"]
}
]
You can list the urls you want to use as an array:
"content_scripts": [
{
"matches": [
"http://www.google.com/*",
"http://stackoverflow.com/*"
]
}
]