Inconsistency: devtools.panels.create()

[bershanskiy]

devtools.panels.create(title, iconPath, pagePath) resolves iconPath and pagePath as absolute URLs in Chrome and as relative URLs in Firefox, leading to inconsistency.

Specifically, Chrome docs state:

iconPath
Path of the panel's icon relative to the extension directory.
pagePath
Path of the panel's HTML page relative to the extension directory.

MDN states (shortened):

iconPath
... The URL is resolved as relative to the current extension page (unless expressed as an absolute URL, e.g. "/icons/panel.png").
pagePath
... The URL is resolved as relative to the current extension page (unless expressed as an absolute URL, e.g. "/devtools/panel.html"). ...

I did not find documentation about Safari behavior but I tested Safari Technology Preview 153 (future Safari 16.0) and it used paths relative to the extension directory (like Chrome). I created this project for testing.

Safari 16 Beta Release Notes list under "Safari Web Extensions > New Features" there is "Added support for Safari Web Inspector Extensions", which most likely includes this method. According to MDN BCD, this method is available in Safari 16 Technology Preview (in line with release notes).

Note: some popular DevTools extensions seem to work around this difference by placing the DevTools background page into the same folder as manifest.json.

Note 2: There is apparently a bug in Chrome 99+ which makes absolute URLs produce double slashes in message's sender.url. For example, this bug affects Svelte DevTools (10000+ users on CWS). Details: sveltejs/svelte-devtools#69, two possible fixes (either one would work): sveltejs/svelte-devtools#70, sveltejs/svelte-devtools#78

[xeenon]

Safari treats the paths as relative to the extension directory, like Chrome.

[bershanskiy]

Safari treats the paths as relative to the extension directory, like Chrome.

Just to clarify: in this case, the extension directory is always defined to be the directory of manifest.json, correct?

[xeenon]

Correct.

[carlosjeurissen]

This is not limited to just the devtools API. Aligning this across browsers would be great.

Another workaround is to simply always use absolute URLs like the following: /icons/panel.png. Yet this might not be doable due to the double slashes issue as @bershanskiy mentions in Note 2. Is there a crbug created for this issue?

Some considerations

• The relative path syntax makes it possible to define URLs as being relative. This also aligns with other browser APIs like changing window.location.
• Since paths defined in manifest.json are always absolute to the extension base, to some developers it can feel natural to be able to use the same path in API method calls. This leads to less bugs in the end.

[dotproto]

Note 2: There is apparently a bug in Chrome 99+ which makes absolute URLs produce double slashes in message's sender.url. For example, this bug affects Svelte DevTools (10000+ users on CWS). Details: sveltejs/svelte-devtools#69, two possible fixes (either one would work): sveltejs/svelte-devtools#70, sveltejs/svelte-devtools#78

@bershanskiy (or whoever wants to), please open an issue for this on crbug.com.

This is not limited to just the devtools API. Aligning this across browsers would be great.

Can you share more details? It might be creating a new meta issue to track the more generic inconsistency and referencing this issue from it.

[carlosjeurissen]

@dotproto if I recall this correctly, I have been dealing with this issue myself with the browserAction.setIcon API. There might be more. Basically any API which references a path of some kind should be checked.

[bershanskiy]

@bershanskiy (or whoever wants to), please open an issue for this on crbug.com.

I searched for a bug and didn't find one, so I'll create a new one soon (with a detailed repro case). I will post the link here.

It would be nice to get a consensus from all browser vendors eventually (especially from Apple since Safari 16 still could alter its behavior prior to the launch).

Also, consider adding the "next manifest version" label because this is a breaking change and is probably not very likely to be fixed in MV3 or MV2.

[carlosjeurissen]

@dotproto Checked a few APIs manually in firefox and indeed browserAction.setIcon is handled relatively.

However, when checking the notifications API iconUrl property, this is handled absolutely.

[bershanskiy]

FYI, I created a Chromium bug for Note 2: https://bugs.chromium.org/p/chromium/issues/detail?id=1364293