Уже пару лет у меня есть вкладочка fixes в Chrom(ium). В ней лежат короткие скрипты-хардкоды под определенные сайты. Идея проста: в моих тайлах оконного менеджера затисался chromium, который занимает половину экрана. В нем открыт как правило какой-то сайт с инфой, но верстка на нем универсальная, резиновая. Еще иногда авторы оставляют сайдбар постоянно, без возможности скрыть его, как в интерфейсе Jira. Ну что же, я же разраб, почему бы мне самому все не сделать? Возьмем к примеру сайтец который вынудил меня написать данный пост:

Before

Вот зачем это тот сайдбар? Без него намного лучше

After

Сделать такое просто до нельзя, ибо “сырцы” разметки у нас на руках.

(function() { // closure
var sidebar = document.querySelector('.book-summary')
var book = document.querySelector('.book-body')
var visible = (sidebar.style.display!=="none")
if ( visible ) {
  sidebar.style.display="none"
  book.style.left="0px"
} else {
  sidebar.style.display="block"
  book.style.left="300px"
}
})() // closure

Просто меняем стили того что нам необходимо. И делаем это в режиме toggle - в зависимости от состояния либо показываем либо скрываем сайдбар. Насчет book и его стиля: ширина блока задается жестко через media queryes, поэтому нужно его тоже фиксить.

А запустить это просто. Нужно добавить вкладку, в которую сунем этот самый скрипт. Однако его нужно предварить приставкой javascript:.

Closure - замыкание JS. Можно думать об этом как о private блоке. Мы не сможем(really?) залезть в него и поменять сырцы функции из JS - функция анонимная и ее тело не доступно. Без этого closure приставка javascript: не отработает. Я не вчитался в ошибку.

Удалим для полноты дела всякие переводы строки и прочую дребедень. А еще запилим mangling - это как попросить написать олимпиадника скрипт. Переменные b, s, вместо book, sidebar. Экономим место. Байтики сами посчитаете. Подсказка: wc.

Для минификации я воспользуюсь пакетом uglifyjs. Сначала ставим: sudo npm i -g uglify-js. Зетем кормим сырцом выше, сохраненным в файл и копируем в буфер:

# -ms - mangling + compression
uglifyjs -ms -- tomin.js | xclip -selection clipboard

Про xclip в кратце - есть в Linux несколько буферов обмена. Так вот привычный, который по Ctrl-c,Ctrl-v это clipboard. Вот и говорим xclip использовать его. Иначе он сунет в primary, который заполняется по выделению, а получить из него можно через СКМ.

Дальше просто вставил из буфера в адрес вкладки и можно тыкать. На других сайтах он отвалится и это логично - мы проколочены к сайту классами блоков .book-summary и .book-body.

И тут я задумался о том, что хорошо бы иметь на этот случай хоткей. Первые же поиски привели к Shortcut Manager.

Данный скрипт втолкнулся в хоткей Alt-h. К тому же этот парень может ограничить хоткей по сайту: на одном Alt-h - это скрипт выше, на другом - другой скриптец(который вообще может лежать на гитхабе).

В общем, это достаточно круто взять и поменять под себя сайт. Давным давно, еще будучи совсем не опытным, я метчал, что стану крутым перцем прогером и запилю такую скриптуху, что все сайты будут менять стиль на “темный”. Что бы не было всех этих белых задних фонов и т.п.