Implement injection of css

app/inject/inject.css

@@ -0,0 +1,3 @@
+* {
+  color: red;
+}

app/src/components/mainWindow/mainWindow.js

@@ -1,3 +1,4 @@
+import fs from 'fs';
 import path from 'path';
 import electron from 'electron';
 import windowStateKeeper from 'electron-window-state';
@@ -6,7 +7,7 @@ import createMenu from './../menu/menu';
 import initContextMenu from './../contextMenu/contextMenu';
 
 const {BrowserWindow, shell, ipcMain, dialog} = electron;
-const {isOSX, linkIsInternal} = helpers;
+const {isOSX, linkIsInternal, getCssToInject} = helpers;
 
 const ZOOM_INTERVAL = 0.1;
 
@@ -106,6 +107,7 @@ function createMainWindow(options, onAppQuit, setDockBadge) {
 
     mainWindow.webContents.on('did-finish-load', () => {
         mainWindow.webContents.send('params', JSON.stringify(options));
+        mainWindow.webContents.insertCSS(getCssToInject());
     });
 
     if (options.counter) {

app/src/helpers/helpers.js

@@ -1,5 +1,9 @@
 import wurl from 'wurl';
 import os from 'os';
+import fs from 'fs';
+import path from 'path';
+
+const INJECT_CSS_PATH = path.join(__dirname, '..', 'inject/inject.css');
 
 function isOSX() {
     return os.platform() === 'darwin';
@@ -19,9 +23,18 @@ function linkIsInternal(currentUrl, newUrl) {
     return currentDomain === newDomain;
 }
 
+function getCssToInject() {
+    const needToInject = fs.existsSync(INJECT_CSS_PATH);
+    if (!needToInject) {
+        return '';
+    }
+    return fs.readFileSync(INJECT_CSS_PATH).toString();
+}
+
 export default {
     isOSX,
     isLinux,
     isWindows,
-    linkIsInternal
+    linkIsInternal,
+    getCssToInject
 };

package.json

@@ -18,7 +18,7 @@
     "clean": "gulp clean",
     "build": "gulp build",
     "watch": "while true ; do gulp watch ; done",
-    "package-placeholder": "npm run build && node lib/cli.js http://www.bennish.net/web-notifications.html ~/Desktop --overwrite --name notification-test --icon ./test-resources/iconSampleGrey.png --inject ./test-resources/test-injection.js && open ~/Desktop/notification-test-darwin-x64/notification-test.app",
+    "package-placeholder": "npm run build && node lib/cli.js http://www.bennish.net/web-notifications.html ~/Desktop --overwrite --name notification-test --icon ./test-resources/iconSampleGrey.png --inject ./test-resources/test-injection.js --inject ./test-resources/test-injection.css && open ~/Desktop/notification-test-darwin-x64/notification-test.app",
     "start-placeholder": "npm run build && electron app",
     "release": "gulp release"
   },

src/build/buildApp.js

@@ -25,30 +25,53 @@ function buildApp(src, dest, options, callback) {
 
         fs.writeFileSync(path.join(dest, '/nativefier.json'), JSON.stringify(appArgs));
 
-        maybeCopyScripts(options.inject, dest, error => {
-            if (error) {
-                callback(error);
-                return;
-            }
-
+        maybeCopyScripts(options.inject, dest)
+            .then(() => {
                 changeAppPackageJsonName(dest, appArgs.name, appArgs.targetUrl);
                 callback();
+            })
+            .catch(error => {
+                callback(error);
             });
     });
 }
 
-function maybeCopyScripts(src, dest, callback) {
+function maybeCopyScripts(srcs, dest) {
+    const promises = srcs.map(src => {
+        return new Promise((resolve, reject) => {
             if (!fs.existsSync(src)) {
-        callback();
+                resolve();
                 return;
             }
 
-    copy(src, path.join(dest, 'inject', 'inject.js'), error => {
-        if (error) {
-            callback(`Error Copying injection files: ${error}`);
+            let destFileName;
+            if (path.extname(src) === '.js') {
+                destFileName = 'inject.js';
+            } else if (path.extname(src) === '.css') {
+                destFileName = 'inject.css';
+            } else {
+                resolve();
                 return;
             }
-        callback();
+
+            copy(src, path.join(dest, 'inject', destFileName), error => {
+                if (error) {
+                    reject(`Error Copying injection files: ${error}`);
+                    return;
+                }
+                resolve();
+            });
+        });
+    });
+
+    return new Promise((resolve, reject) => {
+        Promise.all(promises)
+            .then(() => {
+                resolve();
+            })
+            .catch(error => {
+                reject(error);
+            });
     });
 }
 

src/cli.js

@@ -7,7 +7,13 @@ import program from 'commander';
 import nativefier from './index';
 const packageJson = require(path.join('..', 'package'));
 
+function collect(val, memo) {
+    memo.push(val);
+    return memo;
+}
+
 if (require.main === module) {
+
     program
         .version(packageJson.version)
         .arguments('<targetUrl> [dest]')
@@ -31,7 +37,7 @@ if (require.main === module) {
         .option('--ignore-certificate', 'ignore certificate related errors')
         .option('--insecure', 'enable loading of insecure content, defaults to false')
         .option('--flash <value>', 'path to Chrome flash plugin, find it in `Chrome://plugins`')
-        .option('--inject <value>', 'path to a javascript file to be injected')
+        .option('--inject <value>', 'path to a file to be injected', collect, [])
         .parse(process.argv);
 
     if (!process.argv.slice(2).length) {

test-resources/test-injection.css

@@ -0,0 +1,3 @@
+* {
+  color: blue;
+}