До сих пор у нас была пара статей о всплывающих окнах. Обычно они процветают благодаря действию щелчка по значку.

А как насчет нашей новой вкладки? При нажатии на этот значок ничего не происходит.

Давайте исправим это.

Примечание. Если вам нравится работать с этой статьей, используйте следующую Филиал 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.


Спасибо за чтение, и давайте общаться!

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Фейсбук или же Твиттер