Support Electron

[natrim]

fails with error: chrome-api.js:124 responseCallback is not supported

Seems like electron does not support callback on sendMessage

(redux devtools seems to have had same problem before this pull zalmoxisus/redux-devtools-extension#158)

[xorgy]

Thanks for the report and investigation, there has been interest to support Electron and I suspected there might a silly little problem like this in the way. ;- )

I've gone ahead and converted this into a feature request; since it's more about Electron being quirky than Augury being broken. It can be planned for a future release, or the community could contribute a patch (should be simple enough).

[MarshallOfSound]

@natrim @xorgy I just implemented the responseCallback API inside Electron but it appears as though Augury doesn't actually use the callback.

See my comment on electron/electron#7970 (comment)

Can the Augury team provide any insight into what else could be going wrong?

[tomasro27]

Hello @xorgy,
First of all, thank you for your time and contribution to Augury, we really appreciate it.
We would love to use Augury to debug our Angular2 applications in electron, so it would be awesome if someone could take a look at this at some point in time.
Thank you so much, we look forward to using Augury in electron!

[tomasro27]

@sumitarora @vanessayuenn

[sumitarora]

@tomasro27 Will look into it meanwhile did you try this hack to make it work with electron. https://www.xplatform.rocks/2016/07/02/using-augury-inside-of-your-electron-apps/

[tomasro27]

Hi @sumitarora , thanks for your reply. I have tried the guide you posted, which is not a hack, but this is the official way of manually adding a dev extension to electron. The extension used to have an error in electron because electron didn't implement the responseCallback. After @MarshallOfSound implemented the responseCallback, the extension still doesn't work. It is being added to the dev tools, and you can see the extension tab with Augury name on it, but it doesn't work.
Let me know if there is anything I can help with.
Thank you for your time and help

[tomasro27]

Hello @sumitarora,
Do you have any updates on this issue?
Thanks

[mobinni]

@tomasro27 Hi, I'm Mo (also on the Augury team) do you have a piece of example code I use by chance?

[tomasro27]

hi @mobini,
I have created a repo (https://github.com/tomasro27/electron-angular2-sample) with a very basic electron app running angular2 code and with augury installed on it.

Follow the readme to run the electron app with augury.

Also, if you do 'npm start' from the boilerplate folder (After 'npm install'), you can run the app without electron. It will open with chrome if this is your default browser. There, you can see how Augury works fine. You have 'AppComponent' in the tree, and you can see the properties, etc. On the other hand, if you open the project with electron, the Augury tab is there, but there is no content to debug in component tree or anywhere.

Thanks for your help!

p.s. Electron uses chromium, and I have downloaded the latest version and tested Augury, and it also works.

[kwonoj]

@mobinni I just created simple bootstrap PR here (electron-userland/electron-forge-templates#1) , probably you can give those a try. when I tried augury it behaves same as others which showing tab only but does not display any components.

[mobinni]

@kwonoj @tomasro27 Hey, thanks for your help, the team will definitely look into this! @stevenkampen @rajinder-yadav

[tomasro27]

@mobinni any updates?

[tomasro27]

@rajinder-yadav any updates?
@sumitarora

Thanks

[luchillo17]

@mobinni Hi, seems it doesn't work, i've done a base project with Webpack and Typescript and it does not show any errors but also it doesn't show anything:

[mobinni]

cc @stevenkampen, could you address the issue above?

[luchillo17]

I have a public repo, want to take a look?
https://github.com/luchillo17/Electron-Webpack/tree/develop

[zh99998]

same for me.
just a electron quickstart + angular quickstart, and such code can reproduce such problem

const { default: installExtension } = require('electron-devtools-installer');
async function createWindow() {
    const Augury = 'elgalmkoelokbchhkhacckoklkejnhcd';
    await installExtension(Augury);
    mainWindow = new BrowserWindow ... // regular create windows process.
}

[enko]

I tried this with 9a412c3 and these steps:

• npm i
• npm run build:chrome

Added than this line in my init code:

BrowserWindow.addDevToolsExtension(path.resolve('C:/Users/tim/Datenknoten/dev/augury'));

Augury appears, but is completly empty.

In the console I see this:

[21996:0527/201813.941:ERROR:CONSOLE(1)] "Uncaught SyntaxError: Unexpected token c in JSON at position 2", source: chrome-extension://augury/frontend.html (1)

I'm having electron 2.0.0.

Can I do anything to support resolving this issue?

[robjtede]

I've been able to get the extension installed with electron-devtools-installer and installExtension('elgalmkoelokbchhkhacckoklkejnhcd') inside the app.on('ready', cb) callback.

(I'm using @ngtools/webpack to compile my app. While the extension is visible, nothing shows up in any of it's tabs for some reason. Another separate issue probably.)

[parliament718]

I'm also able to get this installed with electron-devtools-installer and I get a successful "Added Extension: Augury"

However, when my app loads the console prints:

ExtensionLoadWarning: Warnings loading extension at /Users/user/Library/Application Support/Electron/extensions/elgalmkoelokbchhkhacckoklkejnhcd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name metadata. Filenames starting with "" are reserved for use by the system.

I can't see the extension in devtools, even if i restart it.

Does anyone has a solution for this?

[parliament718]

Actually I'm able to get it installed via

const os = require('os');
import * as path from 'path';
import { app, session, ipcMain, BrowserWindow } from 'electron';

app.whenReady().then(async () => {
	const augury = path.join(os.homedir(), '/Library/Application Support/Google/Chrome/Default/Extensions/elgalmkoelokbchhkhacckoklkejnhcd/1.25.2_0');
	const ext = await session.defaultSession.loadExtension(augury)
	console.log(`Added Extension:  ${ext.name}`);
})

Then after the window open, if I restart devtools I do see the Augury tab but it said "Angular app is in production mode" (even though I do not call enableProdMode())

To get past that (sort of), I added "angularCompilerOptions": { "debug": true } in tsconfig.json

Now Augury loads (sometimes), but like robjtede, I also see no components listed in any of the tabs.

Every time I try to "reload" Augury the console prints:

[36040:0716/080443.111872:ERROR:CONSOLE(0)] "Unchecked runtime.lastError: "sync" is not available in this instance of Chrome", source: chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/frontend.html (0)

[SuthyMike]

Hi,

I am using Electron 9.1.2 and I have used both .loadExtension and electron-devtools-installer and been able to load Augury in dev tools, however, nothing is showing in the Augury tab and the following warning and errors print to the console

Warning:
(node:75175) ExtensionLoadWarning: Warnings loading extension at /Users/my_name/Library/Application Support/my_project/extensions/elgalmkoelokbchhkhacckoklkejnhcd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

Error:
[75175:0825/233821.092263:ERROR:CONSOLE(0)] "Unchecked runtime.lastError: "sync" is not available in this instance of Chrome", source: chrome-extension://baeiiejemakbdpkcgmeinkoijjhcbjbl/frontend.html (0)

Could someone take a look at this? Augury works great for versions of Electron before 9.x.x so it would be great to get it working for Electron 9+.