Страницы

Поиск по вопросам

среда, 13 февраля 2019 г.

Создание кнопки на панели в Хром

Подскажите как создать кнопку на панели в хроме? Она должна по клику открывать ссылку в новой вкладке.

Открыть в новой вкладке


Ответ

Чтобы все было ясно, приведу небольшой работающий пример, который помогает реализовать задачу указанную в вопросе.
Создание расширения процесс достаточно простой и понятный. Разумеется для создания сложных расширений требуется более серьезное знание JavaScript.
И так, наше расширение должно уметь открывать в новой вкладке страницу по нажатии на иконку.
Для начала создаем манифест файл, который содержит в себе все необходимые данные о расширении. Файл должен называться manifest.json. Вот его содерживое.
{ "name": "HTML5", "version": "1", "manifest_version": 2, "icons": { "128": "128.png" }, "browser_action": { "default_title": "Нажмите на иконку HTML5", "default_icon" : "128.png" }, "permissions": ["tabs"], "background":{ "scripts": ["background.js"] } }
name - название нашего расширения для Google Chrome. Под этим именен он будет показываться в списке расширений.
version - версия расширения. Указывается на усмотрение разработчика, но в соотвествии с определенными общепринятыми правилами. Об этом можно отдельно почитать тут
manifest_version - версия нашего манифеста. Это значение фиксированное и его менять не надо.
icons - главная иконка нашего расширения размером 128 на 128. Формат файла - png
browser_action - координирует взаимодействие работы с браузером.
default_title - текст, всплывающий при наведении курсора на иконку.
default_icon - иконка для панели расширений (собственно на нее мы будем нажимать чтобы перейти по ссылке)
permissions - указываем действия, на которые наше расширение должно получить доступ. В нашему случае это возможность работать с ТАБ-ами.
background - указываем данные для фоновой страницы. Какие страницы, скрипты итд загружать в фоновом режиме. Мы лишь указываем на файл background.js.
При нажатии на иконку расширения, в фоновом режиме запустится и исполнится код, который лежит в background.js
Содержание файла background.js:
chrome.browserAction.onClicked.addListener(function(activeTab){
chrome.tabs.create({ url: "https://www.w3.org/html/logo/" }); });
Создаем папку и копируем в нее все три файла: manifest.json, background.js, 128.png

Далее переходим в Google Chrome во вкладку Расширения (Extensions) и нажимаем на кнопку "Загрузить распакованное расширение" (Load unpacked extension). Указываем на нашу папку (которая содержит три файла) и расширение будет установлено.

Иконка появится там где ее ждут :-). Кликаем и переходим на нужный адрес.

Комментариев нет:

Отправить комментарий