Chrome extension icon not appearing - json

[!["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.

Related

Enable chrome extention for hosts only

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.

Chrome extension auto enable

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
}

Chrome extension: Options menu is disabled

I have created a new chrome extension and installed it in developers mode.It is working fine in my laptop. But in some other laptops, the options button is disabled. Please help.
I am unable to share the full code but this is how the manifest.json file looks like:
{
"name": "Asana Actual vs Estimation",
"version": "0.0.1",
"manifest_version": 2,
"description": "Add tags to task if the actual hours exceeds the estimated value",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"content_scripts": [{
"matches": ["<all_urls>"],
"all_frames": true,
"js": ["js/jquery/jquery.js","js/content.js"],
"css": ["css/styles.css"]
}],
"options_page":"options.html",
"permissions": [
"activeTab",
"<all_urls>",
"storage"
],
"content_security_policy": "script-src 'self' https://www.gstatic.com/; object-src 'self'",
"browser_action": {
"default_icon": "icons/icon16.png"
}
}
Thank you!
Its working. This line was not there
"options_page":"options.html"
in manifest.json. Adding that line solved the problem.

Chrome Extension Icon Manifest

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

Chrome saying that manifest.json is not in utf8

I'm sure that it is I tried with/without BOM and I still get this error :
{
"manifest_version": 2,
"default_locale": "en",
"name": "__MSG_ext_name__",
"description": "__MSG_ext_description__",
"version": "1.6.0",
"icons": {
"16": "icon_16.png",
"48": "icon_48.png",
"128": "icon_128.png"
},
"browser_action": {
"default_icon": "icon_19.png",
"default_popup": "popup.html"
},
"background": {
"page": "background.html"
},
"options_page": "options.html",
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"scripts/content.js"
],
"run_at": "document_start",
"all_frames": true
}
]
}
I used a program to mass convert all my files in UTF-8, now it works, I think as 方 觉 said, the problem was coming from another file than the manifest.