Open Youtube video in new tab on touch screen laptops


I recently started watching more youtube on a touchscreen laptop then the tablet I had (an iPad that was really really slow) and found out it ran a lot better on the laptop and the keyboard could be folded så it didn't take up a lot of space.

However, switching to the laptop I wanted to open videos from the frontpage in a new tab instead of going back and forth in the history and because right-clicking was a bit finicky on the video. I couldn't find an specific extension for chrome that did the trick , but I already used greasemonkey/tampermonkey so I wrote a quick script instead that adds a tab button above each video and opens that video in a new tab.

You'll need the tampermonkey extension, which is a extension that lets you run user generated javascript to extend the functionality restricted to a particular site. Then add a new script and paste the following and save it. This should then add a button above each video. It should keep track of when youtube uses dark mode and when more video are loaded when scrolling.

 

// ==UserScript==
// @name Youtube Video Open As Tab
// @namespace http://www.exaviore.dk/
// @version 0.2
// @description a simple script to add open in new tab on video, which is usefull if you're using a touchscreen laptop
// @author pi
// @include https://www.youtube.com/*

// @grant none
// ==/UserScript==

(function() {
'use strict';

var darkmode = document.querySelector("html").getAttribute("dark");
var container = document.querySelector("#contents");
var playlist = document.querySelector("#items");

function addTabs(){
document.querySelectorAll("ytd-rich-grid-video-renderer:not(.tabbed)").forEach(function(e){
var d = document.createElement("div");
d.innerHTML = " + ";
d.style.width = "40px";
d.style.height = "30px";
d.style.borderRadius = "10px 10px 0 0";
d.style.marginLeft = "auto";
d.style.textAlign = "center";
d.style.fontSize = "2em";
d.style.fontWeight = "bold";
//check for darkmode on youtube
if(darkmode == "true"){
d.style.backgroundColor = "rgba(255,255,255,.1)";
d.style.color = "rgba(255,255,255,.2)";
}else{
d.style.backgroundColor = "rgba(0,0,0,.1)";
d.style.color = "rgba(0,0,0,1)";
}
d.onclick=function(){ window.open(e.querySelector("a").getAttribute("href"), "_blank");}
e.prepend(d);
e.classList.add("tabbed");
});
}
function playlistTabs(){
document.querySelectorAll("ytd-compact-video-renderer:not(.tabbed)").forEach(function(e){
var d = document.createElement("div");
d.innerHTML = " + ";
d.style.width = "30px";
d.style.height = "40px";
d.style.borderRadius = "10px 0px 0px 10px";
d.style.marginLeft = "auto";
d.style.textAlign = "center";
d.style.fontSize = "2em";
d.style.fontWeight = "bold";
d.style.boxSizing = "border-box";
d.style.paddingTop = "7px";
d.style.cursor = "pointer";
//check for darkmode on youtube
if(darkmode == "true"){
d.style.backgroundColor = "rgba(255,255,255,.1)";
d.style.color = "rgba(255,255,255,.2)";
}else{
d.style.backgroundColor = "rgba(0,0,0,.1)";
d.style.color = "rgba(0,0,0,1)";
}
d.onclick=function(){ window.open(e.querySelector("a").getAttribute("href"), "_blank");}
e.prepend(d);
e.classList.add("tabbed");
});
}

addTabs(); setTimeout(function(){
playlistTabs();
},4000);

//chrome 64 supported, so tabs will be applied when youtube lazy loads more
new ResizeObserver(addTabs).observe(container);
new ResizeObserver(playlistTabs).observe(playlist);
})();