"Состряпал на коленке". Пишем свое расширение для 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: продемонстрированный выше код явно указывает на название статьи, не оптимизирован
и нуждается в доработке. Ни в коем случае не брать его за образец грамотного кода!
Только пример работы, только хардкор!
Гайд также относится к браузеру Хром и Опера. По идее должно работать на любом Хромиуме, но тестировал только на вышеперечисленных.
Полезные ссылки:
Для начала неплохо, для тех кто начинает познавать..