How to Change Web Page Titles Easily


There are times that I need to open many web pages of some specific websites within a browser, and there are so many tabs that I can't efficiently access one of them, as their favicons are all the same.

So I tried to find a way to rename their titles, preferably in a lightweight way, so that I can spot them quickly with my eyes.

The first thought came into my mind was to find some browser extensions to do the job. It was easy to install one with no time. But I was not very happy with the experience. It seems that it keeps the rule of renaming titles based on the URL so that the title will always be renamed if I refreshing it, which is not what I want. I'd rather want to do it in an ad-hoc way.

Then I thought maybe I can simply do it with a bookmarklet, nevertheless, it's just a simple JavaScript statement of document.title = "nice-title".

With that in my mind, it didn't take me much time to write this bookmarklet:

javascript:
(function ()
 {
     var title = window.prompt("Enter new title: ", "");
     if (title)
     {
         document.title= title;
     }
 })()

Save it as a browser bookmark, click it when you want to rename a tab:

/img/shadow.png
The Bookmarklet Pop-up UI
/img/2021-07-11-set-title-bookmarklet.png
The Bookmarklet Pop-up UI

See also

comments powered by Disqus