Слушайте установку расширения Chrome в приложении

Question

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

Я попробовал подход обмена сообщениями, найденный в здесь , но, похоже, он не работает.

manifest.json выглядит так:

   "background": {
     "scripts":["index.js"],
     "persistent": false
   },
   "permissions": ["desktopCapture"],
   "externally_connectable": {
        "matches": [
            "*://localhost:*/*",
         "https://*.stageten.tv/*"
        ]
    }

и index.js :

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
      if (request === screenShareExtensionId) {
          if (request.message) {
              if (request.message == "version") {
                  sendResponse({version: 1.0})
                  alert('Hiiii')
              }
          }
      }
      return true;
  })

и внутри моего приложения:

chrome.runtime.sendMessage(screenShareExtensionId, { message: "version" },
    function (reply) {
        if (reply) {
            if (reply.version) {
              return true;
            }
        }
        else {
          return false;
        }
    })

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

Answer 1

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

---

Вот как я решил это из фонового скрипта (без использования скрипта контента ):

background.js

• Прослушивание события onInstalled.
• Запрос всех открытых вкладок, соответствующих URL-адресам, которые вы хотите уведомить.
• Выполните небольшой скрипт на каждой вкладке, который будет postMessage уведомлять эта установка прошла успешно.

chrome.runtime.onInstalled.addListener(function listener(details) {
  if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
    chrome.tabs.query({
      url: [
        'https://localhost:3000/*',
        'https://staging.foo.com/*',
        'https://production.foo.com/*'
      ]
    }, tabs => {
      Array.from(tabs).forEach(tab => {
        chrome.tabs.executeScript(tab.id, {
          code: `window.postMessage('screenshare-ext-installed', window.origin);`
        });
      });
    });

    chrome.runtime.onInstalled.removeListener(listener);
  }
});

manifest.json

Просто убедитесь, что оба externally_connectable и permissions объявляют шаблоны URL сайтов, которые вы хотите уведомить.

"externally_connectable": {
    "matches": [
    "https://localhost:3000/*",
    "https://staging.foo.com/*",
    "https://production.foo.com/*"
  ]
},
"permissions": [
  "desktopCapture",
  "https://localhost:3000/*",
  "https://staging.foo.com/*",
  "https://production.foo.com/*"
],

Веб-страница

Просто слушайте где-нибудь сообщение postMessage, запущенное расширение на успешную установку.

window.onmessage = e => {
  if (e.data === 'screenshare-ext-installed') {
    // extension successfully installed
    startScreenShare()
  }
}

Кредиты

• @ wOxxOm's comment

Answer 2

Вы можете сделать это в начале вашей фоновой страницы .

Вам необходимо сохранить флаг (например, это может быть версия расширения) в localStorage .

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

Таким же способом можно отслеживать обновления расширения из магазина, просто нужно сравнить версии.