Add the marker to the tab

[denikryt]

I've found this extension useful in case when there is a need to flag the web page as "I was here".
In this case it will be awesome to have a feature to place a "marker" on the tab. It will be handy especially in navigation between tabs in TST (TreeStyleTabs). It's also a great combination with the import\export feature of your extension.

As not of many other extensions this one has the great feature of export saved data as a file. It's very handy and useful in the case of storing and sharing information. And it's the opportunity to work with that file in personal scripts, which is +1 to freedom. I'm using TST in combination with Tab Session Manager (that has an import\export feature) and sharing my TreeTabs between different machines. There are some extensions that can rename the title of a tab, in my case, to add a kind of "flag" on it, but it's useful on one machine only, because they don't have an import\export feature. Also it seems not reliable to add this feature on those, cause the developers are not active for a long time.

So in general, you are a hero for making a useful instrument for a community. And in my workflow, my suggested feature will turn your extension useful twice. Thank you for your work.

[XjSv]

This sounds like a good feature. I did not even think about it until now that you mentioned it.
I'm trying to scope out a rough draft of how feature would work and some questions come to mind.

1. What kind of flag should be put on the tab? Since were changing the HTML title maybe a colored circle that matches the color selected for the ribbon? Something that looks similar to the bullet point here:

• #f03c15
• #c5f015
• #1589F0

2. The Colored Circle should be prepended to the beginning of the title because some titles can be very long and putting it at the end might not be seen all the time.
3. I have a concern about pages that update the title frequently. For example Gmail updates the title when new mail is detected. For example when there are no new emails the title is: "Inbox - user@gmail.com - Gmail" but when there is new mail it updates to "Inbox (1) - user@gmail.com - Gmail". With this in mind I have to see how different pages behave and come up with some way to listen for changes to the title and apply the prepend each time it changes.

Let me know if you have any suggestions.

[denikryt]

Thanks for your reply!
I think Colored Circles is the most appropriate solution.
Unfortunately, I've never dived into the WebExtension API, so I can't help you in a technical way.
I've come across comments of renaming title extensions and it seems that dynamically changing titles is a common issue for them.
Here is a comment from one of those (Rename Tab Title):

Hey, I might've found a solution for dynamically updated titles. The following code listens for changes of the 'document.title' object and allows you to execute code when it changes.

new MutationObserver(function(mutations) {
console.log(mutations);
// overwrite the title here
}).observe(
document.querySelector('title'),
{
subtree: true,
characterData: true,
childList: true
}
);

Also, there was an issues with titles while manipulating tabs in TST:

5. Drag-and-drop reordering tabs using Tree Style Tab's sidebar sometimes unsets the customized tab title. (eg. I experienced it on a tab containing my GOG.com friends list, which only has "GOG.com" as its title.)

There might be some problems with other extensions that add symbols to the tabs, for example Auto Tab Discard, which I'm using too. It adds and hides the (💤) emoji at the beginning of the tab's title.

Hope this will be useful for you.

[XjSv]

After spending a couple of hours trying to figure out how to do the impossible I went in another direction. Instead of manipulating the webpage's title I decided it was much easier to do it with the favicon. There are multiple issues with the title attribute method. Here are some that I ran into:

1. Cannot include images or HTML and it cannot be styled using CSS.
2. If an bullet symbol was used, then it makes it impossible to change the color. Since the browser handles the title rendering in the browsers tab.

The favicon method not only avoids any issues that I was worried about earlier but it also avoids the issues above and it looks much better.

Sample:

Before I create a public build and release this I also need to make an option for it for those people that might want it turned off.

[denikryt]

Yes, it's a good way to use favicon, looks nice!
I'm waiting for the build, I'll be your first tester :)