How To Notify User to Reload Tab on Extension Install?

[John Gordon]

I'm thinking this is a pretty common scenario:

A web page that is hosted on our site that we can write any code in tries to detect whether our extension is installed in it. If it isn't, it shows an alert dialog with a link to our extension on the Chrome store. We show some UI elements in the tab indicating the extension isn't installed. The challenge is how can I detect when the extension is installed in my web page and not show the hey-you-install-the-extension UI element after.

The page I'm on is in my manifest's permissions for installing this content script, but Chrome won't install the script for existing tabs.

I _could_ request more permissions, but we want to avoid that since it's most likely the `tabs` permission I need, which displays the nasty message "Has access to your browser history, social security number, and the name of the street you grew up on and first pet's name" thing.

I'd be happy with just opening the popup window saying you need to refresh the page, but is there any other way you all can think of? It just seems like a very common issue.

[John Gordon]

I could do that, but that means I would have to request the `tabs` permission, which shows a very scary permissions message -- can read your browser history. 

The "tabs" permission

This permission does not give access to the chrome.tabs namespace. Instead, it grants an extension the ability to call tabs.query() against four sensitive properties on tabs.Tab instances: url, pendingUrl, title, andfavIconUrl.

On Mon, May 20, 2024 at 9:41 AM Vũ Thảo Nguyên <vtnguy...@gmail.com> wrote:

Hi,

I think you could query all the tab with the url, then trigger reload it service worker of the extension.

It will help to reload the existing tab.

Hope it helps you.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/60857892-a6fb-43f8-ad12-d685024c8a0dn%40chromium.org.

[Deco]

Yes you can definitely do this, there's a few ways:

Expose web accessible resources in the extension: By using XMLHttpRequest or fetch you can identify a specific file bundled in the extension to "know" that the user has it installed, documentation is available here: https://developer.chrome.com/docs/extensions/reference/manifest/web-accessible-resources

Use the OnInstalledReason parameter: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/OnInstalledReason - rather straightforward, simply listen for the call and then proceed from there. 

Decide whichever approach works best for you.

Thanks,

Deco

--

[John Gordon]

Reading the docs for Web Accessible Resources, I don't think it would work in my situation because only extension code, e.g. content scripts, can access the resources; my web page wouldn't have access to  the files because there isn't a content script injected (which is my original problem).

Re the OnInstalledReason option, that could solve my bare-minimum requirement of opening the extension's pop-up and showing a "refresh all tabs to get the extension" message, but that's not ideal.

Thanks for the input!

[wOxxOm]

1. web_accessible_resources by definition exposes the contents of the resources to the web page, so you're not reading the documentation correctly.

2. There's no need to use "tabs" permission to query the tabs for which you have a host permission. Declaring "content_scripts" adds such host permissions implicitly.

3. Your site can also use the externally_connectable messaging to communicate with the extension:

new Promise((cb, fail) => {

  chrome.runtime.sendMessage('id-of-the-extension', {cmd: 'ping'}, () => chrome.runtime.lastError ? fail() : cb());

}).then(() => { /* ok */ }, () => { /* fail */ });

[John Gordon]

Very helpful! 

[wOxxOm]

4. You can automatically re-inject your content scripts into the matching tabs in onInstalled listener, see this example.

[Rajat Paharia]

Fun fact - if you load LinkedIn with the DevTools console open, you can see how they're trying to fingerprint which extensions the user has by loading known web_accessible_resources.

[wOxxOm]

Yeah, it should have been fixed via "use_dynamic_url" in manifest.json, but it's still not implemented and the developer who worked on it is no longer active.

[Vũ Thảo Nguyên]

Hi,

I think you could query all the tab with the url, then trigger reload it service worker of the extension.

It will help to reload the existing tab.

Hope it helps you.

On Mon, May 20, 2024 at 8:39 PM John Gordon <john....@gmail.com> wrote:

--

[John Gordon]

I chose to go with trying to fetch a web resource from my extension. I think it's cleaner because it avoids timing issues when using events that i found required using `setTimeout()` 🤢. The code is working fine, but now I have a new problem when I'm in development mode because the id of my extension is different developing unpacked vs the production instance.

I worked around it by adding a "key" to my `manifest.config` file that I copied from my already-released chrome extension. Now the id is the same for my production and local development builds, but sort of messes with how Chrome determines if the production version is installed. Since the ids are the same, the chrome web store will say that the extension is installed when only the unpacked development version is installed.

Yes, I know this isn't the end of the world, but I'm wondering if there's some way around this. The issue here is that I can't use a dynamic id for my local development because my other website needs a stable id to query against for its fetch url.

Any clever thoughts about this, or should I just suck it up and tell people to be super careful when seeing what version of the extension they have installed?

Thanks

On Monday, May 20, 2024 at 9:53:38 AM UTC-4 Deco wrote:

[woxxom]

You can generate a new different key+id yourself, i.e. without uploading it to the web store: https://stackoverflow.com/questions/23873623/obtaining-chrome-extension-id-for-development