search

sveltejs / svelte-devtools

A browser extension to inspect Svelte application by extending your browser devtools capabilities
https://chromewebstore.google.com/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff
MIT License
1.4k stars 79 forks source link

Add support for Firefox #177

Closed davidjayb closed 3 months ago

davidjayb commented 7 months ago

It would be great to add support for Firefox to the devtools. It looks as though the developer tools API for Firefox is based off of Chromium, with some limitations:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools

Building and loading this locally I receive the following error:

background.service_worker is currently disabled

This lead me to the following issue:

https://github.com/mozilla/web-ext/issues/2532

Firefox does not support service workers at the moment. Changing from service_worker to scripts allows me to load the extension:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background

I then receive a warning message about the web_accessible_resources.world property, which isn't supported:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources

Which was also encountered by the EmberJS team, resolved by moving the resource under content_scripts: https://github.com/emberjs/ember-inspector/pull/2501

After getting the warnings removed I am able to load the plugin it does not detect Svelte.

ignatiusmb commented 7 months ago

Thank you for the investigation! I haven't fully recovered yet so it may take a while before the next release, but the next minor will include the files for both Chrome and Firefox users to install the extension locally. I managed to get it working on Firefox when I was working on #137

nemkicsiaron commented 7 months ago

Thank you for the investigation! I haven't fully recovered yet so it may take a while before the next release, but the next minor will include the files for both Chrome and Firefox users to install the extension locally. I managed to get it working on Firefox when I was working on #137

That is fantastic

ignatiusmb commented 5 months ago

I was trying to hold off the next minor for Firefox support, but in an effort to get the ball rolling again, I'll cut a quick minor release for the inspector button as mentioned in https://github.com/sveltejs/svelte-devtools/issues/166#issuecomment-1906558887. Thank you for waiting, Firefox users :)

ignatiusmb commented 3 months ago

The PR has been merged! There's still a couple of things to polish like the font-size not adjusting with the zoom level (unlike chromium-based browsers), but we can now use the extension with Firefox by loading it as a temporary add-on. Be sure to also enable "Always Allow on localhost" in the extension settings.

Simply grab the .zip file from the next latest releases, those who are eager to use it immediately can download the artifact from the action job at https://github.com/sveltejs/svelte-devtools/actions/runs/8434582496 (you might need to be logged in), or build them yourself by running the "build" script and then "build:tar" for Windows or "build:zip" for others.