"Состряпал на коленке". Пишем свое расширение для Vivaldi и браузеров на Хромиуме за 5 минут

Спойлер: продолжая тему статьи о расширении функционала браузера созданное вами расширение можно будет встроить в интерфейс браузера(не как дополнительное расширение, а как часть браузера). Простите за тавтологию.

Будем делать небольшой бокс с ссылками на нужные нам сайты. Автоматически скрывается по таймауту, денег не просит, выглядит примерно так:

Вам потребуется:

  • Знание основ CSS, HTML, JS и работы с DOM.
  • Если страшно - можно обойтись онлайн-справочниками(как я).
  • Редактор кода. Какой душе угодно, желательно с подсветкой Javasvript. Я пользуюсь Sublime Text 3.
  • Минимум полчаса свободного времени

Шаг нулевой. Списывание

Создаем файл MyLinks.user.js(обязательно добавляем .user., иначе браузер не поймет что это расширение) в любой удобной директории. Открываем.

В целях сократить код я использовал функцию, которая упрощает создание html элементов из js(ссылку на источник прилагаю):

function create( name, attributes ) {
var el = document.createElement( name );
if ( typeof attributes == 'object' ) {
for ( var i in attributes ) {
el.setAttribute( i, attributes[i] );
}
}
for ( var i = 2;i < arguments.length; i++ ) {
var val = arguments[i];
if ( typeof val == 'string' ) { val = document.createTextNode( val ) };
el.appendChild( val );
}
return el;
}

Шаг первый. И второй... и третий...
Для начала нам нужно создать контейнер(квадратик), в котором будут храниться наши ссылки:


var linkBox = create( "div", { id: "linkBox"});

Можно сразу задать ему стили, для удобства. Я использовал метод style.cssText:


linkBox.style.cssText = " width:180px; position: fixed;top: 100px;right: 0px; z-index: 999;background: #fff;padding: 10px;box-shadow: 0 0 20px 0px #999;display:flex; flex-direction:column;justify-content:space-between;text-align:left;";

Собственно, создаем наши ссылки. Здесь нам поможет функция из нулевого шага. В метод create() пишем html-тег, атрибуты, перечисленные в фигурных скобках, и заменяющий текст:


var linkVivaldi = create( 'a', { href: "https://forum.vivaldi.net/category/20/%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9"},
"Vivaldi RU Форум" );
var habr = create('a', {href: "https://habrahabr.ru/top/"}, "Хабрахабр");
var vk = create('a', {href: "https://vk.com/vaskm"}, "Вконтакте")

Вкладываем созданные ссылки в наш бокс:

 

linkBox.appendChild(linkVivaldi);
linkBox.appendChild(habr);
linkBox.appendChild(vk);

Кладем наш бокс, собственно, на страницу:

document.body.appendChild(linkBox);

Добавляем автоскрытие нашего бокса по таймауту:

linkBox.onmouseover = function (){
if (document.querySelector("#linkBox").style.right == "-180px") {
document.getElementById("linkBox").style.right = "0";
setTimeout(5000);
}
setTimeout(function(){document.getElementById("linkBox").style.right = "-180px";}, 5000);
};

Ах да, забыли. Добавляем синюю полосу слева. Изначально она задумывалась как кнопка, а потом осталась просто для красоты:


var toggler = create( 'span', { id:"boxToggler"}, "" );
//сразу же добавляем его в наш бокс
linkBox.appendChild(toggler);

Стили можно прописывать не только явным указанием через js(как выше).
На многих форумах говорят, что подключить свой файл css из браузера невозможно. Поэтому мы создадим свой файл уже внутри документа. С флексбоксом и марджинами.

// Создаем собственный CSS стиль
var style = document.createElement('style');

Добавляем стили обычным innerHTML(не забываем ставить +=, иначе каждая запись будет стирать предыдущую):



// украшаем полоску слева. Можно добавить ее через :before
style.innerHTML = '#boxToggler{content: ""; position:absolute; top:0; bottom: 0; left: -10px; width: 14px; background: cornflowerblue;}';


//сам декорэйшенс
style.innerHTML+=' #linkBox a{padding: 5px 0 0 5px; line-height:8px; height:16px;font-size:14px;}';
style.innerHTML+='#linkBox a:hover{background: #ddd; text-decoration: none;}';
style.innerHTML+='#linkBox span{text-align: center;}';

Файл со стилями мы создали, осталось лишь засунуть его в наш документ, традиционно в <head>:

document.head.appendChild(style);

Теперь сохраняем наш файл. Открываем страницу расширений vivaldi://extensions/ , отмечаем Developer Mode и перетаскиваем прям в окно наш файл. Должно появиться диалоговое окно с разрешением на установку. Соглашаемся. Открываем любой сайт. Наслаждаемся. Для добавления расширения в основной функционал браузера - кладем наш файл в корневую директорию браузера и прописываем к нему путь в файле browser.html:


<script src = "MyLinks.user.js"></script>

 


P.S: продемонстрированный выше код явно указывает на название статьи, не оптимизирован
и нуждается в доработке. Ни в коем случае не брать его за образец грамотного кода!
Только пример работы, только хардкор!


Гайд также относится к браузеру Хром и Опера. По идее должно работать на любом Хромиуме, но тестировал только на вышеперечисленных.

Полезные ссылки:

Весь код
JavaScript: создание DOM фрагментов

Учимся писать userscript'ы

Добавление и удаление узлов

setTimeout и setInterval

Sublime Text

1 ответ
Алекс@coaperator

Для начала неплохо, для тех кто начинает познавать..

авторизуйтесь чтобы ответить