Possible to change extension button color for browser?

[Bolongna]

The transparent square with A works fine on some backgrounds, however on dark backgrounds it vanishes. Would it be possible to have it be a selectable color?

[hucario]

I'll look into it. From the top of my head: I've seen extensions with notification icons before, so there must be some way of changing the icon. However, generation of said icon for different colors I'm not certain about. We'll see. Worst case, I could generate a rainbow of icons and have you choose granularly between red, orange, yellow, etc

[pvrs12]

It should be possible with https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setIcon

I agree with the concern about what color(s) to offer. One easy possibility is just bundle a dark and light option.

It may also be worth considering a full icon redesign. The one in use is still the one from forever ago

On Thu, Dec 2, 2021, 7:35 PM hucario @.***> wrote:

I'll look into it. From the top of my head: I've seen extensions with notification icons before, so there must be some way of changing the icon. However, generation of said icon for different colors I'm not certain about. We'll see.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/pvrs12/Anesidora/issues/100#issuecomment-985114423, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABVCK4KVRNOQ6ZWSR6FB2LDUPAGFNANCNFSM5JFD5ILQ .

[Bolongna]

The current one blends in very well if you use a dark theme, I'm playing with Win 11 on this machine and the current icon pinned to the bar in dark mode is barely visible. Something like a light blue or yellow would let it show up on the dark gray color. No real rush or anything. Thanks for all the work you are already doing. By the way Anesidora works well on the edge browser if installed in developer mode.

[hucario]

Something like a light blue or yellow would let it show up on the dark gray color.

Mildly amusingly enough, the version of Anesidora I'm running does have a yellow icon, as that's how you tell whether you're running the debug or production version:

debug icon

normal icon

[Bolongna]

That color would work on the dark background, but it would reverse the problem on my chrome install as that is using a wood theme and it would vanish there.

[hucario]

Alright, I figure the best course to go here would be to convert the damn icon to a SVG so it can be manipulated that way, then converted to a blob and set as the icon.

[Bolongna]

No rush. Not even needed if it's a lot of trouble. I haven't written any code in many years, and even then it was in hex, These days I'm happier just clicking the mouse...

[hucario]

Alright, got a functional test image working:

var canvas = document.createElement('canvas'); // Create the canvas
var size = 150;
canvas.width = size;
canvas.height = size;

var context = canvas.getContext('2d');
var img = new Image();
img.addEventListener('load', () => {
    context.drawImage(img, 0, 0, size, size);
    setTimeout(() => {
        chrome.browserAction.setIcon({
            imageData: context.getImageData(0, 0, size, size)
        });
    }, 100);
});
img.crossOrigin = true;
img.src = "https://upload.wikimedia.org/wikipedia/commons/1/1a/SVG_example_markup_grid.svg";

[hucario]

Update: Since the logo was very simple to reproduce with canvas I just... did it. Like 10 lines of code. Also, turns out you can update the icon very quickly so congratulations here's a rainbow icon

https://user-images.githubusercontent.com/50851047/145139831-9196cecf-70ef-45eb-9790-62408ccd0bdd.mp4

And the code for it:

function draw() {
    let hue = window.hue ?? 0;

    if (hue > 359) {
        hue = 0;
    } else {
        hue++;
    }
    window.hue = hue; 

    const can = document.createElement("canvas");
    const ctx = can.getContext('2d');

    can.width = 150;
    can.height = 150;

    const grad = ctx.createLinearGradient(0, 0, can.width, can.height);
    grad.addColorStop(0, `hsl(${hue}deg 100% 60%)`);
    grad.addColorStop(1, `hsl(${hue}deg 100% 30%)`);

    ctx.lineWidth = can.width / 7;

    ctx.strokeStyle = grad;
    ctx.fillStyle = "transparent"
    ctx.strokeRect(0, 0, can.width, can.height)

    ctx.fillStyle = grad;
    ctx.strokeStyle = "transparent";

    ctx.font = (can.width * 0.9) + 'px serif';

    const meas = ctx.measureText("A");

    ctx.fillText("A", (can.width / 2) - (meas.width / 2), (can.height / 2) - (
        meas.actualBoundingBoxDescent - meas.actualBoundingBoxAscent
    ) / 2)

    chrome.browserAction.setIcon({
        imageData: ctx.getImageData(0, 0, can.width, can.height)
    });
    setTimeout(draw, 0);
}
draw();

I could absolutely make this faster by reusing the canvas and context, I was just trying to get it to work rather than go for speed