I've been using Fluid App (OS X) in the past to create standalone desktop apps of specific web apps I want separated from the browser, have their own dock icon, and not have any of the regular browser fluff (toolbar, address bar, etc.). Fluid app, though, has been neglected for a long time and certain newer web apps (e.g. Inbox from Google) completely fail to load in it.
So I'm looking for a simple way to create a desktop app that will have a single window loading a single website, and I think that NW.js would be ideal for that.
What should be the configuration process for building such a simple desktop app for just a webview for a given URL, using NW.js?
If you simply want to open a single webpage in a NW.js program, it is exceptionally easy.
First make sure you read: https://github.com/nwjs/nw.js/wiki/How-to-run-apps
Especially the MacOS section.
Make a directory your_project/
create a file in your_project/package.json
Then configure package.json:
{
"main": "https://github.com",
"name": "github app",
"description": "Github demo app",
"version": "0.1.0",
"keywords": [ "demo", "node-webkit" ],
"nodejs": false,
"window": {
"title": "Github",
"icon": "logo.png",
"toolbar": false,
"frame": true,
"width": 1024,
"height": 768,
"position": "mouse",
"min_width": 400,
"min_height": 200
},
"webkit": {
"plugin": true
}
}
You can run nwjs from the nwjs.app/Contents/MacOS/nwjs path_to_your_project
Note the "nodejs": false option this disables the nodeapi for the application, if you end up needing nodejs in part of your application make sure what whatever webview you use had nodejs disabled as this is a major security flaw, do your research - do it right.
Also note that nothing is preventing the user to access content from other domains in the above example.
You will eventually want to look at packaging your application, which is also quite simple: https://github.com/nwjs/nw.js/wiki/how-to-package-and-distribute-your-apps
Related
I need to be able to launch my Electron app from the the browser (like sign in to Slack does). I know that I can add my protocol name to my Electron app using app.setAsDefaultProtocolClient(protocol[, path, args]) in Electron.
Then in electron-builder, I can use the package.json config build.mac with the extendInfo property to define "The extra entries for Info.plist". This however is the only instructions the docs give on how to use it.
What is the correct way add a protocol to the macOS info.plist using electron and electron-builder config build.mac.extendInfo and be able to use it as described?
(Posted a solution on behalf of the question author to move it to the answer space).
It now works with the following - I have added this to my Electron package.json:
"protocols": {
"name": "my-app",
"schemes": [
"my-app"
]
},
"mac": {
"target": "dmg",
"extendInfo": "my-app"
},
I have this in the electron.js:
app.setAsDefaultProtocolClient('my-app');
And this in my React browser client app code to launch the application from the browser:
document.location = 'my-app://open?url='
This question relates to how custom schemes are used to receive OAuth responses, as in my code sample which you can run locally, then use deep linking etc:
Code
Blog Post
Points of interest:
An interstitial web page returns control to the browser app - see this page
My package.json exposes the scheme for Electron deployment
This should give you something to compare against. Here is the key code:
INTERSTITIAL WEB PAGE INVOKING APP
window.addEventListener('DOMContentLoaded', function() {
var redirectUri = 'x-mycompany-desktopapp:/callback';
if (window.location.search) {
redirectUri += window.location.search;
}
document.getElementById('continueButton').onclick = function() {
window.location.href = redirectUri;
};
}
REGISTERING THE SCHEME
This gets picked up by Electron packager and included in platform specific binaries, resulting in OS specific registration:
"build": {
"protocols": {
"name": "finaldesktopapp",
"schemes": [
"x-mycompany-desktopapp"
]
}
},
RECEIVING NOTIFICATIONS
This enables the following code to work in the main side of the app, as specified in the main.ts file:
app.setAsDefaultProtocolClient(this._configuration.oauth.privateSchemeName);
Finally you register a callback that can parse the URL and take whatever is the appropriate action - completing a login in my case.
private _receiveNotificationInRunningInstance(privateSchemeUrl: string) {
}
The mechanics are a little tricky and the notification is received differently on macOS to Windows / Linux. See this source file and its comments which explain the details.
I wanted to try learning how to make a browser extension and tried doing the first official tutorial https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
When following everything here and going into a mozilla.org domain the extension does not put a red border around the site. It basically does nothing. (I know that content scripts are disabled on addon.mozilla.org)
I've carefully followed each step of the tutorial.
Here's the repository for the tutorial : https://github.com/mdn/webextensions-examples/tree/master/borderify
I just want to verify if I'm the only one with who this tutorial does not work.
The tutorial is fine. You can try changing it to another site and test again. For example:
{
"description": "Adds a solid red border to all webpages matching mozilla.org. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#borderify",
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/borderify",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.example.com/*"],
"js": ["borderify.js"]
}
]
}
Then go to https://example.com/ to test.
I had the same problem: the Borderify example was not working. In my case, it was a problem of my default browser's privacy settings.
Try going to Firefox settings and see if the option Always use private mode is disabled.
Alternatively, after loading the extension in debugging mode, go to the Add-Ons section and enable the extension for private windows.
I need to add a text as a privacy policy in the manifest. Where shall I add it in the manifest?
{
"developer": {
"name": ,
"websiteUrl": ,
"privacyUrl": ,
"termsOfUseUrl":
},
"description": {
},
"permissions": ["identity", "messageTeamMembers"],
"validDomains": [
"contoso.com",
"token.botframework.com"
]
}
How can i update this section?
#Anu The privacyUrl only accepts a URL. You cannot add a plain text as privacy policy in the manifest.
Are you using the App Studio tool from Microsoft? It's an app that installs directly into Teams itself, to help with various Teams development tasks, and one of these is to provide a nice graphical interface to create and edit your app manifest. In this tool you can capture the url to your privacy policy, wherever it is hosted (to confirm, it does need to be a url to a page hosted somewhere).
In the final manifest, if you do want to edit it by hand rather, it would look something like this:
"privacyUrl": "[your web address to your own policy goes here]",
I've created an extension with the following manifest to add a search engine to Firefox.
{
"manifest_version": 2,
"name": "Google Browse by Name search engine",
"description": "Adds a search engine that searches Google using its Browse by Name feature",
"version": "1.0",
"applications": {
"gecko": {
"strict_min_version": "55.0"
}
},
"chrome_settings_overrides": {
"search_provider": {
"name": "Browse by Name",
"search_url": "https://www.google.com/search?sourceid=navclient&gfns=1&q={searchTerms}",
"keyword": "bbn",
"favicon_url": "https://www.google.com/favicon.ico",
"is_default": false
}
}
}
This works as expected on Firefox desktop, adding an option to the list of enabled search engines. However, it does not appear to work on Firefox Android, I assume because chrome_settings_overrides is not supported on Android.
Addons making use of the legacy API appear to work correctly (e.g. Startpage), adding search engines to the Android browser, but since Firefox is dropping support for legacy (non webextension) extensions this is no longer a solution.
What is the correct way to add a search engine to Firefox for Android using an addon?
I am aware that users can add a search engine available on a webpage by long-pressing on its search field, but I would like to offer an extension to automatically install the search engine (and save users from having to find a page offering the correct search field).
This my seem childish but I have not found anything with any search in this forum - a very basic thing.
I have no experience with the Chrome environment or webkit - mine is with IE. but here goes...
Following along with the getting started tutorials - is fine - got to Finnur's using debug video link and ran into a confusing problem. He states that to inspect items not currently active with an unpackaged extension that is loaded - you enter chrome-extensions://[extension id]/options.html in the omnibar. The options.html file resides in the same folder as all other components dedicated to the extension. The problem: Every time I enter this info into the omnibar it brings up a web-search. through the preset default search engine. Cant seem to find a way to work offline or to turn off the search function.
So, I'm sure I am missing something very simple that all of your are very familiar with. I am using all the "getting started" files and a copy of the options.html found there. Options is grayed out in the drop-down menu of the extension but cant seem to load it.
MANIFEST.JSON
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"options_page": "options.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Very simple but cant seem to enter the options.html into the omnibar without having the search engine try to find it on the web and not in the folder.
The url should be chrome-extension://[extension id]/options.html not `chrome-extensions://[extension id]/options.html, notice theres no s at the end of extension in chrome-extension://.
Your manifest is a litlle malformed, the options_page shouldnt be in the browser_action field, try......
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
],
"options_page": "options.html"
}