Detect when Chrome extension was installed, without inline installation

Detect when Chrome extension was installed, without inline installation



How can an open tab get notified that a Chrome extension has just been installed, when the installation was done through the Chrome Web Store instead of inline-installation?



Since June 2018 and onwards Chrome has deprecated inline installation hence the following mechanism to get notified if extension was installed won't work from now on:


chrome.webstore.install(url, successCallback, failureCallback)



From now on extensions must be installed only via the Web Store.



We've built a screen share extension that allows prompting the user to share his screen.



When our users hit "Share Screen", we intend to redirect them to the Chrome extension within the Web Store and as soon as they install the extension to re-trigger the Share Screen functionality.






Your extension can send a https/https request in its chrome.runtime.onInstalled listener when the parameter indicates a new install.

– wOxxOm
Sep 15 '18 at 17:37






@wOxxOm That seems rather complicated. Send an https:// request to whom? Our web server, so it can notify the UI? Isn't there a way we can just send a message to the webpage from the extension?

– Nik Kyriakides
Sep 15 '18 at 17:38







Of course: run your extension's content script in that tab using chrome.tabs.query and chrome.tabs.executeScript, then the content script can send a custom DOM event via document.dispatchEvent.

– wOxxOm
Sep 15 '18 at 17:57






@wOxxOm That's what I've done and it works fine. Care to write up a tad more detailed answer so I can accept it?

– Nik Kyriakides
Sep 16 '18 at 0:06





1 Answer
1



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


background.js


onInstalled


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



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


externally_connectable


permissions


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



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


postMessage


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




Thanks for contributing an answer to Stack Overflow!



But avoid



To learn more, see our tips on writing great answers.



Required, but never shown



Required, but never shown




By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Popular posts from this blog

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

ャフサォクコ ケウ,コ,ワ メ,ロスョノ゙,クネ,フムカヤヲニ,エコ゚ツ ウイオン゙ケワサネォキモュキォウイノンコチ゚メヌナイゥフュ,カヒウネェ ネ,ホノケ,ムュキ ッボーミュハ,チ ツス ィ メウイマヤ,゙ウチ ヅ ロ,ォジヌェ ャヌット ェ,マャ,チナエヒネソキツテ トホヲヲミーァ

How do I collapse sections of code in Visual Studio Code for Windows?