diff --git "a/\302\247 Blog/Posts/Posts - 2023/2307 - Renaming Browser Tab Names/\302\247 Renaming Browser Tab Names.md" "b/\302\247 Blog/Posts/Posts - 2023/2307 - Renaming Browser Tab Names/\302\247 Renaming Browser Tab Names.md"
new file mode 100644
index 0000000..56896a2
--- /dev/null
+++ "b/\302\247 Blog/Posts/Posts - 2023/2307 - Renaming Browser Tab Names/\302\247 Renaming Browser Tab Names.md"
@@ -0,0 +1,90 @@
+---
+date: '2023-07-21T20:31:59+0800'
+draft: false
+aliases:
+ - Renaming Browser Tab Names
+updated: 2023-07-21T20:35:03+08:00
+---
+
+# Renaming Browser Tab Names
+
+#javascript
+
+**Status**:: #x
+**Zettel**:: #zettel/permanent
+**Created**:: [[2023-07-21]]
+**URL**:: [blog.iany.me](https://blog.iany.me/2023/07/renaming-browser-tab-names/)
+
+Renaming browser tab names may seem like a simple task, but it can actually be quite challenging.
+
+
+
+Most browsers sync the tab name with the web page title. Therefore, it seems simple to set tab name by setting `document.title`:
+
+```javascript
+document.title = "Custom Tab Name";
+```
+
+However, many web pages use JavaScript to alter the page title, which would override the custom name. While [`Object.defineProperty`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) in JavaScript can override the property setter function, it's not possible to access the original setter function for `document.title`. Fortunately, browsers sync page titles with the first `
` tag, so setting its content acts as a workaround to set the page title.
+
+Here is the bookmark for renaming a tab. I also add `%t` as the token for the original page tab title. This is handy such as adding a custom prefix with `Work: %t`, or restoring the original title without reloading the page by using `%t`.
+
+```javascript
+// Rename the document title using a bookmarklet.
+//
+// As a user,
+// - Once I have renamed the tab, it should not be overwritten.
+// - I can include the token %t as placeholder for the real title.
+// - To restore, I can rename the tab to %t
+//
+// Install: Copy the code to
+//
+// https://caiorss.github.io/bookmarklet-maker/
+//
+// and generate the bookmarklet.
+
+// Init only once
+if (!("_renameTitle" in document)) {
+ // Force creating the title tag.
+ document.title = document.title || "";
+
+ const titleEl = document.getElementsByTagName("title")[0];
+ const titleTokenRegex = /%t/g;
+
+ // Remembers the real title
+ let titleWithoutRenaming = document.title;
+ // User set title
+ let titleWithRenaming = '';
+
+ // Rename the document title to v.
+ // If v contains the token %t, replace all occurences to the
+ // real title.
+ document._renameTitle = (v) => {
+ titleWithRenaming = v;
+ titleEl.innerText = v.replace(titleTokenRegex, titleWithoutRenaming);
+ };
+
+ Object.defineProperty(document, "title", {
+ // Other code will use document.title setter to change the title.
+ //
+ // Remember the new value as the real title but still use the
+ // title set by user.
+ set: (v) => {
+ titleWithoutRenaming = v;
+
+ // Once document has defined the title property, its value is
+ // not synchronized to the tab name.
+ //
+ // Here uses a workaround to set the title tag content.
+ titleEl.innerText = titleWithRenaming.replace(titleTokenRegex, v);
+ },
+ get: () => titleEl.innerText,
+ });
+}
+
+const title = prompt("Rename tab (Use token %t for original title)", document.title);
+// title is null when user cancel the dialog.
+if (title !== null) {
+ document._renameTitle(title);
+}
+```
\ No newline at end of file