javascript - Published extension doesn't work with chrome API listeners inside onInstalled

Question

I've just tested my Chrome addon https://chrome.google.com/webstore/detail/soft-screen/oecaicengbgemdbdklmajocogdjjgnda after installing it officially, i.e. via CWS (Chrome Web Store), but was suddenly surprised that it's not working. I've always used it by installing it locally in Dev mode, i.e. by copying the addon installed and located at {The Chrome directory}User DataDefaultExtensionsoecaicengbgemdbdklmajocogdjjgnda to another directory and then reinstall it by dragging it to the chrome://extension URL (while Developer mode is on). I then had to remove the key from its manifest.json and then disable the first one that was installed via CWS. I could toggle the extension between local Developer mode and CWS extension to prevent two conflicting identical extensions installed and enabled at once.

The difference is very conspicuous in which it does not work in using the CWS ("Add to Chrome") installation, but it simply works in local Developer mode.

Can you please help me out by doing the same as I did and may you be more knowledgeable than me so that I will be able to fix the bug and solve the problem.

Answer 1

This is a common problem: you're using a non-persistent background script ("persistent":false in manifest.json) and a chrome.runtime.onInstalled listener where you register some other listeners.

This is wrong because onInstalled event is triggered only on installs/updates for a published extension and it happens asynchronously, which is a problem because chrome API listeners must be registered synchronously when using a non-persistent background script, otherwise the event that woke the background script won't be dispatched to this listener i.e. the event will be lost.

It worked for you in developer mode only because reloading an extension is treated by Chrome as an update event reported in onInstalled. Or maybe you had devtools open for your background script which prevented it from unloading automatically.

TL;DR Solution:

Move chrome.browserAction.onClicked registration out of chrome.runtime.onInstalled:

chrome.runtime.onInstalled.addListener(function(info) {
  // code that should run on install/update
  // ...............
});

chrome.browserAction.onClicked.addListener(function(tab) {
  // code that should run on clicking the extension icon
  // ...............
});