Listen to chrome extension installation in app

user_4099436 0
Viewed 512

How can I listen/track when chrome extension is installed from the web store? I previously had an inline installation of the extension but by inline installations coming to an end soon, I want the user action to open the web store to install the extension and listen for when they add the extension for UI changes and act based on that.

I tried the messaging approach found in here but it seems not working.

manifest.json looks like:

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

and 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;
  })

and inside my app:

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

and based on the value in my redux logic, the UI either changes or not/waits for the extension to get installed.

react-redux reactjs google-chrome-extension javascript
2 Answers

You can do it at the start of your background page.

You need to save a flag (for example, it can be a version of the extension) to the localStorage.

After that, on each start of the background page, you need to check if this flag is in your storage. If there is no flag - then you need to track install, otherwise, it's just usual reload of the background page.

The same way can be used to track updates of the extension from the store, just need to compare versions.

user_15601530

Solved this this in this self-answered question, which I can't mark as a duplicate of this because of no accepted/up votes.

Here's how I solved it from the background script (w/o using a content script):

background.js

  • Listen for onInstalled event.
  • Query all opened tabs that match the URL's you want to notify.
  • Execute a small script in each tab that will postMessage notifying that installation was succesful.
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

Just make sure both externally_connectable and permissions declare the URL patterns of the sites you want to notify.

"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/*"
],

Web page

Just listen somewhere for the postMessage message fired by the extension on succesful installation.

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

Credits

user_18144860
Related