Ember-inspector: Convert Firefox add-on to use the Chrome WebExtension

[clarkbw]

Here's a tracking issue to pull in all the related pieces needed to make the current WebExtension work within Firefox. Firefox 57 (coming in November) will be removing support for the add-on SDK and should have full support for all the WebExtension APIs used here.

• [x] chrome.extension.onConnect used here, needs to be updated to use runtime.onConnect
• [x] chrome.extension.onMessage used here needs to be updated to use runtime.onMessage
• [x] chrome.extension.sendMessage used a lot in content-script.js needs to be updated to use runtime.sendMessage

I'll look through the rest of the errors and keep updating this list as I go.

[clarkbw]

Here's where the progress is so far: https://github.com/emberjs/ember-inspector/compare/master...clarkbw:firefox-webextension

I'm actually now running into an issue that seems present on Chrome as well as Firefox and prevents the panel from running at all.

[clarkbw]

Just ran into this odd bug when making this change f19eab946f3e68c5c25afa7694af72b5c8da62bc where the icon color is inverted when not selected. I believe its bug 1366755 and hopefully it will get fixed soon.

Before | After | Bug when not selected
--------- | --------- | ----------
| |

[locks]

@clarkbw thank you for the help, it's very appreciated! Anything on the Ember side blocking you?

[clarkbw]

Thanks @locks! I'm seeing an error when running the WebExtension in both chrome and Firefox. Is there an issue tracking something? I'll check my install again, it feels like I have a newer version of some npm / bower package that is breaking things.

[clarkbw]

This is the error I'm seeing in the the extension (Chrome & Firefox): https://stackoverflow.com/questions/44003015/ember-js-typeerror-ember2-default-string-is-undefined-ember-s

[clarkbw]

Here's what the error looks like in the Chrome console: (this is coming from master and not just my branch)

index.js:25 Uncaught TypeError: Cannot read property 'camelize' of undefined
    at chrome-extension://aahkfefopgdpmocdinghnfdebnmoncdh/panes-2-7-0/assets/vendor.js:90386:51
    at Array.forEach (native)
    at exports.default (chrome-extension://aahkfefopgdpmocdinghnfdebnmoncdh/panes-2-7-0/assets/vendor.js:90378:8)
    at Module.callback (chrome-extension://aahkfefopgdpmocdinghnfdebnmoncdh/panes-2-7-0/assets/ember-inspector.js:527:41)
    at Module.exports (chrome-extension://aahkfefopgdpmocdinghnfdebnmoncdh/panes-2-7-0/assets/vendor.js:124:32)
    at requireModule (chrome-extension://aahkfefopgdpmocdinghnfdebnmoncdh/panes-2-7-0/assets/vendor.js:39:18)
    at chrome-extension://aahkfefopgdpmocdinghnfdebnmoncdh/panes-2-7-0/assets/ember-inspector.js:16034:3
(anonymous) @ index.js:25
exports.default @ index.js:17
(anonymous) @ app.js:67
Module.exports @ loader.js:114
requireModule @ loader.js:29
(anonymous) @ app-boot.js:2

[clarkbw]

believe its bug 1366755 and hopefully it will get fixed soon.

The fix for this just landed and ship with Firefox 55

[clarkbw]

Tried this again but I'm hitting the same error in Chrome and Firefox just in the master branch of this repo, not my own changes.

Here's another stack overflow issue I found that's similar to the error I'm seeing.
https://stackoverflow.com/questions/44475787/emberjs-ember-load-initializers-error-after-newer-npm-install

@locks if you have any idea what's happening here or how I can fix it I'd appreciate it.

[teddyzeenny]

@clarkbw I'm on it!

[mikl]

Firefox 57 beta 1 dropped yesterday, so I wanted to try building this version to see how it works.

Not an expert when it comes to web extensions, but here is what I found:

Click to view my findings, screenshots and all

If you load the extension as a temporary extension via the browser UI, the browser complains:

Reading manifest: Error processing options_page: An unexpected property was found in the WebExtension manifest.

Loaded this way, the plugin only loads in new tabs opened thereafter. Confused by this, I went a level deeper, loading it via Mozilla’s CLI script, by running npx web-ext run --firefox=/Applications/FirefoxDeveloperEdition.app/Contents/MacOS/firefox-bin from the dist/chrome folder. This starts a “clean” Firefox with the extention loaded, and automatically reloads on changes. Nifty, but while it does not appear to change the outcome, it does make it easier to debug, since any other extensions you might have installed in your regular profile won’t disturb.

So, once properly rigged for debugging, I loaded a local Ember 2.15 app, that works fine with the inspector otherwise, and watched the fireworks. Here’s what I found:

1. The Ember [DEV] tab does show up in the developer tools. Due to errors in loading the Ember app inside, it remains blank.
2. Once the plugin is loaded, the console for the the Ember app I was trying to debug shows a bunch of errors that appears to be spilling out of the extension somehow – these errors do not appear without the plugin loaded:
3. When viewing the console of the extension itself, the same errors appear, plus even more severe errors:

I did compile the extension using Node 8.5.0, ignoring the compatibility protestations from the older version of ember-cli that the inspector currently uses. This might explain some of the issues.

I hope this is somewhat helpful. If anyone can point me in the right direction on where to look for solutions, I’ll be happy to dig further.

[locks]

@mikl thank you so much for taking the time to take detailed notes, screenshots and all!

[teddyzeenny]

@mikl there was a pending PR that was merged today to support Firefox WebExtensions. Do you mind checking if dist/firefox on latest master solves the issues you reported?

[mikl]

@teddyzeenny yes, with the latest master, on FF 57 beta 1, the plugin now loads and seems to work as expected.

However, the console is still full of warnings and errors, so something is not quite right:

Click to view screenshots of error console

Just the errors:

Errors and warnings:

[mattmarcum]

Cool - I was able to build and run the extension using this guide: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox

Is there a way to build and install a local copy permanently?

[andreicristianpetcu]

Zip-it then upload it here. You will get an unlisted but signed extension. If you upload it to a github repo as a release then you can install it with one click. Here is an example

[jsmestad]

For folks who come across this issue via Google (like I did). Here is how to get master into FF Quantum - http://blog.overstuffedgorilla.com/ember-inspector-working-on-firefox-developer-edition/

[teddyzeenny]

The inspector is now published as a WebExtension so you should be able to install it.

[clarkbw]

I'm seeing it here! https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/

🎉 🎈

[mikkopaderes]

@clarkbw, weird when I visit that link it still shows 2.0.6 for me and that's what's being installed in my browser.

[teddyzeenny]

@rmmmp a reviewer unfortunately disabled the addon on Firefox due to having unsafe-eval in the manifest file.