We have an electron crypto app that signs transactions (among other things).
We want other websites to have the ability to have a button that opens that electron app, pre-filled with some params (the transaction information).
flow is:
user clicks "make transaction" on some-crypto-site.com
electron app opens up with pre-filled params
user clicks "sign transaction" in electron app
electron app does stuff behind the scenes
electron app closes and sends a message to some-crypto-site.com
This could be done at runtime, or install time.
What I tried (linux, chrome)
calling app.setAsDefaultProtocolClient with the code of this gist, which is basically:
app.setAsDefaultProtocolClient("my-app")
But after I put my-app://foo?bar=baz in chrome browser, I get the following popup, and pressing open-xdg does nothing (other than dismissing the popup)
I looked into
Electron protocol api which seems to handle in-app protocols only
webtorrent .desktop file This might be the way to go, I'm just not sure how to go about it.
Maybe there's a way to do so at install time through electron builder?
Thanks in advance for the help, I have no idea how to proceed here!
Resources that might be useful
github repo with mac+window example
github comment for linux
github comment for linux 2
SO answer for all 3 OSs
SO windows answer
npm package for windows registery
SO mac answer
SO linux answer
microsoft docs for windows
windows article
github comment for windows
github comment for mac
info.plst for mac
old repo for mac and win
Since this may be relevant to what I’m doing at work, I decided to give it a go.
I’ve only tested this on OSX though!
I looked at the documentation for app.setAsDefaultProtocolClient and it says this:
Note: On macOS, you can only register protocols that have been added to your app's info.plist, which can not be modified at runtime. You can however change the file with a simple text editor or script during build time. Please refer to Apple's documentation for details.
These protocols can be defined when packaging your app with electron-builder. See build:
{
"name": "foobar",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"dist": "electron-builder"
},
"devDependencies": {
"electron": "^3.0.7",
"electron-builder": "^20.38.2"
},
"dependencies": {},
"build": {
"appId": "foobar.id",
"mac": {
"category": "foo.bar.category"
},
"protocols": {
"name": "foobar-protocol",
"schemes": [
"foobar"
]
}
}
}
In your main thread:
const {app, BrowserWindow} = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadFile('index.html');
}
app.on('ready', createWindow);
var link;
// This will catch clicks on links such as open in foobar
app.on('open-url', function (event, data) {
event.preventDefault();
link = data;
});
app.setAsDefaultProtocolClient('foobar');
// Export so you can access it from the renderer thread
module.exports.getLink = () => link;
In your renderer thread:
Notice the use of the remote API to access the getLink function exported in the main thread
<!DOCTYPE html>
<html>
<body>
<p>Received this data <input id="data"/></p>
<script>
const {getLink} = require('electron').remote.require('./main.js');
document.querySelector('#data').value = getLink();
</script>
</body>
</html>
Example
open in foobar
This also allows you to launch from the command line:
open "foobar://xyz=1"
How do you get back to the original caller?
I suppose that when you launch the app you could include the caller url:
<a href="foobar://abc=1&caller=example.com”>open in foobar</a>
When your electron app finishes processing data, it would simply ping back that url
Credits
Most of my findings are based on:
From this GitHub issue
And the excellent work from #oikonomopo
All little bit different from above.
open-url fires before the ready event so you can store it in a variable and use within the widow did-finish-load.
let link;
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1280,
height: 720,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.openDevTools();
mainWindow.setContentProtection(true);
mainWindow.loadFile('index.html');
mainWindow.webContents.on("did-finish-load", function() {
mainWindow.webContents.send('link', link);
});
}
app.on('ready', createWindow);
// This will catch clicks on links such as open in foobar
app.on('open-url', function(event, url) {
link = url;
if (mainWindow?.webContents) {
mainWindow.webContents.send('link', link);
}
});
app.setAsDefaultProtocolClient('protocols');
You can then use the value in your render html like this.
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
const ipc = require("electron").ipcRenderer;
ipc.on("link", function (event, url) {
console.log(url);
console.log(parseQuery(decodeURI(url)));
});
function parseQuery(queryString) {
queryString = queryString.substring(queryString.indexOf("://") + 3);
var query = {};
var pairs = (queryString[0] === "?" ? queryString.substr(1) : queryString).split("&");
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split("=");
query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || "");
}
return query;
}
</script>
</body>
</html>
Related
I'm trying to use a preload script to work around a CORS header issue in Electron 4.2.3. However, I can't get the preload script to run. A minimal reproduction case:
package.json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"dependencies": {
"electron": "^4.2.3"
}
}
main.js
const { app, BrowserWindow } = require('electron')
app.on('ready', function() {
const win = new BrowserWindow({
webPreferences: {
preload: `file://${__dirname}/preload.js`,
}
})
win.webContents.openDevTools()
win.loadFile('index.html')
})
preload.js
window.preloadWasRun = 'preload was run'
index.html
<body>
<script>
document.write(window.preloadWasRun || 'preload was not run')
</script>
</body>
No matter what settings I use for webSecurity, nodeIntegration and contextIsolation, it seems that my preload script is just getting ignored. Even if I make a syntax error in the script, it doesn't show any errors anywhere.
Turns out it has to be an absolute path name, not an absolute URL. None of these work:
preload: `file://${__dirname}/preload.js`,
preload: './preload.js',
preload: 'preload.js',
But this works as advertised:
preload: `${__dirname}/preload.js`,
Since it seems to be a filesystem path rather than a URL, it might also be wise to use path.join instead, to account for platforms with weird path separators:
preload: path.join(__dirname, 'preload.js'),
Context
I'm using parcel-plugin-sw-precache which wraps around sw-precache to make it work with Parcel.js. Everything was working as expected, and I have been testing my offline app.
Problem
I added react-pdf.js into my project, one of the dependencies for this library doesn't get added into the service worker when it is generated by the sw-precache. I know this because the file "pdf.worker.entry.7ce4fb6a.js" gives a 304 error when I switch to offline mode.
What I have tried
I'm trying to add the file manually to the package.json parcel-plugin-sw-precache config using this code:
"sw-precache": {
"maximumFileSizeToCacheInBytes": 10485760,
"staticFileGlobs": [
"/pdf.worker.entry.7ce4fb6a.js"
]
},
I'm not sure if the file path should be relative to package.json or relative the generated service worker. In anycase, the manually specified file doesn't get added to generate services worker as I would expect. As seen below.
self.__precacheManifest = [{
"url": "index.html",
"revision": "ac5ace7a43a0fef7ae65fd3119987d1f"
}, {
"url": "castly.e31bb0bc.css",
"revision": "657409f7159cb857b9409c44a15e653f"
}, {
"url": "castly.e31bb0bc.js",
"revision": "018d4664d809ec19d167421b359823ad"
}, {
"url": "/",
"revision": "af5513bb330deae3098ab289d69a40c7"
}]
The question
If the sw-precache or parcel-plugin-sw-precache seem to be missing some files, how can I make sure they get added to the generated service worker?
In my exploration for an answer. I gave up on using parcel-plugin-sw-precache and instead I switched to using workbox. If you are interested in creating an offline app with Parcel.js. Then I recommend Workbox as it is the next generation of sw-precache.
There is how I got it working:
Learning
Learn what Workbox is and what is does with this code lab.
Implimenting
1) Install the Workbox CLI globally.
2) create a placeholding service worker in the root directory. e.g. sw_shell.js
- The shell is a holding file. The Workbox wizard will pick it up and generate a
new sw.js file automatically.
3) Add to the sw_config.js the following code:
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
if (workbox) {
workbox.skipWaiting();
workbox.clientsClaim();
workbox.precaching.suppressWarnings();
// The next line came from the code lab
workbox.precaching.precacheAndRoute([]);
workbox.routing.registerNavigationRoute("/index.html");
} else {
console.log(`Boo! Workbox didn't load 😬`);
}
4) Run this code from a command line opened in your project's root directory.
workbox wizard --injectManifest
5) Follow the steps in the wizard. For dev purposes point the "root web app" to your parcel dist folder. Workbox does it's magic and picks up those files to be hashed into a new sw.js file.
6) The wizard will ask for your existing sw.js file. In my case I use the sw_shell.js.
a:Workbox picks up the sw_shell.js.
c:Generates as new sw.js file in a location specfied when running the wizard, and injects the files to run offline.
In my case I let the new sw.js generate in my root folder because Parcel picks it up automatically as per the script in my index.js.
'use strict';
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('sw.js').then(function(reg) {
console.log('Worker registration started')
reg.onupdatefound = function() {
console.log('update found')
var installingWorker = reg.installing;
installingWorker.onstatechange = function() {
console.log('installing worker')
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
console.log('New or updated content is available.');
} else {
console.log('Content is now available offline!');
}
break;
case 'redundant':
console.error('The installing service worker became redundant.');
break;
}
};
};
}).catch(function(e) {
console.error('Error during service worker registration:', e);
});
});
}
7) Add workbox injectManifest to your package.json to make sure Workbox picks up any changes to your files:
"scripts": {
"start": "parcel index.html workbox injectManifest"
}
Let me know if you want to know more about this. There is a video here that helped me a little bit also.
When I install my web app to homescreen on Android without a service worker, everything works as expected. I can click my home screen icon and my app launches with a splash screen and then I see my app in fullscreen mode. When I add in the service worker registration code and install to home screen, my app launches in a browser window and seems to ignore my manifest file.
Something to note is that without the service worker my app only has an icon on the homescreen. with the service worker code it becomes fully installed with the "new improved add to home screen" and there is an icon on my home screen as well as in my installed apps panel.
Here is my code:
web-app.html:
<!DOCTYPE html>
<html>
<head>
<title>Web App</title>
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta name = "mobile-web-app-capable" content = "yes">
<link href = "manifest.json" rel = "manifest">
<link href = "web-app.css" rel = "stylesheet" type = "text/css">
<link href = "web-app.png" rel = "icon" type = "image/png">
</head>
<body>
<h1>Android Web App!</h1>
<img src = "/web-app.png">
<p>This page can be viewed in any browser, but it can also work in a web app! If you are viewing this page in a full screened webview on your mobile device, you are looking at a fully functional web app! You can use this technology to better connect with your users or create a full screen mobile experience for your HTML5 games!</p>
<script type = "text/javascript">
navigator.serviceWorker.register("web-app-service.js");
</script>
</body>
</html>
manifest.json:
{
"author": "PoP Vlog",
"background_color": "#ffffff",
"description": "Progressive Web App Example with Offline Mode",
"display": "fullscreen",
"icons": [{
"src": "/web-app.png",
"sizes": "192x192",
"type": "image/png"
}],
"lang":"en",
"manifest_version": 2,
"name": "Web App",
"orientation": "portrait",
"scope":"/",
"short_name": "Web App",
"start_url": "/",
"theme_color": "#ffffff",
"version": "0.2"
}
web-app-service.js:
self.addEventListener("install", function(event) {
event.waitUntil(caches.open("web-app").then(function(cache) {
return cache.addAll([ "/", "/web-app.html", "/web-app.css", "/web-app.png"]).then(function() {
self.skipWaiting();
});
}));
});
self.addEventListener("activate", function(event) {
event.waitUntil(self.clients.claim());
});
self.addEventListener("fetch", function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
return response || fetch(event.request);
}));
});
I couldn't find a lot of documentation on this, but clearly the behavior changes when I remove the service worker registration code from my html document. I suspect that the problem lies in my web-app-service.js file.
EDIT: 11/01/2017
When I completely comment out my fetch event listener, my app works as expected, but add to home screen only installs an icon on my home screen. When I add to home screen with the fetch event listener, I get a full install of my web app into my apps panel and my app only opens in a browser window with full url bar and everything. This problem has something to do with adding the fetch capability to my service worker.
EDIT 11/08/2017
I have discovered that I only have this problem on my Node JS HTTPS test server when accessing my web app through a local IP address. The web app works fine when I run it from my Github Pages site. This leads me to believe it is a problem with scope in the app manifest or perhaps my Node server.
In manifest.json change "display": "fullscreen" to "display": "standalone".
It'll launch your app in App like view.
For more info refer https://developer.mozilla.org/en-US/docs/Web/Manifest
With the new firefox webextensions: Is there a way to save the current page (or a part of it) as html (or text) to disk? If not, how are the chances, such an API will be implemented in the future?
I didn't find any suitable API and appreciate any help.
Regards
There are probably several ways to do this. The following will get you started. It saves the webpage in the currently focused tab in the active window to the browser's default downloads path. The file name is set to 'samplePage.html' (you can change that by modifying the filename value in the downloads.download() options; or you can remove that field entirely and leave it to the default naming).
You will need to store icon images in your webextension package for the user to be able to click on. Also, be sure to navigate to a webpage you want to save before you try to use the webextension; webextensions are not active on the Firefox about:debugging page.
manifest:
{
"name": "SavePage",
"version": "1.0",
"description": "Clicking browser icon saves page html",
"manifest_version": 2,
"icons": {
"48": "icons/clickme-48.png"
},
"permissions": [
"tabs",
"activeTab",
"downloads"
],
"browser_action": {
"default_icon": "icons/clickme-32.png"
},
"background": {
"scripts": ["background.js"]
}
}
background script:
/* BACKGROUND SCRIPT
Clicking on browser toolbar button saves the webpage in the
current tab to the browser's default downloads path with a
filename of "samplePage.html". The "tabs" and "downloads"
permissions are required.
*/
browser.browserAction.onClicked.addListener((tab) => {
var currentUrl = tab.url;
function onStartedDownload(id) {
console.log(`Started to download: ${id}`);
}
function onFailed(error) {
console.log(`Something stinks: ${error}`);
}
var startDownload = browser.downloads.download({
url : currentUrl,
filename: 'samplePage.html'
});
startDownload.then(onStartedDownload, onFailed);
});
An alternative approach might be to try to save the webpage to local storage rather than to disk. I have not explored that option.
These pages may be helpful:
downloads.download()
browserAction.onClicked
There may be security risks in giving a webextension these permissions. You will have to weigh the risks for your own usage pattern.
I'm trying to use vue.js inside electron app but getting the following error:
Uncaught Exception: ReferenceError: document is not defined
at query (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:1070:10)
at Vue._initProps (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:7254:23)
at Vue._initState (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:7235:10)
at Vue._init (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:2394:10)
at new Vue (/Users/LM/Documents/mongoui/node_modules/vue/dist/vue.common.js:9000:8)
at Object. (/Users/LM/Documents/mongoui/main.js:11:1)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
This is how I load vue.js inside main.js:
var Vue = require('vue');
new Vue({
el: "#app",
data: {
collections: [
{"name": "test 1"},
{"name": "test 2"},
{"name": "test 3"}
]
}
});
Given your error:
Uncaught Exception: ReferenceError: document is not defined at query
I would assume you're trying to use Vue inside of the Main Process, which unfortunately Vue wont be able to do without something like jsdom, since Vue depends on the document, and the main process doesn't have a document.
But, I assume the issue starts more fundamentally. You're probably wanting to use Vue from a Render Process, since that's where the document can be accessed.
Essentially, the main process in Electron is like the all-mighty controller, it is where you spawn and manage render processes. It doesn't reference to any singular DOM because no DOM exists in the main process. Instead, consider render processes, render processes are things like BrowserWindow, which can have a DOM.
So, with that information, we could try something like this:
main.js:
// import { app, BrowserWindow } from 'electron';
var electron = require('electron'),
app = electron.app,
BrowserWindow = electron.BrowserWindow;
app.on('ready', function() {
var main = new BrowserWindow({ /* ... */ });
main.loadURL('file://' + __dirname + '/index.html');
});
Then, from your render process:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script>
var Vue = require('vue');
new Vue({
el: "#app",
data: {
collections: [
{"name": "test 1"},
{"name": "test 2"},
{"name": "test 3"}
]
}
});
</script>
</head>
<body id='app'>
</body>
</html>
Of course you can reorganize the files however you want to, just remember to use Vue inside of the render process instead of the main process.
Edit 11/4/2016
Vue has server side rendering now too which you might want to look at.