Hover bottom-right to reveal a toggle. ON: links open in background tabs; Alt=current tab; Shift=foreground tab. State persists per page (origin+pathname).
// ==UserScript==
// @name One-Button Toggle: Open Links in Background Tabs (Per-Page + Modifiers, Bottom-Right)
// @namespace phillipfierro.toggle-bg-tabs.page
// @version 1.3
// @description Hover bottom-right to reveal a toggle. ON: links open in background tabs; Alt=current tab; Shift=foreground tab. State persists per page (origin+pathname).
// @author You
// @match http*://*/*
// @grant GM_openInTab
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @run-at document-start
// @noframes
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// --- Key granularity for per-page persistence ---
const INCLUDE_QUERY = false;
const INCLUDE_HASH = false;
const STORAGE_PREFIX = 'toggleBgTabs:page:';
function normalizePathname(pathname) {
let p = pathname.replace(/\/index\.[a-z0-9]+$/i, '/');
p = p.replace(/\/+$/, '/') || '/';
return p;
}
function currentPageKey() {
const u = new URL(location.href);
let key = u.origin + normalizePathname(u.pathname);
if (INCLUDE_QUERY && u.search) key += u.search;
if (INCLUDE_HASH && u.hash) key += u.hash;
return key;
}
// --- State (per-page) ---
let pageKey = currentPageKey();
let enabled = !!GM_getValue(STORAGE_PREFIX + pageKey, false);
// --- UI: hover-to-reveal corner button (BOTTOM-RIGHT) ---
const styles = `
.bgTabsToggle-wrap {
position: fixed; bottom: 8px; right: 8px;
z-index: 2147483647; pointer-events: none;
}
.bgTabsToggle-hotspot {
position: fixed; bottom: 0; right: 0; width: 64px; height: 64px;
z-index: 2147483646; pointer-events: auto; background: transparent;
}
.bgTabsToggle-btn {
pointer-events: auto; opacity: 0; transform: translateY(6px);
transition: opacity 120ms ease, transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
padding: 6px 10px; border-radius: 999px; border: 1px solid; cursor: pointer; user-select: none;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.bgTabsToggle-hotspot:hover ~ .bgTabsToggle-wrap .bgTabsToggle-btn,
.bgTabsToggle-wrap:hover .bgTabsToggle-btn { opacity: 1; transform: translateY(0); }
.bgTabsToggle-btn.off { background: #ffefef; color: #a40000; border-color: #ff8a8a; }
.bgTabsToggle-btn.off:hover { background: #ffd9d9; }
.bgTabsToggle-btn.on { background: #eefbee; color: #0a6b00; border-color: #85e485; }
.bgTabsToggle-btn.on:hover { background: #d9f8d9; }
`;
if (typeof GM_addStyle === 'function') GM_addStyle(styles);
else {
const st = document.createElement('style');
st.textContent = styles;
document.documentElement.appendChild(st);
}
const hotspot = document.createElement('div');
hotspot.className = 'bgTabsToggle-hotspot';
const wrap = document.createElement('div');
wrap.className = 'bgTabsToggle-wrap';
const btn = document.createElement('button');
btn.className = 'bgTabsToggle-btn';
updateButton();
btn.addEventListener('click', () => {
enabled = !enabled;
GM_setValue(STORAGE_PREFIX + pageKey, enabled);
updateButton();
});
document.documentElement.appendChild(hotspot);
document.documentElement.appendChild(wrap);
wrap.appendChild(btn);
function updateButton() {
if (enabled) {
btn.classList.remove('off'); btn.classList.add('on');
btn.textContent = 'BG Tabs: ON';
btn.title = 'Click to turn OFF (per this page). Modifiers: Alt=current tab, Shift=foreground tab.';
} else {
btn.classList.remove('on'); btn.classList.add('off');
btn.textContent = 'BG Tabs: OFF';
btn.title = 'Click to turn ON (per this page)';
}
}
// --- Core behavior: intercept clicks when enabled ---
document.addEventListener('click', function (e) {
if (!enabled) return;
if (e.defaultPrevented) return;
// Ignore clicks on our UI
if (wrap.contains(e.target) || hotspot.contains(e.target)) return;
const b = 'button' in e ? e.button : 0;
if (b !== 0 && b !== 1) return; // left or middle only
const anchor = findAnchor(e.target);
if (!anchor) return;
const href = anchor.getAttribute('href');
if (!href || href.startsWith('#') || href.startsWith('javascript:')) return;
const url = resolveUrl(anchor, href);
// Modifiers only apply when toggle is ON
if (e.altKey) {
e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
navigateSameTab(url);
return;
}
if (e.shiftKey) {
e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
openInTab(url, /*active*/ true);
return;
}
// Default ON behavior: open in background tab
e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
openInTab(url, /*active*/ false);
}, true); // capture
function findAnchor(node) {
let el = node;
while (el && el !== document && el !== document.documentElement) {
if (el.tagName === 'A' && el.href) return el;
el = el.parentNode;
}
return null;
}
function resolveUrl(anchor, href) {
try { return new URL(href, anchor.baseURI || document.baseURI).toString(); }
catch { return href; }
}
function navigateSameTab(url) {
location.assign(url);
}
function openInTab(url, active) {
try {
GM_openInTab(url, { active, insert: true, setParent: true });
} catch (_) {
try { GM_openInTab(url, !active ? true : false); } // legacy boolean: true=background
catch { window.open(url, '_blank', 'noopener,noreferrer'); }
}
}
// --- SPA awareness: update per-page state on URL changes ---
hookLocationChanges(() => {
const newKey = currentPageKey();
if (newKey !== pageKey) {
pageKey = newKey;
enabled = !!GM_getValue(STORAGE_PREFIX + pageKey, false);
updateButton();
}
});
function hookLocationChanges(onChange) {
const origPush = history.pushState;
const origReplace = history.replaceState;
function fire() { window.dispatchEvent(new Event('locationchange')); }
history.pushState = function () { const r = origPush.apply(this, arguments); fire(); return r; };
history.replaceState = function () { const r = origReplace.apply(this, arguments); fire(); return r; };
window.addEventListener('popstate', fire);
window.addEventListener('hashchange', fire);
window.addEventListener('locationchange', onChange);
}
})();