TIP: Replace "Community Settings" tab text with something sensible.

Kudos to luk for posting this hack in the comments section of the idea: Put the flipping Page Name in the HTML Title.

Today I'll show you how to turn this tab title text taradiddle:

into this:

Yes, we can have nice things... so long as we make them ourselves. 🔥😅   Steps:

1. Install the User Javascript & CSS Chrome extension
2. Configure:  URL pattern:  *community.[your_domain].com/t5/bizapps*
3. Configure:  ✓ JavaScript,  ✓ jQuery 3
4. Paste in the code below:

function emojiFavIcon(emoji){
    // create a new favicon element
	var favicon = document.createElement('canvas');
	favicon.height = 64;
	favicon.width = 64;
	
	// draw the emoji on the canvas
	var ctx = favicon.getContext('2d');
	ctx.font = '64px serif';
	ctx.fillText(emoji, 0, 52);
	
	// create a new link element for the favicon
	var newFavicon = document.createElement('link');
	newFavicon.rel = 'shortcut icon';
	newFavicon.type = 'image/x-icon';
	newFavicon.href = favicon.toDataURL('image/x-icon');
	
	// replace the old favicon with the new one
	var oldFavicon = document.querySelector('link[rel="shortcut icon"]');
	if (oldFavicon) {
	  document.head.removeChild(oldFavicon);
	}
	document.head.appendChild(newFavicon);	

}

if ( $('body').hasClass('BizAppsPage') ) {
	const parts = new Set();
	$('.lia-tabs-active:not(:first)').each(function() {
		parts.add($(this).text().trim());
	});
	
	// for SCSS  COMMON/xyz.scss
	$('.lia-studio-sass-editable .lia-tree-node-sass .lia-tree-action-root.lia-component-common-widget-link:has(+ul li.lia-list-tree-selected)').each(function() {
		let tex = $(this).text().trim();
		if (tex != "sass"){
			parts.add($(this).text().trim().substring(0, 4) + '/');
		}
	});

	// for SCSS  common/XYZ.SCSS
	$('.lia-studio-sass-editable .lia-tree-action-root.lia-component-common-widget-link+ul li.lia-list-tree-selected').each(function() {
		parts.add($(this).text().trim());
	});
			
	let nTT = [...parts].join(' - ');
	
	// Studio pages get a gear by default. 
	if (nTT.startsWith("Studio - ")) {
		emojiFavIcon("‌‌");
		nTT = nTT.replace('Studio - ','');
		
		// Style pages get a paint palette by default 
		if (nTT.startsWith("Community Style")) {
			emojiFavIcon("‌‌");
			nTT = nTT.replace('Community Style - ','');
			
			// clean up the CSS path bits
			nTT = nTT.replace('CSS - ','');
			nTT = nTT.replace('/ - ','/');
		}		
		
		if (nTT.startsWith("Text Editor")) {
			emojiFavIcon("‌‌");
			nTT = nTT.replace('Text Editor - ','');
		}
	}
	
	// Admin pages get a briefcase by default
	if (nTT.startsWith("Admin - ")) {
		emojiFavIcon("‌‌");
		nTT = nTT.replace('Admin - ','');
		nTT = nTT.replace('Display - ','');
	
		// to avoid removing "Content - " from "Custom Content - ""
		if (nTT.startsWith("Content - ")) {
			nTT = nTT.replace('Content - ','');
		}
		
		// red hair emoji reminds me of a Guess Who? character
		if (nTT.startsWith("Users - ")) {
			nTT = nTT.replace('Users - ','');
			emojiFavIcon("️‌‌‍🦰");
		}
		if (nTT.startsWith("Metrics")) {
			emojiFavIcon("‌‌");
			nTT = nTT.replace('Metrics - ','');
		}
	}	
	
	$('title').text(nTT);
}

The above code:

1. Replaces the fav-icon with
   • 💼Default for Admin
   • ⚙️Default for Studio
   • 👨‍ Users
   • 📈Metrics
   • 📝Text Editor
2. Replaces the tab text w/ helpful tab text.

Look, I'm not gonna say it's optimized (it's not), but it seems safe enough and it's been working for me without any hiccups.  Anecdotal win!

Here's what my settings look like:

Also, see luk's comments here for a slightly different way that checks for LITHIUM.jQuery.  For some reason didn't work for me but gave me the essence I needed to get rolling with the above code.

If you make any share-worthy improvements, leave them in the comments below!