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.
Related
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!!
I have on Linux/KDE a installed version of eclipse Mars.2. But there are strong problems with colors. So there is no different between a activated toolbar button and a inactive toolbar button. At example the "Link with editor" button of the "Project Explorer" view has exactly the same background color if the button is selected or not:
Another thing is that I cannot see if a checkbox or radio button is selected or not. It seems that the foreground color for the check/radio box selections is also identical to the background color. So there is in many configuration views no way to find out what's currently selected and wath's not. In the next screenshot at least one of the "Open mode" radio button must be selected (I assume it's "Double click" button):
Note also that the colors are only in eclipse wrong. In other (native) KDE applications I don't have these effects (at example the foreground of check boxes/radio buttons are black - like I have it expected). Also play around with the color settings in KDE "Application Appearance" has no effects ...
How can I change the colors of these stuff?
There is an Eclipse plugin that helps you import downloaded themes from the online marketplace (themes are free).
This is where you can find it: http://eclipsecolorthemes.org/
You may choose whatever eclipse theme fits your needs!
Good luch!
Ok. Found the solution for my problem on following site:
http://www.jroller.com/andyl/entry/mars_on_linux
Mars is the first eclipse version which uses GTK3 (instead of GTK2 like eclipse versions before 4.5). And on the side above Andrey Loskutov wrotes that may be also the GTK theme (widget style) can be also the problem. The Widget style "oxygen-gtk" should be extremly buggy! After changing the widget style (to now "Adwaida") the problems are gone :-)
You can change the Widget style in KDE by opening in the KDE settings: "Application Appearance" and "GTK+ Appearance".
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.
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.
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.