Уведомления в расширении Chrome

Уведомления отличные. Когда приложение хочет привлечь внимание пользователя, обычно когда был выполнен (долгий) процесс и, возможно, пользователь перешел на другую вкладку или даже в другое приложение, уведомление позволит пользователю узнать о процессе и, возможно, сможет вернуть их. в приложение, чтобы они могли продолжить свое взаимодействие.

Расширения Google Chrome тоже хороши. Расширение помогает разработчику расширить функциональность браузера / веб-сайта, запустив дополнительный код в контексте определенных веб-сайтов или в целом.

Существует множество руководств о том, как писать расширения для Chrome, и официальный веб-сайт также является хорошим ресурсом и содержит объяснения и примеры, поэтому он не будет рассматриваться в этой публикации. В сообщении предполагается, что у вас уже есть некоторые базовые знания о разработке расширения Chrome, но, тем не менее, вы ссылаетесь на соответствующие ресурсы в нужных местах.

Что мы собираемся делать?

Давайте возьмем очень простое расширение, которое добавляет кнопку на веб-страницу. При нажатии на эту кнопку браузер отобразит уведомление, как на картинке в верхней части сообщения.

Давай сделаем это

Во-первых, чтобы мы могли оставить это позади, давайте создадим файл манифеста. Что-то вроде этого:

{
  "name": "Greeter Robot",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://*/*", "https://*/*"],
      "js": [
        "js/app.js"
      ]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png"
  },
  "manifest_version": 2
}

Шаг 1 - мы воспользуемся скриптом содержимого (app.js), чтобы управлять DOM сайта и добавить <button />

const button = document.createElement('button');
button.textContent = 'Greet me!'
document.body.insertAdjacentElement('afterbegin', button);

Теперь, если вы просмотрите, скажем, StackOverflow, вы увидите кнопку очень красиво

Шаг 2 - добавим click обработчик, чтобы убедиться, что он работает

const button = document.createElement('button');
button.textContent = 'Greet me!'
document.body.insertAdjacentElement('afterbegin', button);
button.addEventListener('click', () => {
  console.log('Clicked');
});

И это делает

Покажем уведомление

Очевидный шаг - перейти в официальную документацию Уведомления. Там мы можем найти API

chrome.notifications.create(string notificationId, NotificationOptions options, function callback)

В нашем случае мы назовем этот код:

chrome.notifications.create('', {
  title: 'Just wanted to notify you',
  message: 'How great it is!',
  iconUrl: '/robot-face_1f916.png',
  type: 'basic'
});

К сожалению, мы получаем ошибку

Uncaught TypeError: невозможно прочитать свойство create из undefined

Почему?

Этот метод API (среди прочего) не предназначен для вызова из сценария содержимого (помните?), А только из фонового сценария.

Скрипты содержимого могут получать доступ к API Chrome, используемым их родительским расширением, обмениваясь сообщениями с расширением.

Это также дает нам решение - использовать фоновый скрипт.

Поэтому вместо того, чтобы напрямую обращаться к API уведомлений из клиентского сценария, мы должны отправить сообщение фоновому сценарию с параметрами и создать уведомление оттуда.

Как это будет выглядеть?

Во-первых, нам нужно (создать и) зарегистрировать другой скрипт - фоновый скрипт в файле манифеста.

"background" : {
  "scripts" : ["js/background.js"],
  "persistent": false
}

А теперь мы можем отправить этому сценарию сообщение, в котором хотим отобразить уведомление.

app.js (сценарий содержимого)

button.addEventListener('click', () => {
  chrome.runtime.sendMessage('', {
    type: 'notification',
    options: {
      title: 'Just wanted to notify you',
      message: 'How great it is!',
      iconUrl: '/icon.png',
      type: 'basic'
    }
  });
});

background.js (фоновый скрипт)

chrome.runtime.onMessage.addListener(data => {
  if (data.type === 'notification') {
    chrome.notifications.create('', data.options);
  }
});

Теперь расширение будет отображать уведомление, как на картинке в верхней части сообщения.

Исходный код

Https://github.com/moshfeu/chrome-extension-notification-demo

Есть что сказать? Я буду рад 👂
https://twitter.com/moshfeu