Close current tab via red sidebar click

[TS6ix2GaH3q679h5]

This is a userscript inspired by a Chrome extension I liked called close_tab(s)

That extension closes the current tab when you click on a floating red bar that gets revealed when hovering the mouse at the edge of the screen. This is nice faster way to browse pages and quickly close them using just a mouse, without having to hunt for that tiny little X in the tab bar to click on.

This userscript is more simple: it paints a small dark red bar along the left edge of each page. Click anywhere in it to close the tab. It adjusts for proper sizing to have minimal impact on the page content but there may be some pages/sites where it just plain doesn’t work well, so I add those as exclusions.

This makes use of the GM.closeTab permission that Userscripts supports, which makes it a little different from a userscript that could work in Tampermonkey on Chrome or etc. So for that reason I’m pasting it here.

I’m sure there are various modifications that could be made to this, but this is a simple version that has been working for me for a few years now. If anyone else can find it useful I’d be happy.

// ==UserScript==
// @name        Close tab by side click
// @version     8.0
// @description Should close tabs when red sidebar is clicked
// @exclude     https://docs.google.com/*
// @noframes
// @match       https://*/*
// @match       http://*/*
// @grant       GM.closeTab
// @grant       GM_addStyle
// @inject-into content
// ==/UserScript==

if (window.self === window.top) {
	console.log("CTBSC Script started");

	var style = document.createElement("style");
	console.log("CTBSC Style element created");

	style.innerHTML = `
html {
	border-left: solid 20px #590A0A !important;
	box-sizing: border-box;
}

body {
	padding-left: 1px;
	box-sizing: border-box;
}
`;

	console.log("CTBSC Style added to element");

	document.head.appendChild(style);

	console.log("CTBSC Style appended to head");

	document.addEventListener("click", function (event) {
		console.log("CTBSC Click event listener added");

		// Check for left click button
		if (event.button !== 0) {
			console.log("CTBSC Not left click");
			return;
		}

		// Check for event.target is an element

		if (!event.target || event.target.nodeType !== 1) {
			console.log("CTBSC Not clicked on element");
			// Not a click on an element
			return;
		}
		// check tolerance of actual mouse position

		const margin = 5;

		if (Math.abs(event.pageX) < margin) {
			console.log("CTBSC Click within margin");
			// Not a real mouse click
			return;
		}

		// this is the thing that will actually close it now, plus some various exceptions

		if (
			event.pageX < 20 &&
			!window.location.href.includes("safari-web-extension") &&
			!(
				event.target.tagName.toLowerCase() === "a" &&
				event.target.getAttribute("target") === "_blank"
			) &&
			!document.querySelector("input[type=password]")
		) {
			console.log("CTBSC Closing tab");

			GM.closeTab();
		}
	});
}

[ACTCD]

Click anywhere in it to close the tab.
This makes use of the GM.closeTab permission that Userscripts supports

If you just want to close the current tab, why not just use window.close()?

Also, I edited the post a little for you to make it easier to read.

[TS6ix2GaH3q679h5]

why not just use window.close()?

That wouldn’t work on tabs that had been opened in the background. This exact issue was actually addressed by you guys in #310 for which I am still grateful!

[ACTCD]

Ah, yes, I vaguely remember that I’ve read it, but I can’t recall it at the moment, thank you!