Sending message from website to Chrome Extension. How am i supposed to know the ID?

Question

In the Chrome documentation, it states here that in your extension manifest, you should add the following:

{
  "name": "My externally connectable extension",
  "externally_connectable": {
    // Extension and app IDs. If this field is not specified, no
    // extensions or apps can connect.
    "ids": [
      "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
      "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",
    ],
    "matches": [
      "https://*.example.com/*",
    ],
  },
}

It then goes on to say that to send a message from your website to your Chrome Extension, you need to pass the Extension ID as the first parameter of the sendMessage function

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    if (!response.success)
      handleError(url);
  });

Here's the issue. When a Chrome Extension is installed, it is given a random ID by Chrome. For example, in my development build, my PC install has a different ID to my macOS install. As such, the extension only works on the platform with the correct ID.

When I upload the extension to the Chrome store, how am I going to know the ID that it gets given in order to define that ID in my extensions manifest file and on my website?

https://stackoverflow.com/questions/26053434/how-is-the-chrome-extension-id-of-an-unpacked-extension-generated — Josh Lee, Feb 14 '19 at 21:41
Simply open your extension's manifest when it's installed from the web store and copy the `key` property to your local manifest. It'll fixate the id. AFAIK there's nothing particularly private about that key so you can even publish like that or strip the property in your build script, it's up to you. — wOxxOm, Feb 15 '19 at 04:28
Possible duplicate of [Obtaining Chrome Extension ID for development](https://stackoverflow.com/questions/23873623/obtaining-chrome-extension-id-for-development) — rsanchez, Feb 15 '19 at 17:44

score 1 · Answer 1 · answered Feb 15 '19 at 08:57

I figured out how to do this.

What you need to do is to upload your .zip to the Chrome WebStore developer portal.

Once done, at the top is the generated ID that you can hardcode throughout your website or extension.

To then ensure that this ID is always used when developing though, you want to go to the Package section and then download the crx file.

Install that CRX file to your Chrome install, and then navigate to the install folder for that extension:

C:/Users/<User>/AppData/Local/Google/Chrome/User Data/Default/Extensions/<extension-id>/

Open the manifest.json file and inside there is a value called key. If you copy that into your development versions manifest.json, it tells Chrome to always use the ID that the webstore has given it.

Delete the webstore installed version and continue with development

This is a combined answer of my answer and @Josh Lee's answer. No need of posting your own answer if there are correct answers for you question. — herodrigues, Feb 15 '19 at 18:32

herodrigues · Answer 2 · 2019-02-14T21:10:00.800

0

The extension ID will not change after you have uploaded the extension to the Chrome Web Store (CWS). So, you'll only need to use that ID.

For example, Adblock's extension ID is gighmmpiobklfepjocnamgkkbiglidom, which is present on its CWS' link: https://chrome.google.com/webstore/detail/adblock/gighmmpiobklfepjocnamgkkbiglidom.

Yes, it does change every time you load the extension in development mode though.

edited Feb 14 '19 at 21:10

answered Feb 14 '19 at 20:43

herodrigues

948
1
7
11

OK that makes sense. So how do I get around this for development purposes? – K20GH Feb 14 '19 at 20:52
You could use `chrome.management.getAll` to get all extensions installed in Chrome, but it's only available at `chrome://extensions` or if you develop an extension with this permission. This doesn't solve your problem. – herodrigues Feb 14 '19 at 21:12

Josh Lee · Answer 3 · 2019-02-14T23:49:22.633

Your website should attempt to connect to a list of known extension IDs, and use whichever one succeeds. The Chrome Cast SDK does something similar.

This also enables uploading a beta version to the web store with the same codebase; the website will connect to it if that one is installed.

You'll have to upload the extension at least once in order to get an ID, which will remain stable for future versions on the web store.

You could predict the development ID, but you may as well just copy and paste it after Chrome generates it for you.

>>> t=str.maketrans('0123456789abcdef','abcdefghijklmnop')
>>> hashlib.sha256(b'/Users/josh/junk/26053434').hexdigest()[:32].translate(t)
'odalipbppffphnakilnfmbicajbmomim'
>>> hashlib.sha256(b'C:\\Users\\josh\\junk\\26053434').hexdigest()[:32].translate(t)
'ebikiconcdlacnflflaalbbeinepnnmf'

(For example, the windows path might well use forward slashes and begin with file://…)

The actual process to ping the extension could be the same runtime.sendMessage/runtime.connect code, but it could also use web_accessible_resources with either a fetch or a script tag (which is what the Cast SDK does)

If you must access a development extension from a production website, you're going to need some way to inject the extension ID. The simplest might be to pop open the console and write localStorage.myExtensionId='aaabbb' and reloading.

This is also correct! You answer and my answer satisfies what the OP asked. Not sure why he downvoted our answers. — herodrigues, Feb 15 '19 at 18:30

Sending message from website to Chrome Extension. How am i supposed to know the ID?

3 Answers3