2
2
mirror of https://github.com/Llewellynvdm/nativefier.git synced 2025-01-09 00:21:10 +00:00
Go to file
Dominic Hopton e064f765cb Fix CSS & JavaScript injection (Fixes #703, Fixes #731, PR #732)
* Fix for CSS Injection not working (#703)

Issue:
When using `onHeadersReceived`, the code was passing `null` for the filters.
This appears to trigger behaviour that matches _no_ urls at all.
This results in it never being called to inject the CSS.

Fix:
Pass an empty array instead. Now it's called for all URLs.

Tests pass & linting is clean

* Fix JavaScript injection (#731)

Issue:
It appears that on low endd evices (Core m3 MacBook), the attachment to
`DOMContentLoaded` happens _after_ the event has been raised, so does
not have a chance to inject the script.

Fix:
Move the attachment to the top of the file -- before the imports. This
triggers a bunch of linting erros, so also added disablement inplace.

Additional:
Clarified when the injected JS gets loaded, and what it can assume about
the DOM.
2019-01-01 23:38:45 -05:00
.github ISSUE_TEMPLATE: Add common questions (#415) 2017-07-18 11:24:41 -04:00
app Fix CSS & JavaScript injection (Fixes #703, Fixes #731, PR #732) 2019-01-01 23:38:45 -05:00
bin Homogenize shebangs: convertTo{Ico,Png} 2018-04-26 09:49:24 -04:00
docs Fix CSS & JavaScript injection (Fixes #703, Fixes #731, PR #732) 2019-01-01 23:38:45 -05:00
e2e Separate e2e tests 2018-05-24 00:12:22 -07:00
gulp Make eslint happy 2018-07-21 09:16:02 -04:00
screenshots pngquant screenshot 2018-04-26 09:50:40 -04:00
scripts Remove quotes around changelog version 2017-04-30 02:54:47 +08:00
src Add --start-in-tray CLI flag to let app start in background (PR #564, Fixes #522) 2018-12-01 14:04:55 -05:00
test-resources Fix #480 - Move all console.* to loglevel.* calls, eslint-fail on console.* (PR #507) 2017-12-19 08:42:06 -05:00
.codeclimate.yml Fix ESLint contradiction between CodeClimate & npm run ci task 2018-11-30 20:53:02 -05:00
.dockerignore Run Nativefier with Docker (#311) 2017-05-19 21:21:16 +08:00
.editorconfig Integrate prettier 2018-05-24 00:02:44 -07:00
.eslintignore Use original eslint module for linting instead of gulp 2016-05-27 02:23:37 +08:00
.eslintrc.yml Integrate prettier 2018-05-24 00:02:44 -07:00
.gitignore Upgrade dependencies and default to latest Electron 1.7.9 (PR #483) 2017-11-14 08:05:01 -05:00
.hound.yml Don't run jshint on hound 2017-08-12 11:44:00 +08:00
.npmignore Do not npm ignore binaries 2016-02-25 12:27:10 +08:00
.npmrc Upgrade dependencies and default to latest Electron 1.7.9 (PR #483) 2017-11-14 08:05:01 -05:00
.prettierrc.yaml Integrate prettier 2018-05-24 00:02:44 -07:00
.travis.yml Travis: add Node.js 11 run 2018-11-30 21:09:17 -05:00
Dockerfile Fix #461 & address #375 in Docker: move Dockerfile to Debian and use wine32 (#488) 2017-11-24 10:28:59 -05:00
gulpfile.babel.js Update eslint and use Airbnb style 2017-04-29 22:52:12 +08:00
jest.config.js Separate e2e tests 2018-05-24 00:12:22 -07:00
LICENSE.md Split docs into multiple files 2016-03-13 15:27:32 +08:00
package.json Update changelog for v7.6.9 2018-12-01 14:07:47 -05:00
README.md README: fix typo (#723) 2018-12-14 08:37:08 -05:00
webpack.config.js Make eslint happy 2018-07-21 09:16:02 -04:00

Nativefier

Build Status Code Climate npm version Dependency Status

Dock

You want to make a native wrapper for WhatsApp Web (or any web page).

nativefier web.whatsapp.com

Walkthrough

You're done.

Table of Contents

Introduction

Nativefier is a command-line tool to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by Electron in an OS executable (.app, .exe, etc.) for use on Windows, macOS and Linux.

I did this because I was tired of having to ⌘-tab or alt-tab to my browser and then search through the numerous open tabs when I was using Facebook Messenger or Whatsapp Web (relevant Hacker News thread).

Changelog. Developer docs.

Features

  • Automatically retrieves the correct icon and app name.
  • JavaScript and CSS injection.
  • Flash Support (with --flash flag).
  • Many more, see the API docs or nativefier --help

Installation

Requirements

npm install nativefier -g

Usage

Creating a native desktop app for medium.com:

nativefier "http://medium.com"

Nativefier will intelligently attempt to determine the app name, your OS and processor architecture, among other options. If desired, the app name or other options can be overwritten by specifying the --name "Medium" as part of the command line options:

nativefier --name "Some Awesome App" "http://medium.com"

Read the API documentation (or nativefier --help) for other command line flags and options that can be used to configure the packaged app.

If you would like high resolution icons to be used, please contribute to the icon repository!

Windows Users: Take note that the application menu is automatically hidden by default, you can press alt on your keyboard to access it.

Linux Users: Do not put spaces if you define the app name yourself with --name, as this will cause problems when pinning a packaged app to the launcher.

Optional dependencies

Icons for Windows apps packaged under non-Windows platforms

You need Wine installed; make sure that wine is in your $PATH.

Icon conversion for macOS

To support conversion of a .png or .ico into a .icns for a packaged macOS app icon (currently only supported on macOS), you need the following dependencies.

  • iconutil (comes with Xcode).
  • imagemagick. Make sure convert and identify are in your $PATH.
  • If the tools are not found, then Nativefier will fall back to the built-in macOS tool sips to perform the conversion, which is more limited.

Flash

Google Chrome is required for flash to be supported; you should pass the path to its embedded Flash plugin to the --flash flag. See the API docs for more details.

How it works

A template app with the appropriate plumbing is included in the ./app folder. When nativefier is run, this template is parameterized, and packaged using Electron Packager.

In addition, I built GitCloud to use GitHub as an icon index, and also the pageIcon fallback to infer a relevant icon from a URL.

Development

Help welcome on bugs and feature requests!

Get started with our docs: Development, API.

Docker Image

The Dockerfile is designed to be used like the "normal" nativefier app. By default, the command nativefier --help will be executed. Before you can use the image, you have to build it:

docker build -t local/nativefier .

After that, you can build your first nativefier app to the local $TARGET-PATH. Ensure you have write access to the $TARGET-PATH:

docker run -v $TARGET-PATH:/target local/nativefier https://my-web-app.com/ /target/

You can also pass nativefier flags, and mount additional volumes to provide local files. For example, to use a icon:

docker run -v $PATH_TO_ICON/:/src -v $TARGET-PATH:/target local/nativefier --icon /src/icon.png --name whatsApp -p linux -a x64 https://my-web-app.com/ /target/

License

MIT