Выбор браузера не принципиален, порядок действий один и тот же. Расширение в Google Chrome самому можно использовать (его делать практически так же), но для публикации (чтобы его загрузили другие люди) надо зарегистрироваться как разработчик, а это сейчас стоит 25$. Я пользуюсь Firefox'ом, поэтому я опубликовал именно в нём (и нет не потому что мне было жалко 25 баксов...но это не точно).
Подготовим HTML
Моё расширение должно открывать сайт магазина автозапчастей на странице введённого артикула. Для этого нам понадобится поле для ввода артикула, а открываться будет по нажатию кнопки ENTER на клавиатуре. Если присмотреться, то во многих сайтах запрос пишется прям в адресной строке. Таким образом для нужного мне сайта надо открывать в новой вкладке ссылку вида: сайт/search/?pcode=артикул.
Рисуем форму в HTML добавляем поле ввода (<input id="input"></input>)и ссылку на скрипт (<script src="popup.js"></script>). Дополнительные кнопки, красоту с помощью картинок и CSS по вкусу. Скрипт для нажатия по кнопке и для нажатия на клавиатуре ENTER.
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('submit');
checkPageButton.addEventListener('click', function() {
if (document.getElementById('input').value != '') {
var article = document.getElementById('input').value;
chrome.tabs.create({url:"https://avtopartiya.com/search/?pcode=" + article});
}
}, false);
}, false);
document.onkeyup = function (e) {
e = e || window.event;
if (e.keyCode === 13) {
var article = document.getElementById('input').value;
chrome.tabs.create({url:"https://avtopartiya.com/search/?pcode=" + article});
}
return false;
};
Превратим HTML в расширение
Сначала создадим папку с названием нашего расширения. Создадим в ней файл manifest.json, например с помощью блокнота. В него вставим следюущий текст:
{
"manifest_version": 2,
"name": "Avtopartiya",
"version": "1.0",
"description": "looking for a part on the site avtopartiya.com",
"icons": {
"48": "icons/ico-48.png"
},
"applications": {
"gecko": {
"id": "email@email.ru",
"strict_min_version": "57.0"
}
},
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": {
"19": "button/but-19.png",
"38": "button/but-38.png"
},
"default_title": "Avtopartiya",
"default_popup": "popup/p.html"
}
}
Раздел "applications" является обязательным при публиации для Mozilla FIrefox, а при тесте можно внести туда всё что угодно, лишь бы подходило по формату (я советую любой e-mail, всё равно браузер заменит его на набор цифр). Для плагина для Google Chrome всё точно так же только этот раздел вообще не нужен.
Для тех расширений, которые выполняются постоянно "permissions" является обязательным. Сюда можно написать применимость скрипта, например для всех сайтов с *sex* в названии рисовать чёрный прямоугольник на весь экран.
У меня расширение типа popup - это всплывающее окно. Бывают ещё выпадающей список, боковая вкладка, кнопка, контекстное меню, просто скрипт на странице и другие. Вот в этот popup и указываем HTML-файл который будет выполняться ( p.html ). Для других типов плагинов будет отличаться именно это место.
Картинки с разными размерами лежат в папках с картинками (это значок на панели браузера и в списке плагинов).
Проверяем
Открываем в новой вкладке страницу about:debugging. Выбираем там "Этот Firefox" и жмём там кнопку "Загрузить временное дополнение". Выбираем manifest.json и уже можно пользоваться.
Публикуем
Надо архивировать содержимое папки в архив .zip, но переименовав расширение в .xpi. Я делал это программой 7zip, но можно и стандартными средствами ОС.
Регистрация на сайте https://addons.mozilla.org/ru/developers/ заняла меньше минуты. И сразу же появилось предложение загрузить своё первое расширение. Валидация попросила указать в манифесте версию не ниже 57 и после исправления успешно прошла проверку.
Затем в списке дополнений жмём "запросить проверку", заполняем форму и ждём денёк.
