Поиск в Гугле в нескольких колонках

Этот скрипт является форком расширения Mozilla 2-Column Google Results 2.7.0
Этот скрипт улучшает некоторые вещи в оригинальных результатах Google Mozilla с 2 столбцами, и он может быть легко перенастроен пользователем в коде скрипта.
Он также улучшает аналогичное расширение в Google Chrome - 2-Column Google Results 1.0
1. Этот скрипт легко настраивается:
по умолчанию он представляет результаты Google в 4 столбцах для "новости" и "видео"и в 3 столбцах для "все".
Но пользователь может настроить эти цифры под себя-отдельно для "новостей", "видео" и "всего".
Он также может изменить цвет выпрыгивающей панели.
2. Расширение Mozilla 2-Column Google Results 2.7.0 не представляло "Новости" в 2 столбцах,
а расширение Chromes 2-Column Google Results 1.0 имеет проблемы с представлением изображений.
Здесь эти обе проблемы решены.
4. Кроме того скрипт учитывает актуальную ширину экрана - если юзер не в полноразмерном режиме, или имеется сплит и ширина меньше, число колонок уменьшается в соответствии с актуальной шириной
3. Скрипт сравнительно небольшой: меньше 9 КБ

скрытый текст

Google search in several columns

Выделить код

Код:

// ==UserScript==
// @name         Google search in several columns
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Google search results in 4 columns (Video and News) and 3 columns for All. Fork of Mozilla's 2-Column Google Results 2.7.0
// @author       difabor
// @include      http*://www.google.*/*
// @include      http*://www.google.*.*/*
// @include      http*://ipv6.google.*/*
// @include      http*://encrypted.google.*/*
// @include      http*://*start.me/search/google*
// @grant        none
// ==/UserScript==
var urloc = location;
var switch_news = /tbm=nws/.test(urloc)? '' : '.bkWMgd > div:not(.knavi)';
var FullScreenWidth = 1920;
var col4type = /tbm=nws/.test(urloc)? 4 : /tbm=vid/.test(urloc)? 4 : 3;
var col_num = Math.round(col4type*innerWidth/FullScreenWidth+0.1);
var spring_color = '#8ff';
var css = 'body:not(.no-two-col) {\n'+
'  max-width: 100vw !important;\n'+
'  overflow-x: hidden !important;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) img {\n'+
'  max-width: 100%;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #center_col {\n'+
'  margin-left: 0 !important;\n'+
'  margin-right: 0 !important;\n'+
'  overflow-x: visible !important;\n'+
'  width: 100vw !important;\n'+
'  padding-left: 10px !important;'+
'}\n'+
'\n'+
'body:not(.no-two-col) #res {\n'+
'  box-sizing: border-box;\n'+
'  width: 100% !important;\n'+
'}\n'+
'\n'+
'/* body:not(.no-two-col) #res .bkWMgd {\n'+
'  vertical-align: top;\n'+
'} */\n'+
'\n'+
'/*\n'+
' * .knavi is for calculator. ref: #9\n'+
' * */\n'+
'/*.knavi*/\n'+
'body:not(.no-two-col) #res '+ switch_news +' {\n'+
'  column-count: '+col_num+' !important;\n'+
'  column-gap: 10px !important;\n'+
'  column-rule: 1px solid silver !important;\n'+
'  /*background-color: #fda !important;*/\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #res .bkWMgd > div:not(.knavi) > div {\n'+
'  box-sizing: border-box;\n'+
'  margin: 0 3% 10px;\n'+
'  min-height: 100px;\n'+
'  vertical-align: bottom;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #res .bkWMgd > div.knavi > div {\n'+
'  width: 25%;\n'+
'  margin: auto;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #res .bkWMgd g-section-with-header {\n'+
'  margin-left: 2.5%;\n'+
'  clear: both;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #res .bkWMgd g-scrolling-carousel {\n'+
'  margin: 0;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #iur {\n'+
'  width: 100% !important;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) .big .mw {\n'+
'  max-width: 100% !important;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #rhs {\n'+
'  background-color: '+ spring_color +' !important;\n'+
'  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);\n'+
'  margin-right: 0 !important;\n'+
'  margin-left: 0 !important;\n'+
'  overflow: hidden !important;\n'+
'  padding: 0 !important;\n'+
'  position: absolute !important;\n'+
'  transition: .3s right;\n'+
'  top: -40px !important;\n'+
'  right: -440px !important;\n'+
'  width: 460px !important;\n'+
'  z-index: 1000 !important;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #rhs:hover {\n'+
'  right: 0px !important;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #rhs img {\n'+
'  width: 100%;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #rhs #rhs_block,\n'+
'body:not(.no-two-col) #rhs #rhs_block .g.rhsvw.mnr-c.g-blk,\n'+
'body:not(.no-two-col) #rhs #rhs_block .g.rhsvw.mnr-c.g-blk .kp-blk {\n'+
'  padding-left: 0 !important;\n'+
'  padding-right: 0 !important;\n'+
'  margin: 2.5 !important;\n'+
'  width: 90%;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #taw, #extrares {\n'+
'  clear: both;\n'+
'  margin-left: 30px;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) #rc {\n'+
'  width: 40vw;\n'+
'}\n'+
'\n'+
'body:not(.no-two-col) .rc table.ts td { /* for SearchPreview */\n'+
'  min-width: 130px;\n'+
'}\n'+
'\n'+
'/* also work for startpage.com */\n'+
'\n'+
'.startpage .web_regular_results > li {\n'+
'  box-sizing: border-box;\n'+
'  float: left;\n'+
'  min-height: 125px;\n'+
'  vertical-align: top;\n'+
'  width: 50%;\n'+
'}\n';

let styleNode = document.createElement("style");
  styleNode.appendChild(document.createTextNode(css));
  (document.querySelector("head") || document.documentElement).appendChild(styleNode);// ==UserScript==

html, body{background-image: url(https://images.protopage.com/wallpaper/retina/autumn-landscape.jpg); background-attachment: fixed !important; background-size: 100% 1007px !important} body {column-count: 2; column-gap:12px; width: 99vw; left: -20px; padding: 0px; position: absolute; z-index: 0; top: 3px} .pun dd{width: auto} body {margin-right: -40px !important; } .pun {width: auto; margin-right: -50px; margin-top: -4px !important; margin-bottom: -4px !important} .pun div {background: #eee} .pun h2 {margin: -4px 0px -4px 0px!important} #brdheader .box {margin-top: 3px; margin-bottom: -15px;margin-right: -5px} #brdfooter:before{ position: fixed; visibility: visible !important; top: 20px !important; right: -0px !important; left: auto !important; bottom: auto !important; width: 10px !important; min-height: 15px !important; border: 1px solid #444 !important; border-radius: 5px 5px 5px 5px !important; background: #8ff !important; opacity: 1 !important; font-size: 16px; z-index: 249500 !important; content: "<" !important; } /*---------------------------------------*/ #brdfooter{position: fixed !important; visibility: hidden !important; top: 35px !important; right: -2px !important; left: 44vw; bottom: auto !important; min-height: 15px !important; max-width: 20vw; border: 1px solid #444 !important; border-radius: 5px 5px 5px 5px !important; background: #8ff !important; z-index: 249500 !important; margin: 0 0 0 0 !important; padding:2px !important; width: auto !important; min-width: 1063px !important; transition: visibility 0s linear 0s !important;} /*---------------------------------------*/ #brdfooter:hover {visibility: visible !important; }