Extension development routing

Add-ons Development
#1

I’m developing an extension for my ibgib protocol that wraps an Ionic/Angular app. Because the protocol is meant to be a relatively thin layer of DLT for distributed computation, I’m also trying to leverage the pretty amazing Mozilla synergy in web-ext to target ff desktop, ff android and chrome. All of these targets work well when triggered via the browser action button (ok the ff android is a little slow). When clicking the browser action button, it opens up the Angular app’s ‘index.html’ in a new tab and the Angular router knows how to route the empty route to something like

moz-extension://[123-extension-hash-456]/ibgib/tag%20home%5E...[DLT hash content address]

An actual example would be:

moz-extension://2ead8dab-233e-45b7-aba9-cfd4930948a4/ibgib/tag%20home%5E7161C612749FFD9C992DF86BAC0B2DC5EEF03F5675B1C8277A109519F05EB216.AC5F4F39092CACC9AC4222C891BED654765E0368BBCC312B8E52C58A1A9CBE12

If I duplicate this tab, it will fail to load in all targets (ff desktop, ff android, chrome). I figure this has something to do with sandboxing extensions and it may not be possible, but I would really love to be able to coax the routing to work via the deep linking. (It’s a primary benefit of the protocol with content addressing.)

Does anyone know of how to properly route the incoming URL, or if this is even possible to access outside of the browser action button? Is this only an artifact of using the self-signed developer certificates, and would it magically route properly with a proper cert?

#2

I realized the post may not be clear. Here are some screenshots.

Screen Shot 2022-04-24 at 8.36.45 AM
Screen Shot 2022-04-24 at 8.36.45 AM1103×262 41.5 KB

Screen Shot 2022-04-24 at 8.37.10 AM
Screen Shot 2022-04-24 at 8.37.10 AM1353×591 49.5 KB

So as you can see, it says “Access to the file was denied.” after hitting “Duplicate tab”. If I open the addon page via the browser action, the file definitely exists and will display correctly. But is this access error occurring because it’s a development environment and something to do with it not being properly signed? Could anyone point me to some documentation that describes the permission issue here?

#3

Is this a webapp built with some router of a framework that uses the history API? (https://developer.mozilla.org/en-US/docs/Web/API/History/pushState). Because with that API you can generate absolute URLs that will not point to an actual file. If you want your URLs to always work, you will have to switch to hash based navigation.

1 Like
#4

Hi Martin, thanks for the response.

Yes it is built with Angular (Ionic) using Angular’s router. The URL indeed does not point to an actual file but contains information that the router uses to generate the page as it’s an SPA.

Is there something about the duplicate tab extension startup that would work better with hash-based url routing? Why would this differ from the browser action button startup, which already works with non-hash-based routing?

#5

When using hash based routing the actual URL still points at the real file, while the routing information is stored in the hash of the document. So when Firefox tries to load a duplicate tab it knows which file to load and once the app loads it can restore the navigation state from the hash in the URL.

1 Like
#6

Ah, I think I see what you’re saying. So you think with a hash-based url like

moz-extension://[123-extension-hash-456]#/ibgib/tag%20home%5E...[DLT hash content address]

it would then know to look in the index.html file still, which is what the browser action does. Then FF (and chrome also) would know to open index.html and pass in the #... section of the URL?

#7

Exactly. The history API is specifically designed so the “server” gets hit with the updated URL, which is very hard to handle for extensions, where you have no server. So instead you have to use this hash based variant from the 2010s :wink:

Edit: by the way, the relevant angular router docs: https://angular.io/guide/router#locationstrategy-and-browser-url-styles

1 Like
#8

Oh exciting! I’m not going to be able to implement this atm (edit: at this second, but very soon!), but I’m going to go ahead and mark it as the solution. Thanks for your help!