До сих пор у нас было несколько статей о всплывающих расширениях. Как правило, они основаны на действии нажатия на иконку.
Но как насчет новой вкладки? При нажатии на значок ничего не происходит.
Давайте это исправим.
Примечание: Если вы хотите работать вместе с этой статьей, используйте следующую ветку GitHub в качестве отправной точки.
Мы хотим, чтобы при нажатии пользователем на значок панели инструментов открывалась новая вкладка.
Действие значка расширения браузера
Это действие, как ни забавно, не определено в манифесте. Вместо этого нам придется регистрировать ручное действие в фоновом скрипте.
Поскольку мы не используем его для нашей новой вкладки, давайте добавим файл background.js в папку public.
Затем откройте ваш manifest.json и зарегистрируйте фоновый скрипт как рабочий сервис (версия 3).
Здесь нам также нужно определить пустой объект action. Это обеспечит нам возможность использования действий.
{
"action": {},
"background": {
"service_worker": "background.js"
}
}
Теперь вернемся к фоновому скрипту. Нам нужно зарегистрировать действие для browserAction.
chrome.action.onClicked.addListener(() => {
chrome.tabs.create({ url: './new-tab.html', active: true });
});
Мы регистрируем обработчик нажатия на атрибут действия (иконку). Когда пользователь нажимает на эту иконку, мы переводим его на новую вкладку с нашим new-tab.html в качестве источника.
Поскольку это относительная ссылка, она будет работать.
Когда пользователь щелкает по значку, он переходит на новую вкладку с нашей страницей по умолчанию.
Вы можете найти готовые примеры кода в следующей ветке GitHub.
Спасибо, что прочитали, и давайте общаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и общаться на Facebook или Twitter.