Add quick documentation about chrome extensions

[shadowcodex]

Just added a quick documentation to the docs/tutorial folder for using extensions directly in muon.

It introduces how to get access to chrome.ipcRenderer, and the important extensions. api hooks.

It also shows a sample of how to load an extension via interaction from the renderer thread.

[icaroharry]

Great contribution. That is an awesome feature of Muon but I have no idea how to use it.

[icaroharry]

When I try to use chrome://brave it won't load the extension. Otherwise, when I load directly a web page it works. Do you know what is the difference?

[shadowcodex]

Extensions should be loaded via the chrome-extension:// url which can be done in a new window or in a webview which requires chrome://brave/

[icaroharry]

Can you provide this live example, please?

[shadowcodex]

Not public yet, but soon

[icaroharry]

Another question. Does that trigger the extension popup? Do you know how to do that?

[shadowcodex]

No it doesn't you have to call it via chrome-extension://

[shadowcodex]

Added part to show how to call up an extension resource.

[kewde]

@shadowcodex

This is good work, docs are by far the most missing part of Muon imo (from app dev perspective).

[kewde]

So after a bit of toying with the following fix:

mainWindow.loadURL('chrome://brave/' + __dirname + '/index.html');

It also exposes the remote API which is basically a gold mine right?

$ const proc = chrome.remote.require('child_process')
undefined
$ const ls = proc.exec('ls')
undefined
$ ls.pid
9233

^executing processes from the Chrome debugging tool..

[shadowcodex]

That will be retired so use ipcRenderer to send messages to main thread and have main thread do the logic. Muon team will be removing the chrome.remote references.

…

On Tue, Feb 6, 2018 at 7:28 PM Kewde ***@***.***> wrote: So after a bit of toying with the following fix: mainWindow.loadURL('chrome://brave/' + __dirname + '/index.html'); It also exposes the remote API which is basically a gold mine right? $ const proc = chrome.remote.require('child_process') undefined $ const ls = proc.exec('ls') undefined $ ls.pid 9233 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#417 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABSR1c57ZKj5L912xDNlP4LMQNrr6RYkks5tSPxMgaJpZM4RP5ck> .

[kewde]

@shadowcodex is their an issue that's keeping track of the .remote() removal?

[kewde]

'chrome://brave/' + __dirname + '/index.html'

This doesn't work very well across operating systems.

On linux it will result in the following:

'chrome://brave//somepath/index.html'

The second double slashes (after keyword 'brave'), they are misinterpreted as the double slash for a protocol.
It will mess with router in frameworks like Angular and React. It will produce and error along the likes of:

Failed to execute 'replaceState' on 'History': A history state object with URL  cannot be created in a document with origin '' and URL '

Basically, it breaks the whole application.

Removing the / creates an issue on Windows, so we should make use of the path.join() or url.format() functions.

So if I can suggest a minor change to the way you load the URL in the BrowserWindow:

    mainWindow.loadURL(url.format({
      protocol: 'chrome:',
      pathname: path.join('brave', __dirname, 'index.html'),
      slashes: true
    }));

It becomes

'chrome://brave/somepath/index.html'

in a consistent way.

[shadowcodex]

@kewde yeah that's a good point.

You could also just do:

mainWinow.loadURL(path.join('chrome://brave', __dirname, 'index.html')

[shadowcodex]

I'm hoping when I get time I'll create a full demo on extension lifecycle management and leave it up on my github. I have some more refined ways of handling extensions and could strip it down to a bare minimum for people to use.

[shadowcodex]

@bridiver what do I need to do to get this PR moved forward?

[bsclifton]

++