Running the extension in Firefox

2hu4u commented 8 months ago

Hi, firstly thanks for making such a useful extension. I recently switched from Chrome to Firefox and wanted to port this over. I gave it a shot myself with partial success (please note I am a complete novice with respect to browser extensions and programming in general).

After some edits to manifest.js and loading the zip file into Temporary Add-ons, (and clearing up some Opaque Response Blocking errors) I was able to get it working as an overlay, however I could not get the authentication to work, and as such only a blurry image from unauthenticated Strava was able to be displayed. The request returns 403 at the higher zoom levels.

Blurry heatmap

The thing does seem to be loading the cookies; as I am able to see my token contents. Cookies

The error I am getting is; error the error Error: Could not establish connection. Receiving end does not exist. is pointing to browser.runtime.sendMessage in the strava-request.js

I don't know if you could provide any guidance for getting it to work in Firefox? Any help appreciated. Cheers

cmoffroad commented 8 months ago

Hey, thanks for flagging this and looking into a fix.

When I first put together the extension using Manifest Version 3, Firefox wasn't on board with it, so supporting it wasn't on my radar.

Turns out, Firefox now supports Manifest V3 as of version 109. Check out the migration guide here: https://extensionworkshop.com/documentation/develop/manifest-v3-migration-guide/

Resources are a bit tight for me right now, so if you crack the code, I'd be thrilled to integrate it.

For some general pointers, this video might come in handy: https://www.youtube.com/watch?v=n08zW-pQo_U

Nekzuris commented 6 months ago

How is it going ? Do you have a working FireFox version ?

2hu4u commented 6 months ago

How is it going ? Do you have a working FireFox version ?

Hi, unfortunately not yet, but it is on my to-do list. Appreciate the reminder. I am quite a novice at this but am keen to have another crack at it soon with a fresh mind. Will keep you all updated if I make any progress

Nekzuris commented 5 months ago

I probably know even less than you about extension so..., I just changed the "service_worker" to "script" to be able to load the extension in Firefox but it's doesn't seam to load the id-script.js. I see a warning about Content-Security-Policy idk if that the issue.

2hu4u commented 5 months ago

I finally figured it out! And luckily it is an easy fix. So I believe the problem is actually on Strava's end. They must have changed the tile source URL but not implemented a working redirect for firefox. Currently the extension expects the url template for the Strava tiles to be: https://heatmap-external-{switch:a,b,c}.strava.com/tiles/${type.toLowerCase()}/${color.toLowerCase()}/{zoom}/{x}/{y}.png and then the GET request appends the cookies onto this for authentication. However this URL is obsolete. In Chrome, the old URL schema strava.com/tiles/ automatically redirects to the new one strava.com/tiles-auth/ however in firefox, the redirect fails on Strava's end and instead gives the error message authentication is now required for data access beyond zoom level 12, please login to strava.com and then visit /auth

For the Firefox extension, the only things that are necessary to change are:

Change the background service_worker to scripts in the manifest.json
In id-script.js, in the very first function, change the template line to: template: `https://heatmap-external-{switch:a,b,c}.strava.com/tiles-auth/${type.toLowerCase()}/${color.toLowerCase()}/{zoom}/{x}/{y}.png`, (the only change is adding in tiles-auth instead of just tiles)
I think that for the application to be published in firefox addons catalogue you must add browser_specific_settings to the manifest with a unique extension id, however I don't believe this is necessary for dev testing.

Anyway I tested it and now all working fine.

Nekzuris commented 5 months ago

Glade you get it to work! My id-script.js wasn't loading because I didn't give the permission to the extension. Now it's loading fine, but it doesn't pick up my authentication token from Strava and tries to request the tiles without it, which ends up in a 403 error.

Nekzuris commented 5 months ago

I got it, I simply didn't have to replace "tiles" with "tiles-auth", the redirection in background.js work fine for me.

cmoffroad commented 5 months ago

Thanks @2hu4u and @Nekzuris for trying it out and sorry for the late reply!

Change the background service_worker to scripts in the manifest.json

I have tried quickly your suggestion on my Firefox 124.0.1 (MacOs) and while the extension loads without error, nothing happens in the browser. When I inspect the background script, there are no console messages, yet the runtime does not stop to any breakpoints to the code I have added.

How did you upload the unpacked extension to Firefox? Via a zip file you generate ? or through web-ext command line tool ?

Nekzuris commented 5 months ago

You probably got this but make sure when you change from service_worker to scripts to also put the string in an array.

In the extension tab > Settings > Debug Add-ons > Load Temporary Add-on and then just select manifest.json, no need to zip. Then go back to the regular add-on page and Manage the extension to allow on restricted sites and you need to flick 4 switches.

Also when on openstreetmap.org there is quite a few failed request in the network tab, you might want to check this before publishing the extension.

cmoffroad commented 5 months ago

@2hu4u, @Nekzuris: I was able to make it work and publish an official Firefox add-on: https://addons.mozilla.org/en-US/firefox/addon/id-strava-heatmap/

It's set on experimental for now, so it's not visible yet in search results.

Could you please try it out and let me know if it works for you?

Now it's loading fine, but it doesn't pick up my authentication token from Strava and tries to request the tiles without it, which ends up in a 403 error.

@2hu4u FYI, the declarativeNetRequest API requires a strict minimum Firefox version of 113, maybe that's why the tiles url didn't work for you ?

Also when on openstreetmap.org there is quite a few failed request in the network tab, you might want to check this before publishing the extension.

@Nekzuris The 403 Strava responses happen also inconsistently on Chrome. There is not much I can do at the moment but it's not a blocker for the extension to work.

Nekzuris commented 5 months ago

I don't know if it's because it's an experimental add-on but the permission popup didn't grant all the needed authorizations. There is only a tiny dot under the add-on icon when on OpenStreetMap to notify that I have to "always allow on openstreetmap.org" and I have to do the same on Strava. So by default, just after installing it, it doesn't work.

And there is an import error because you remove the "type": "module" in manifest.json > background.

2hu4u commented 5 months ago

Hi @cmoffroad thanks for your work. The add-on loaded for me fine. Unfortunately I am still getting 403 for the higher zoom levels and the redirect to tiles-auth is failing. I am using Firefox v124. The cookies are being received (I did have to grant permissions on OSM and Strava).

I also tried it on a different PC using the same version of Firefox. Again, the first thing I had to do was disable opaque response blocking in about:config. However this time I was unable to see the cookies in the request header and still getting 403 error. I made sure authorisation was granted to both OSM and Strava and that I was logged in. I have not looked into this further on that PC, just very brief observation.

Nekzuris commented 5 months ago

(I did have to grant permissions on OSM and Strava)

Yeah so it's not loading by default.

the first thing I had to do was disable opaque response blocking in about:config

The add-on should work without you changing this.

I was unable to see the cookies in the request header and still getting 403 error

I think this is just because the background script failed at the import because of the missing "type": "module".

cmoffroad commented 5 months ago

@Nekzuris @2hu4u, I appreciate the updates.

Tested on a different laptop, encountered the same failure you have with the tiles-auth redirect even by adding "type": "module".

Firefox's caution about unstable Manifest V3 support prompts me to wait for a few more versions before retesting. Hopefully, the issue with declarativeNetRequest.updateDynamicRules API will be resolved.

I've temporarily removed the Add-on from public search. I'll stay in touch with updates, and please inform me of any breakthroughs you come across.

emersonveenstra commented 1 month ago

I created https://github.com/cmoffroad/id-strava-heatmap-extension/pull/2 with fixes that make it work for me when i load it unpacked, if anyone wants to test it out and see if anything is broken

Nekzuris commented 1 month ago

Thanks it works fine on my end.

cmoffroad commented 1 month ago

Hi @emersonveenstra,

Apologies again for the delay, and thanks for your pull request! I’ve merged, deployed, and tested it, and everything works great on my end.

Could you please check the official extension add-on and let me know if we can go ahead and close this issue?

https://addons.mozilla.org/en-US/firefox/addon/id-strava-heatmap/

Thanks a lot!

2hu4u commented 1 month ago

Could you please check the official extension add-on and let me know if we can go ahead and close this issue?

Works fine for me, brilliant, thanks everyone

cmoffroad / id-strava-heatmap-extension

Running the extension in Firefox #1