Изменение HTML-кода расширения Chrome с помощью прослушивателя событий хранилища Chrome - PullRequest
Новая
       33

Изменение HTML-кода расширения Chrome с помощью прослушивателя событий хранилища Chrome

0 голосов
/ 21 сентября 2019

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

Я хочу, чтобы при срабатывании прослушивателя событий происходили 2 события:

  1. Код будет записывать в журнал обновленные значения.Эта часть работает.
  2. Я хочу, чтобы HTML-код для расширения (документ, который открывается в углу при нажатии на значок) обновлял и отображал значение данных, которое находится в хранилище Chrome.Это та часть, с которой мне нужна помощь. 
chrome.storage.onChanged.addListener(function(changes, namespace) {
      //part 1
      console.log('New data type is %s. New value is %s', 
      changes['type'].newValue, changes['data'].newValue)

      //part 2
      document.getElementById('output').innerHTML = 
      changes['data'].newValue
});

Я понимаю, что вызывать «документ» внутри функции не имеет смысла, но я не уверен, как двигаться дальше, чтобы получить егосделать в расширении HTML.

Я пытался создать прослушиватель событий для доступа к контекстному меню (пользователи могут обновить хранилище Chrome, но нажав кнопку в контекстном меню), но я не смог заставить его работать.Также событие должно срабатывать при обновлении хранилища Chrome, а не при простом доступе к контекстному меню.

Прямо сейчас я получаю эту ошибку: Ошибка в обработчике события: TypeError: Невозможно установить свойство 'innerHTML' со значением NULL

(Существует элемент с идентификатором 'output', поэтому он непроблема)

Спасибо за помощь!

1 Ответ

0 голосов
/ 21 сентября 2019

Фоновый скрипт запускается на отдельной скрытой фоновой странице.Он не связан с всплывающей страницей browserAction или pageAction, у него нет элементов всплывающей страницы, его DOM пуст, за исключением автоматически сгенерированных тегов сценария фоновых сценариев.

Всплывающее окно такжеотдельная страница и, как и любая обычная страница, ее окружение / DOM существует только при отображении страницы.Вы не можете изменить его, когда он не отображается.Вы также не можете показать его из своего кода в общем случае.

Решение 1

Поместите этот слушатель onChanged в скрипт popup.js, который загружен в ваш файл popup.html.(объявлено как "browser_action": {"default_popup":"popup.html"} в вашем manifest.json) с использованием стандартного тега <script src="popup.js"></script>.Он обновит всплывающую страницу, если она отображается, и для отображения текущих значений при открытии всплывающего окна прочитайте их с chrome.storage.local.get или chrome.storage.sync.get в зависимости от того, какое хранилище вы используете в своем расширении.

Solution 2

Используйте chrome.notifications API , чтобы отобразить небольшое уведомление в нижней части экрана, см. Также официальные демонстрационные расширения .

Решение 3

Используйте chrome.browserAction.setBadgeText для отображения короткого текста, например температуры, прямо под значком расширения.Не забудьте указать по крайней мере "browser_action": {} в вашем manifest.json.

...