// ==UserScript==
// @name Google Search Classic Navbar
// @version 0.1.0-beta
// @author yakisova41
// @license MIT
// @namespace https://yakisova.com
// @description Restore the garbage UX nav bar.
// @match https://www.google.com/search*
// @match https://www.google.co.jp/search*
// @grant unsafeWindow
// @run-at document-start
// @name:ja Google検索の上のメニューを元に戻す
// @description:ja Google検索の上のメニューがキモくなったので、従来のデザインに無理やり戻します。
// @downloadURL none
// ==/UserScript==
// src/classes/NavBarItems.ts
var NavBarItems = class {
parentElement;
tbmList = {
all: "All",
isch: "Images",
vid: "Videos",
nws: "News",
shop: "Shop"
};
thisTbm = "all";
items = [];
itemContainerClassName = "navbar-item-container";
itemIconOuterClassName = "navbar-item-icon-outer";
setTbm(tbm) {
this.thisTbm = tbm;
}
setParentElement(elem) {
if (elem !== void 0 && elem !== null) {
this.parentElement = elem;
this.parentElement.classList.add("navbar-parent");
}
}
render() {
this.items.forEach(({ type, itemElem, matchTbm, activeElem }) => {
if (type === "match-active" && matchTbm === this.thisTbm && activeElem !== void 0) {
this.parentElement.appendChild(activeElem);
}
if (type === "match-active" && matchTbm !== this.thisTbm) {
this.parentElement.appendChild(itemElem);
}
if (type === "item") {
this.parentElement.appendChild(itemElem);
}
});
}
appendItem(itemElem) {
this.items.push({
type: "item",
itemElem
});
}
appendTbmActiveItem(matchTbm, itemElem, activeElem) {
this.items.push({
type: "match-active",
matchTbm,
itemElem,
activeElem
});
}
createItemElem(text, iconElem, isLink = false, href = "") {
const itemContainer = document.createElement("div");
itemContainer.className = this.itemContainerClassName;
if (isLink) {
const linkElem = document.createElement("a");
linkElem.href = href;
const iconOuter = document.createElement("span");
iconOuter.appendChild(iconElem);
iconOuter.className = this.itemIconOuterClassName;
linkElem.appendChild(iconOuter);
linkElem.innerHTML = linkElem.innerHTML + text;
itemContainer.appendChild(linkElem);
itemContainer.classList.add("navbar-link-item");
} else {
const iconOuter = document.createElement("span");
iconOuter.className = this.itemIconOuterClassName;
iconOuter.appendChild(iconElem);
itemContainer.appendChild(iconOuter);
itemContainer.innerHTML = itemContainer.innerHTML + text;
itemContainer.classList.add("navbar-now-item");
}
return itemContainer;
}
};
// src/classes/Search.ts
var Search = class {
search;
constructor(search) {
this.search = search;
}
parse() {
const searches = {};
this.search.split("&").forEach((v) => {
const sp = v.split("=");
const key = sp[0].replace("?", "");
searches[key] = sp[1];
});
return searches;
}
decord(searches) {
let searchResult = "?";
Object.keys(searches).forEach((key) => {
searchResult = searchResult + `${key}=${searches[key]}&`;
});
searchResult.slice(0, -1);
return searchResult;
}
getURL() {
const url = new URL(location.href);
url.search = this.search;
return url.toString();
}
reload() {
const url = new URL(location.href);
url.search = this.search;
location.href = url.toString();
}
append(key, val) {
const parsed = this.parse();
parsed[key] = val;
this.search = this.decord(parsed);
}
delete(key) {
const parsed = this.parse();
delete parsed[key];
this.search = this.decord(parsed);
}
get(key) {
const parsed = this.parse();
return parsed[key];
}
};
// src/classes/StyleIncject.ts
var StyleInject = class {
tbm;
styles = {};
setTbm(tbm) {
this.tbm = tbm;
}
inject() {
const elem = document.createElement("style");
if (this.styles[this.tbm] !== void 0) {
elem.innerHTML = this.styles[this.tbm].join("");
}
if (this.styles["*"] !== void 0) {
elem.innerHTML = elem.innerHTML + this.styles["*"].join("");
}
document.head.appendChild(elem);
}
addStyle(tbms, style) {
tbms.forEach((tbm) => {
if (this.styles[tbm] === void 0) {
this.styles[tbm] = [];
}
this.styles[tbm].push(style.replaceAll(" ", "").replaceAll("\n", ""));
});
}
injectOnLoad(tbms, callback) {
document.addEventListener("DOMContentLoaded", () => {
let isInject = false;
tbms.forEach((tbm) => {
if (tbm === "*") {
isInject = true;
}
if (tbm === this.tbm) {
isInject = true;
}
});
if (isInject) {
const elem = document.createElement("style");
elem.innerHTML = callback().replaceAll(" ", "").replaceAll("\n", "");
document.head.appendChild(elem);
}
});
}
};
// src/icons.ts
var paths = {
all: ``,
isch: ``,
vid: ``,
maps: ``,
nws: ``,
shop: ``,
more: ``,
bks: ``,
flm: ``,
fin: ``
};
var enablePaths = {
all: ``,
shop: ``,
isch: ``,
vid: ``,
nws: ``
};
function getIconSvgElement(path, viewBox = "0 0 24 24") {
const svg = document.createElement("svg");
svg.setAttribute("viewBox", viewBox);
svg.innerHTML = path;
return svg;
}
// src/registerNavItems.ts
function registerNavItems(itemsDom) {
itemsDom.appendTbmActiveItem(
"all",
itemsDom.createItemElem(
"All",
getIconSvgElement(paths.all),
true,
createAllUrl()
),
itemsDom.createItemElem("All", getIconSvgElement(enablePaths.all), false)
);
itemsDom.appendTbmActiveItem(
"isch",
itemsDom.createItemElem(
"Images",
getIconSvgElement(paths.isch),
true,
createTbmUrl("isch")
),
itemsDom.createItemElem(
"Images",
getIconSvgElement(enablePaths.isch),
false
)
);
itemsDom.appendTbmActiveItem(
"vid",
itemsDom.createItemElem(
"Videos",
getIconSvgElement(paths.vid),
true,
createTbmUrl("vid")
),
itemsDom.createItemElem("Videos", getIconSvgElement(enablePaths.vid), false)
);
itemsDom.appendItem(
itemsDom.createItemElem(
"Maps",
getIconSvgElement(paths.maps, "0 0 16 16"),
true,
createMapUrl()
)
);
itemsDom.appendTbmActiveItem(
"nws",
itemsDom.createItemElem(
"News",
getIconSvgElement(paths.nws),
true,
createTbmUrl("nws")
),
itemsDom.createItemElem("News", getIconSvgElement(enablePaths.nws), false)
);
itemsDom.appendTbmActiveItem(
"shop",
itemsDom.createItemElem(
"Shopping",
getIconSvgElement(paths.shop),
true,
createTbmUrl("shop")
),
itemsDom.createItemElem(
"Shopping",
getIconSvgElement(enablePaths.shop),
false
)
);
}
function createAllUrl() {
const search = new Search(location.search);
search.delete("tbm");
return search.getURL();
}
function createTbmUrl(tbm) {
const search = new Search(location.search);
search.append("tbm", tbm);
return search.getURL();
}
function createMapUrl() {
const search = new Search(location.search);
const q = search.get("q");
return "https://www.google.com/maps/?q=" + q;
}
// src/registerStyle.ts
function registerStyle(styleInjecter) {
styleInjecter.addStyle(
["all", "vid", "nws"],
`
.main > div:nth-child(1) > div:nth-child(1) {
height: 45px;
}
.main > div:nth-child(1) > div:nth-child(8) > div:nth-child(1) {
padding-left: 0;
height: 43px;
}
.main > div:nth-child(1) > div:nth-child(8) > div:nth-child(1) > div:nth-child(1) {
align-items: center;
}
.main > div:nth-child(1) > div:nth-child(8) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
align-items: center;
}
@media (min-width: 1124px) and (max-width: 1300px){
.srp {
--center-abs-margin: 30px!important;
}
}
@media (min-width: 1410px) and (max-width: 1610px) {
.srp {
--center-abs-margin: 180px!important;
}
}
@media (min-width: 1610px){
.srp {
--center-abs-margin: 180px!important;
}
}`
);
styleInjecter.addStyle(
["isch"],
`
body > div:nth-child(6) > c-wiz:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
height:59px;
}
body > div:nth-child(6) > c-wiz:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
margin-left:0;
}
`
);
styleInjecter.addStyle(
["shop"],
`
#cnt > div:nth-child(1) {
height: 45px;
}
#cnt > div:nth-child(4) {
padding: 17px 0 0px calc(var(--center-abs-margin) - 20px);
}
#cnt > div:nth-child(4) > div:nth-child(2) {
margin-left:0;
}
`
);
styleInjecter.addStyle(
["*"],
`
.navbar-parent {
display: inline;
margin-left: 169px;
white-space: nowrap;
color: #70757a;
font-size: 13px;
-webkit-user-select: none;
}
.navbar-now-item {
border-bottom: 3px solid var(--classic-google-nav-bar-primary);
color: var(--classic-google-nav-bar-primary);
}
.navbar-item-container {
padding: 16px 12px 12px 10px;
font-family: Google Sans,Roboto,HelveticaNeue,Arial,sans-serif;
height: 16px;
line-height: 16px;
margin: 11px 1px 0;
display: inline-block;
font-size: 13px;
}
.navbar-item-icon-outer {
display: inline-block;
fill: currentColor;
height: 16px;
width: 16px;
margin-right: 5px;
vertical-align: text-bottom;
}
.navbar-now-item > navbar-item-icon-outer {
fill: currentColor;
}
.navbar-item-container > a {
text-decoration: none;
color: var(--classic-google-nav-bar-text)!important;
-webkit-tap-highlight-color: rgba(0,0,0,.10);
}
`
);
}
// src/theme.ts
function attachTheme(styleInjecter) {
styleInjecter.injectOnLoad(["*"], () => {
const theme = getComputedStyle(document.body).backgroundColor === "rgb(32, 33, 36)" ? "dark" : "right";
const styles = {
dark: `
:root {
--classic-google-nav-bar-text:#bdc1c6;
--classic-google-nav-bar-primary:#8ab4f8;
}
`,
right: `
:root {
--classic-google-nav-bar-text:#202124;
--classic-google-nav-bar-primary:#4285f4;
}
`
};
return styles[theme];
});
}
// src/index.ts
function main() {
console.log("google navbar");
const searchManager = new Search(location.search);
const tbm = searchManager.get("tbm");
const styleInjecter = new StyleInject();
const itemsDom = new NavBarItems();
if (tbm === void 0) {
styleInjecter.setTbm("all");
} else {
styleInjecter.setTbm(tbm);
}
registerStyle(styleInjecter);
attachTheme(styleInjecter);
styleInjecter.inject();
const navbarSelectors = {
all: ".main > div:nth-child(1) > div:nth-child(8)",
isch: "body > div:nth-child(6) > c-wiz > div",
vid: ".main > div:nth-child(1) > div:nth-child(8)",
shop: "#main > div:nth-child(1) > div:nth-child(4)"
};
const navbarItemsSelectors = {
all: "div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)",
isch: "div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)",
vid: "div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)",
shop: "div:nth-child(2)"
};
document.addEventListener("DOMContentLoaded", () => {
switch (tbm) {
case void 0: {
const navbar = document.querySelector(navbarSelectors.all);
const itemsParent = navbar?.querySelector(navbarItemsSelectors.all);
removeOriginalItems(itemsParent);
itemsDom.setParentElement(itemsParent);
itemsDom.setTbm("all");
break;
}
case "isch": {
const navbar = document.querySelector(navbarSelectors.isch);
const itemsParent = navbar?.querySelector(navbarItemsSelectors.isch);
removeOriginalItems(itemsParent);
itemsDom.setParentElement(itemsParent);
itemsDom.setTbm("isch");
break;
}
case "vid": {
const navbar = document.querySelector(navbarSelectors.vid);
const itemsParent = navbar?.querySelector(navbarItemsSelectors.vid);
removeOriginalItems(itemsParent);
itemsDom.setParentElement(itemsParent);
itemsDom.setTbm("vid");
break;
}
case "shop": {
const navbar = document.querySelector(navbarSelectors.shop);
const itemsParent = navbar?.querySelector(navbarItemsSelectors.shop);
removeOriginalItems(itemsParent);
itemsDom.setParentElement(itemsParent);
itemsDom.setTbm("shop");
break;
}
case "nws": {
const navbar = document.querySelector(navbarSelectors.all);
const itemsParent = navbar?.querySelector(navbarItemsSelectors.all);
removeOriginalItems(itemsParent);
itemsDom.setParentElement(itemsParent);
itemsDom.setTbm("nws");
break;
}
}
registerNavItems(itemsDom);
itemsDom.render();
});
}
function removeOriginalItems(itemsParent) {
if (itemsParent === null || itemsParent === void 0)
return;
const items = itemsParent.querySelectorAll("div, a, span");
items.forEach((item) => {
item.remove();
});
}
// node_modules/ts-extension-builder/tmp/entry.ts
var args = {};
if (typeof GM_info !== "undefined" && GM_info.script.grant !== void 0) {
GM_info.script.grant.forEach((propatyName) => {
let keyName = propatyName.split("GM_")[1];
if (keyName === "xmlhttpRequest") {
keyName = "xmlHttpRequest";
}
args[propatyName] = GM[keyName];
});
}
main(args);