Han Song
Han Song

Reputation: 11

How can I add multiple icons to a Chrome tab?

Example:

recording icon

Suddenly wondering while I've worked on make window recorder, I wish I could support that feature so that user can easily notice that they already started recording.

I've tried to find how to add additional icons to a Chrome tab, but most of the materials are dealing with adding the website's favicon image. Is that possible to insert an extra icon manually on chrome tab? If so, I want to know how to do it.

Just so you know guys, above screenshot, is coming from when I using loom chrome extension which can make a cool window recorder. My project is slightly different, but I want to know that kind of cool effect for UX so I really appreciate if someone knows about it.

Upvotes: 0

Views: 481

Answers (2)

Xan
Xan

Reputation: 77561

Unfortunately, no, there is no Chrome API that would allow an extension to do this.

In your example, as TOGD's answer suggests, the icon is shown automatically because the tab is given access to an audio/video stream.

wOxxOm's comment suggests the 2 things you can change with chrome.tabs API: override the favicon (you can even animate it that way) or override the tab's title.

Perhaps the closest approach is to overlay some sort of distinctive icon over the original favicon or animating the favicon to toggle between your icon and the original.

Mockup: mockup

Upvotes: 1

TOGD
TOGD

Reputation: 21

I am slightly confused by what you mean but I believe you are asking about the recording icon. If so, that automatically appears on the tab once the site open on that tab is given microphone access, camera access etc. although I believe you already know that. Instead of giving a direct answer (sorry about that) I suggest you just use some other type of indication which would be more obvious. Another reason for this is that when going into fullscreen (F11) it wouldn't show that the tab is recording. Sorry for not being of much help but hopefully you can make something of what I've said. I suggest something simple such as changing the background color (i.e. making it pulse by setting it to an RGBA value with a decreasing opacity over two seconds or so).

Upvotes: 0

Related Questions