Nativefier: Support packaging Chrome extensions

[priezz]

It wold be great to have the possibility to inject selected Chrome plugins into the app package. Is it possible to implement that?
As I use nativefier mostly for development, my idea is to have a few devtools preinstalled.

[jiahaog]

Hi, there are no plans to extend the app to support chrome plugins on a high leel, but you can use the --inject flag to run your own javascript

[jiahaog]

@priezz Are you referring to dev extensions or regular chrome extensions?

I think it might be possible to add chrome dev extensions to an electron app, as indicated here. Would someone like to look into it?

[priezz]

Yeah, I mean exactly dev extensions. Maybe will find time to take a look at it later, thanks.

[simonexmachina]

There is a solution provided by Electron for this:

http://electron.atom.io/docs/tutorial/devtools-extension/

How would this be integrated into a Nativifier app?

[plcosta]

@aexmachina This solution works fine to me. I used with Trello and ColorTitlesTrello extension .

nativefier "https://trello.com" --name Trello -i ~/Downloads/trello.png --inject "/<user_home_directory>/Library/Application Support/Google/Chrome/Default/Extensions/hpmobkglehhleflhaefmfajhbdnjmgim/1.0.1_0/override.css"

Thanks!

[iamaziz]

Hi there, any update on this issue ?

[noizo]

Would love to inject
https://chrome.google.com/webstore/detail/skype-calling/blakpkgjpemejpbmfiglncklihnhjkij

[johnnadratowski]

Love this project, started using it recently andit's fantastic.

I have a use case for an extension. I have nativefied my Gmail and would love to be able to use the Todoist extension for sending emails to Todoist in here.

[JuanCaicedo]

I found this tool, which might make some of it easier 😀 I'm not sure where that needs to be called, maybe within the scope that nativefier script runs in?

There is also more documentation about the underlying electron api

[fredox24]

can we use the print preview in chrome?

[fredox24]

can we use the print preview extensions in chrome?

[jebeld17]

I 100% agree with this. I would love to see Nativefier have an ability to include Chrome extensions out of the box. This can especially be good in situations in which I want to apply browser protection for Nativefier apps with my antivirus or internet security software.

[coldspark29]

Any news on this? :D

[kiprasmel]

I've done some digging about extension injecting into electron / nativefier. I've primarily attempted to inject an addblocker (ublock origin / adblock plus). The injection itself was successful, but both extensions did not work properly because, I assume, they require browser APIs that are not supported in Electron (see http://www.electronjs.org/docs/api/extensions#supported-extensions-apis).

This will still be useful if you want to try & inject other extensions.

---

injecting extensions into electron

it should be done inside Electron's main process -- see http://www.electronjs.org/docs/api/session#sesloadextensionpath for exact instructions. Their excerpt:

// main.js
const { app, session } = require('electron')
const path = require('path')

app.on('ready', async () => {
  await session.defaultSession.loadExtension(path.join(__dirname, 'react-devtools'))
  // Note that in order to use the React DevTools extension, you'll need to
  // download and unzip a copy of the extension.
})

now, you don't need to create the main.js file yourself -- it's already created by nativefier when you package an app with it.

Here's how I did it. I'll use youtube.com for the example:

nativefier \
    https://youtube.com \
    --name YouTube \
    --tray \
    --internal-urls "(.*?)(accounts\.google\.com|youtube\.com)(.*?)" \
    --user-agent 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:70.0) Gecko/20100101 Firefox/70.0'

(the last 2 options are necessary to allow you to sign in into youtube if wanted)

then cd into the created folder. For me, it was YouTube-linux-x64

then:

cd resources/app/lib/
ls -lah

you should see some files like main.js[.map], preload.js[.map], static/.

edit the main.js file -- search for app.on('ready'

if not already, make the function async

right inside the function, add this line (or lines for multiple extensions):

await electron_1.session.defaultSession.loadExtension(path_1.default.join("/PATH/TO/THE/UNPACKED/CHROME/EXTENSION/"));

you can find the path of the extension by installing the extension into chrome, navigating to chrome://extensions, finding the wanted extension (i.e. chrome://extensions/?id=pndboagckgcidceccglekpgodhhekdbk, taking it's id, locating the extension on your file system where it is installed (i.e. on linux, it was in ~/.config/google-chrome/Default/Extensions/) and then pasting that path into the quotes.

you can also clone and build the extension yourself if you want to and if it's available on i.e. github - just make sure it works on chrome itself before trying to load it in electron to avoid wasting time.

Note on patching nativefier itself

Note that this file (main.js) is compiled output from typescript, so in the future if it not longer works, you should instead clone nativefier, patch the main.ts file in resources/app/src/ (instead of lib) by finding the same app.on('ready', making it async and adding a normal call:

await session.defaultSession.loadExtension("/PATH/TO/THE/UNPACKED/CHROME/EXTENSION/");

and then following the build instructions and either copying the built main.js file into resources/app/lib of the apps that you previously built with nativefier, or rebuilding the apps with the patched nativefier.

---

see also:

• initial documentation about electron extensions: http://www.electronjs.org/docs/api/extensions
• electron's main process http://www.electronjs.org/docs/glossary#main-process

---

side note: if anyone can figure out how to make an addblocker work with electron / nativefier (especially if it works on youtube) -- please let me know -- big thanks

[ronjouch]

Thanks for the research, @kiprasmel 🙂

The injection itself was successful, but both extensions did not work properly because, I assume, they require browser APIs that are not supported in Electron.

Indeed. As stated by Electron docs / Chrome Extension Support, with the bold "non-goal" not my emphasis but from the official docs:

Electron supports a subset of the Chrome Extensions API, primarily to support DevTools extensions and Chromium-internal extensions, but it also happens to support some other extension capabilities.

Note: Electron does not support arbitrary Chrome extensions from the store, and it is a non-goal of the Electron project to be perfectly compatible with Chrome's implementation of Extensions.

Now, to comment on you question "if anyone can figure out how to make an ad blocker work with electron / nativefier (especially if it works on youtube) please let me know",

1. I suggest you try to address your issue (have ad blocking in Nativefier) by other means. See issue #177 - Support basic ad blocking (maybe through @cliqz/adblocker-electron, or another lib, or homebrew). That being said, something basic will be easy, but a robust adblocker (especially for youtube) will undoubtedly be a challenge.
2. Or see if there's a way to _port_ / _transform_ (with a tool transforming JS code into JS code replacing/shimming Chrome Extension API calls) existing Chrome extensions into "Nativefier-compatible" extensions.
3. Or be a hero and add support for the full Chrome Extensions API into Electron! (Good luck, see you in a few years 😄).

[kiprasmel]

Hey, thanks for the reply @ronjouch!

Could you elabore on the 2nd part?

Or see if there's a way to port / transform (with a tool transforming JS code into JS code replacing/shimming Chrome Extension API calls) existing Chrome extensions into "Nativefier-compatible" extensions.

do you perhaps have any idea what one need to transform / what APIs are available as replacements in nativefier (if they even exist?) and how would one transform the code? Babel & webpack? Thanks

[ronjouch]

Could you elabore on the 2nd part? Do you perhaps have any idea what one need to transform / what APIs are available as replacements in nativefier (if they even exist?) and how would one transform the code? Babel & webpack? Thanks

@kiprasmel not really, it was only a wild possibility I mentioned by the way, but I haven't investigated any of it, and you're totally right when asking A. whether replacements exist for all Chrome Extensions APIs, and B. which code transformation tooling would be .appropriate.