How to change Chrome Extension icon in this page?
Here's my manifest code :
{
"manifest_version": 2,
"name": "Demo",
"description": "This is demo.",
"version": "1.0",
"browser_action": {
"default_icon": "icon128.png",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
]
}
The icon on toolbar is changed, but not on the chrome://extension page.
Set "icons" key in manifest.json.
The browser_action.icons key is what gets displayed in the toolbar (and will probably only use 16, 24, and 32 sized images, see browserAction).
The one displayed in chrome://extensions is a top level icons key. In the manifest documentation, look for the 6th entry, so that your manifest has an top-level entry, like:
{
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
It should be:
{
"manifest_version": 2,
"name": "Demo",
"description": "This is demo.",
"version": "1.0",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab", "storage"]
}
See: Chrome Extension Manifest Docs
Related
Setting up a Preact Chrome extension and getting a warning of Manifest: property 'icons' ignored, type array expected. Although manifest.json seems to be set correctly. Chrome extention warning.
manifest.json
{
"manifest_version": 3,
"name": "name",
"version": "1",
"action": {
"default_icon": {
"16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png",
"128": "assets/icons/icon128.png"
}
},
"description": "descr",
"icons": {
"16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png",
"128": "assets/icons/icon128.png"
},
"chrome_url_overrides": {
"newtab": "index.html"
},
"permissions": [
"activeTab",
"storage"
]
}
[!["manifest_version": 2,
"icons": {
"16": "/images/icon16.png",
"48": "/images/icon48.png",
"128": "/images/icon128.png"
},
"browser_action": {
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"default_popup": "/screens/popup.html"
},
"permissions": \["tabs", "storage", "webNavigation"\],
"content_scripts": \[
{
"js": \["popup.js", "websites.js"\],
"matches": \[
"<all_urls>"
\]
}
\],
"background": {
"scripts": \["background.js"\],
"persistent": false
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://stackpath.bootstrapcdn.com; object-src 'self';"
}
I don't know why my chrome extension icon isn't showing. I saved all the icons into the images folder hence the /images. it is giving me the blue puzzle piece in the middle Is there something wrong with my code?
This example is working on my browser. I don't know why your manifest json starts with [![. Maybe this is the problem. I'm not sure. Can you edit this example according to your json file?
{
"manifest_version": 2,
"name": "Test",
"description": "Test",
"version": "1.0",
"browser_action": {
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Try copy-pasting this into your manifest.json file. You have loads of artefacts that might cause issues, I also removed the default_icons key which isn't necessary in my opinion. Also removed the backslash / before the image folder-paths.
{
"name": "Some extension",
"manifest_version": 2,
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": {
"default_popup": "/screens/popup.html"
},
"permissions": ["tabs", "storage", "webNavigation"],
"content_scripts": [{
"js": ["popup.js", "websites.js"],
"matches": [
"<all_urls>"
]
}],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://stackpath.bootstrapcdn.com; object-src 'self';"
}
I had the same issues. I opened the png file(s) with paint and resaved them and it worked. So please verify your png files.
Hi I'm creating my first chrome extension here is my minifest file
{
"name": "Get pages source",
"version": "1.0",
"manifest_version": 2,
"description": "Get pages source from a popup",
"browser_action": {
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"default_popup": "popup.html"
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"permissions": ["tabs", "<all_urls>"]
}
I want to disable the extension for all urls other than few lets say I just want to enable my extension only for yahoo.com and stackoverflow.com what I need to do.
You should use matches in your manifest.
https://developer.chrome.com/extensions/content_scripts#declaratively
For example:
{
"name": "Get pages source",
"version": "1.0",
"manifest_version": 2,
"description": "Get pages source from a popup",
"browser_action": {
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"default_popup": "popup.html"
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"content_scripts": [
{
"matches": ["http://*.yahoo.com*", "http://*.stackoverflow.com*"]
}
],
"permissions": ["tabs", "<all_urls>"]
}
Btw. avoid all_urls permission if don't need it.
I've created a chrome-extension Reddit hide username. This extension hides your Reddit username when the button in popup.html is clicked.
I want to update it wherein if I visit Reddit, my extension will auto trigger and automatically do its job. How can I do that? Below here is my manifest.json and here's my Github repository
{
"name": "Reddit Hide Username",
"version": "1.0",
"description": "Hide your username in new Reddit UI!",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"options_page": "options.html",
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"manifest_version": 2
}
First of all, I apologize if the question has been already answered. But all solutions I checked are being taken care of on my part.
This is my manifest.json
{
"name": "extension name",
"short_name": "extension",
"description": "desc",
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"default_title": "title",
"default_popup": "popup.html"
},
"manifest_version": 2,
"update_url": "http://clients2.google.com/service/update2/crx",
"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'",
"version": "0.3.4"
}
The icons are all created using Photoshop CC and each size corresponds.
Any ideas what am I doing wrong?
TIA
The default_icon field specifies the icon for the browser action button only, not the icon for the entire extension.
To specify an icon for the extension as a whole, use the top-level icons manifest field:
{
"name": "extension name",
"short_name": "extension",
"description": "desc",
"icons": {
"48": "images/icon48.png"
},
...