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

#javascript

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




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

    

Ответы

Ответ 1

Чтобы все было ясно, приведу небольшой работающий пример, который помогает реализовать
задачу указанную в вопросе.

Создание расширения процесс достаточно простой и понятный. Разумеется для создания
сложных расширений требуется более серьезное знание 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). Указываем на
нашу папку (которая содержит три файла) и расширение будет установлено.



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