Several problems with icons during Chrome Extension development - google-chrome-extension

It's very strange.
1 problem
If I add this icon declaration to my manifest:
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
Then, when I add Extension through "Load unpacked extensions ... " it doesn't show logo
But if you try to delete it, it does show
AND! If I delete "48" line from manifect, it starts showing it right away. Maybe it's because I use Chrome Beta (Version 28.0.1500.20 beta) or maybe because I do something wrong.
Seconds problem
Is about icon on Web Store.
I have good 128x128 icon but for some reason in several places it doesn't used in HI-res.
Icon is the following:
But those looks very bad
Also on the last screenshot it puts my logo inside Puzzle icon. I saw many other plugins where it doesn't put it like this.
So I guess my question is following: What icon sized should I provide to have it looks nice in all places?

Close the chrome://extensions/ tab, and re-open it. This may fix the issue (I've experienced this bug a couple of times)
On the details page, only icons of apps are fully shown. All extensions are displayed within a puzzle in the Chrome Web Store.
If you want to get a different picture at the search results, upload a promotional image at the dashboard. See this answer for details.

Related

Toggle Chrome Extension Icon based on light or dark mode browser?

I've tried searching for this, and the closest related question that I could find was from 3+ years ago and had to do with the incognito window being dark, while a normal chrome window was light back then.
Now that we have the ability to have a light or dark mode browser, it's hard to find an icon design and color that looks good for both light and dark modes. Here's an example:
In the image above you can see that the first and third icons are black, so they are hard to see when using dark-mode. The middle icon (the one I'm using for my extension)looks great on dark mode, but terrible on light mode. See below:
So does anyone know if there is there a way to detect the browser mode (light or dark) and swap out the icon?
Thanks to wOxxOm I was able to figure this out.
First, I needed to create a content script (which I called toggleIcon.js) and add it to the manifist.json file.
Then I added the following to toggleIcon.js - which sends scheme: "dark" to my background.js file if window.matchMedia matches prefers-color-scheme: dark.
Then in my background.js file I listen for that message, and if request.scheme == "dark" I use chrome.broserAction.setIcon to change the paths for each of my icons to the dark version.
This effectively overrides my original icon paths as declared in the manifest.json file (as shown below).
The only downside I see is that this requires a content_script, which if you want your extension to work on any page, requires you to also add "matches": ["<all_urls>"] to your extension, which slows down the approval process. Which is why in my comments above I mentioned I had been avoiding using a content_script.
Also, I think it makes sense to use the version of your icons that work best on light-mode as your default, because I think the chrome extension page will pull from these for some of the icons they use (and that page has a white background). As an example, here's how my old icon looked (not enough contrast).
Hopefully this helps someone else!!

Hide "Quick Access" pushpin icons in Windows 10 navpane?

So, I'm trying to create a minimal navigation pane in Windows Explorer on Windows 10. Under the Quick Access menu, I have pinned some favorites and frequently accessed folders/shortcuts. I believe that it'd look neater -cleaner-, to not have the little gray push pins icons to the right of the pinned folders and shortcuts. I mean, hello, I pinned them, of course they're pinned, I know it. I guess I was hoping there was some regedit mod I could change right quick to hide all push pins in the navigation pane. Does anyone know of anything like that? Google doesn't seem to....
Hide Push Pins
I realize you asked this several months ago, but here's your answer. It's a bit hack-y and involves 3rd party software, but it works perfectly.
Download Customizer God
Create a transparent .png (assuming you have Photoshop/GIMP/Affinity Photo)
Convert the .png to .ico
Open Customizer God. Select "General Icons"
Find the Quick Access pin icon by scrolling down a bit.
Hit "Change" and select your .ico
The results:

Hide icon of extension with Chrome 49

It looks we can hide icon of extension for Chrome 48 and older. But after an update of Chrome to version 49 (dev channel), it displays my extension icon :(
I had neither "browser_action" nor "default_icon" in the manifest.json (witch is the tip for Chrome before version 49).
Any of you has the same issue ? How to get hidden the icon next to the address bar ?
This is a (brain-dead if you ask me) change by Chrome team.
Even if you don't have a browser_action, your extension will display an icon (or failing that, a tile with extension name's first letter). If you do not declare a browser_action, it will be greyed out and non-interactive, but will still be there.
The idea is to alert the user that some potentially stealthy extension is installed. As such, only the user is empowered to hide the icon, by right-clicking and selecting "Hide in Chrome Menu".
I'm 100% positive this will result in user confusion, but there's nothing you can do.

Safari 9 Not Showing SVG Pinned Tab Icon

I created a new pinned-tab icon for Safari 9 on El Capitan as documented by Apple here but I can't seem to get Safari to actually show it when I pin my tab.
Here's the line in my header:
<link rel="mask-icon" href="https://towatchlist.com/img/twl.svg" color="red">
Safari does show the image just fine when I follow the link to the SVG file, but the pinned tab icon still shows the auto-generated letter image even after reloads and pin/unpin etc.
I tried opening up GitHub's SVG (which is working) and copying the general markup there but that didn't fix things either. I also poked through the Safari console briefly but didn't see it even attempting to land the SVG file.
Any suggestions on how to even debug this or ideas on what is going wrong?
Looks like Safari is aggressively caching (even the absence of) these icons. Found the answer over on Super User:
Delete the contents of the following folder:
~/Library/Safari/Template Icons
And then restart Safari.

Chrome extansion "default_icon" strange orange background

I am trying to add button to extension like in tutorial here - https://developer.chrome.com/extensions/getstarted
"browser_action": {"default_icon": "icon.png" }
But the result is strange, icon has orange background, it became transparent only when hovered.
Icons from other extensions don't have this problem:
Icon itself is from tutorial
What can be wrong here?
It was in development mode, when I packed extension, the problem has gone.

Resources