Подскажите как создать кнопку на панели в хроме? Она должна по клику открывать ссылку в новой вкладке.
Открыть в новой вкладке
Ответ
Чтобы все было ясно, приведу небольшой работающий пример, который помогает реализовать задачу указанную в вопросе.
Создание расширения процесс достаточно простой и понятный. Разумеется для создания сложных расширений требуется более серьезное знание 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). Указываем на нашу папку (которая содержит три файла) и расширение будет установлено.
Иконка появится там где ее ждут :-). Кликаем и переходим на нужный адрес.
Комментариев нет:
Отправить комментарий