Version 3.0
• Incorporated @FamousM1 change for displaying the @ChannelName.
• The manifest.json is now compatible for use as an extension with Firefox Developer Edition in addition to Google Chrome.
• There's a new Channel Collaboration format for a video where the channel won't just show as one channel name but will show as "Channel 1 and Channel 2". Added compatibility to show those channel names in the title as well where previously it would not work.
• The way Channel Collaboration videos work do not support pulling the @ChannelName from the link since with these, it opens an overlay window showing both channels and the links do not use the @ChannelName styles. I was able to pull the primary @ChannelName from the video description instead.
• Expanded the features so on Channel pages it will also show the @ChannelName and additionally will show which current tab you are on. Ex: Home, Videos, Shorts, Podcasts, Playlists, Posts, Store and it will add " - Search" when viewing channel search results.
• Searching Youtube will also just display the Searched text and adds " - Search".
• Expanded the features to viewing a Playlist page, adding the Channel Name and @ChannelName.
• Expanded the features to viewing a video contained in a Playlist, adding the current videos's Channel Name and @ChannelName along with the playlist name and the playist owner's Channel Name and @ChannelName.
Here's version 3
`manifest.json`:
{
"name": "YouTube Channel Name",
"version": "3.0",
"description": "Display YouTube Channel Name",
"manifest_version": 3,
"browser_specific_settings": {
"gecko": {
"id": "YouTubeChannelName@display"
}
},
"content_scripts": [ {
"matches": ["https://www.youtube.com/*"],
"js": ["displayChannelName.js"]
} ]
}
displayChannelName.js:
console.log("displayChannelName started");
let currTitle = "";
window.SameCount = 0;
function updateTitle(node) {
if (window.location.href.indexOf("/watch?v=") > -1) {
if (document.title != currTitle) {
if (node == undefined) {
channelName = (function () { return; })();
node = document.getElementById("above-the-fold");
};
updateTitletimeout = setTimeout(function () { // wait a little in case title changes before the node reloads
videoTitle = document.title;
videoTitle = videoTitle.replace(' - YouTube','');
if(node) {
channelA = node.querySelector('#channel-name #text a');
channelB = node.querySelector('#owner #attributed-channel-name a');
channelCollab = node.querySelector('#description-inner ytd-video-description-infocards-section-renderer a#header');
var channelName = "";
if(channelA) {
var channelNameA = channelA.innerHTML;
var channelUrlA = channelA.href.split('/').pop();
}
if(channelNameA == null) {
if(channelB){
var channelNameB = channelB.innerHTML;
var channelUrlB = channelCollab.href.split('/').pop();
const channelNameBcleantemp = channelNameB.replace(/<span[^>]*>.*?<\/span>/g, "");
const channelNameBclean = channelNameBcleantemp.replace(/<\/span>/g, "");
channelName = channelNameBclean;
channelUrl = " (" + channelUrlB + ")";
}
} else {
channelName = channelNameA;
channelUrl = " (" + channelUrlA + ")";
}
if (window.location.href.indexOf("list") > -1) {
node = document.getElementById("playlist");
var playlist = node.querySelector('#publisher-container yt-formatted-string.publisher > a');
var playlistName = node.querySelector('#header-description h3:nth-child(1) yt-formatted-string.title > a');
if(playlistName) {
var inplaylistName = playlistName.innerHTML;
}
if(playlist) {
var playlistchannelName = playlist.innerHTML;
var playlistchannelUrl = playlist.href.split('/').pop();
}
channelUrl = " - " + inplaylistName + " - " + playlistchannelName + " (" + playlistchannelUrl + ")";
}
if (channelName != "") {
if(channelName) {
if (videoTitle.indexOf(" - " + channelName + channelUrl) === -1) {
videoTitle += " - " + channelName + channelUrl;
console.log('displayChannelName - channelName = ' + channelName + channelUrl);
console.log("displayChannelName - updateTitle - " + document.title + " -> " + videoTitle);
window.SameCount = 0;
}
}
}
document.title = videoTitle;
currTitle = document.title;
}
currTitle = document.title;
}, 500);
} else {
window.SameCount = window.SameCount + 1;
if (window.SameCount >= 1) {
console.log("displayChannelName stopped");
clearTimeout(updateTitletimeout);
} else {
console.log("displayChannelName Title Same - " + window.SameCount);
}
}
}
if (window.location.href.indexOf("@") > -1 || window.location.href.indexOf("channel") > -1 ) {
if (document.title != currTitle) {
if (node == undefined) {
channelName = (function () { return; })();
node = document.getElementById("page-manager");
};
updateTitletimeout = setTimeout(function () { // wait a little in case title changes before the node reloads
videoTitle = document.title;
videoTitle = videoTitle.replace(' - YouTube','');
channelID = node.querySelector('#page-header div.yt-page-header-view-model__page-header-headline > div > yt-content-metadata-view-model > div:nth-of-type(1) > span > span');
channelTab = node.querySelector('#tabsContainer div.yt-tab-shape__tab--tab-selected');
var channelUrlID = "";
var channelTabName = "";
if (window.location.href.indexOf("search") > -1) {
channelTabName = "Search";
}
if(channelID) {
channelUrlID = channelID.innerHTML;
}
if(channelTab) {
channelTabName = channelTab.innerHTML;
}
console.log('displayChannelName - channelName = ' + videoTitle);
if (channelUrlID != "") {
if (videoTitle.indexOf(" - " + channelTabName + " (" + channelUrlID + ")") === -1) {
videoTitle += " - " + channelTabName + " (" + channelUrlID + ")";
console.log('displayChannelName - channelTab = '+ channelTabName);
console.log('displayChannelName - channelUrl = '+ channelUrlID);
console.log("displayChannelName - updateTitle - " + document.title + " -> " + videoTitle);
window.SameCount = 0;
}
}
document.title = videoTitle;
currTitle = document.title;
}, 500);
} else {
window.SameCount = window.SameCount + 1;
if (window.SameCount >= 1) {
console.log("displayChannelName stopped");
clearTimeout(updateTitletimeout);
} else {
console.log("displayChannelName Title Same - " + window.SameCount);
}
}
}
if (window.location.href.indexOf("playlist") > -1) {
if (document.title != currTitle) {
if (node == undefined) {
channelName = (function () { return; })();
node = document.getElementById("page-manager");
};
updateTitletimeout = setTimeout(function () { // wait a little in case title changes before the node reloads
videoTitle = document.title;
videoTitle = videoTitle.replace(' - YouTube','');
if(node) {
channelPlay = node.querySelector('div.yt-page-header-view-model__scroll-container > div > div.yt-page-header-view-model__page-header-headline > div > yt-content-metadata-view-model > div:nth-of-type(1) > yt-avatar-stack-view-model > span > span > a');
var channelPlayName = "";
if(channelPlay) {
var channelPlayName = channelPlay.innerHTML;
channelPlayName = channelPlayName.replace('by ','');
var channelPlayUrl = channelPlay.href.split('/').pop();
}
channelName = channelPlayName;
channelUrl = channelPlayUrl;
if (channelName != "") {
if(channelName) {
if (videoTitle.indexOf(" - " + channelName + " (" + channelUrl + ")") === -1) {
videoTitle += " - " + channelName + " (" + channelUrl + ")";
console.log('displayChannelName - channelName = ' + channelName);
console.log('displayChannelName - channelUrl = '+ channelUrl);
console.log("displayChannelName - updateTitle - " + document.title + " -> " + videoTitle);
window.SameCount = 0;
}
}
}
document.title = videoTitle;
currTitle = document.title;
}
currTitle = document.title;
}, 500);
} else {
window.SameCount = window.SameCount + 1;
if (window.SameCount >= 1) {
console.log("displayChannelName stopped");
clearTimeout(updateTitletimeout);
} else {
console.log("displayChannelName Title Same - " + window.SameCount);
}
}
}
if (window.location.href.indexOf("search_query") > -1) {
if (document.title != currTitle) {
updateTitletimeout = setTimeout(function () { // wait a little in case title changes before the node reloads
videoTitle = document.title;
videoTitle = videoTitle.replace(' - YouTube','');
videoTitle += " - Search";
console.log("displayChannelName - updateTitle - " + document.title + " -> " + videoTitle);
window.SameCount = 0;
document.title = videoTitle;
currTitle = document.title;
}, 500);
} else {
window.SameCount = window.SameCount + 1;
if (window.SameCount >= 1) {
console.log("displayChannelName stopped");
clearTimeout(updateTitletimeout);
} else {
console.log("displayChannelName Title Same - " + window.SameCount);
}
}
}
};
function waitForTitleElement() {
return new Promise(resolve => {
if (document.querySelector('title')) {
return resolve(document.querySelector('title'));
}
const observer = new MutationObserver(mutations => {
if (document.querySelector('title')) {
observer.disconnect();
resolve(document.querySelector('title'));
}
});
observer.observe(document.body, { childList: true, subtree: true });
});
}
if (window.location.href.indexOf("youtube.com") > -1) {
waitForTitleElement().then((titleElement) => {
console.log("displayChannelName Title is ready:", titleElement);
new MutationObserver(function (mutations) {
updateTitle(undefined);
}).observe(
document.querySelector('title'),
{ subtree: true, characterData: true, childList: true }
);
});
}