4

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

вот сюда нужно кнопку

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

1
  • Создание расширений для хрома процесс не очень сложный. Требуется немного знать JavaScript и HTML. Но если Вы планируете выставить свое расширение на всеобщее обозрение и сделать доступным через Chrome Web Store - придется заплатить за лицензию (стоит она всего 5$). А если расширение чисто для себя, то о том как это делается, можно почитать тут: support.google.com/chrome/a/answer/2714278?hl=ru 7 апр 2016 в 10:28

1 ответ 1

5

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

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

введите сюда описание изображения

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

введите сюда описание изображения

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.