From the command line, or from an application, I want to open a NEW browser instance with a specified size and position, and pointed to a specific URL. I want to open a browser that acts like a dialog box. Ideally, I'd like to be able to disable "decorations" (like tabs, bookmarks, etc.). I do not want to open a new tab or pop-up window from an existing browser instance.
I know Electron or Node Webkit do this, but I just want to open a browser as that acts as a GUI front end for whatever back end I'm building.
I'd be happy if it would work for a specific browser; say, Chrome, or Chromium.
So, for instance, a Python app (or C/C++, Java, etc.) could start it's web server, then open a browser of the proper size, pointed to "localhost:xxxx/whatever.html", and serve up data via AJAX.
Kind of a universal single page app front end...
UPDATE (SOLUTION?)
The answer seems to be in two parts: 1) Opening the browser with command line switches, and 2) Resizing the window in JavaScript.
Using chromium (or Chrome), on the command line:
chromium-browser --new-window --app=http://192.168.1.80:8080/index.html
Then, within your JavaScript:
window.resizeTo(800,500)
This will bring up a new window and resize it.
This is great. Now, I can make an app in any language that allows me to open a web server. The user interface is done in HTML, CSS, and JavaScript. The browser is opened from within the application using the proper command line switches.
Electron does simply open up one or multiple browser windows, you can set them to any url via BrowserWindow.loadURL(url) this could be https://google.com https://localhost:1337 (Your backend webserver) or a local HTML file. The BrowserWindow can be created with information such as size and position.
The only alternative would be something like Qt HTML5 applications that use Qt WebEngine, but this does basically the same thing since Electron and Qt WebEngine use chromium.
Also, there is no point in a single page app that runs without JavaScript.
Related
I am trying to make a custom web browser inside an electron application. Using webview (because iframe is not loading some necessary web pages) I can load a web page.
Then trying to write something into the web page´s input by clicking on the react-simple-keyboard which causes blur event, so input loses focus.
I figured out, that this approach would not work directly, so via ipc communication I am trying to resend the key button value and then set it to the window with const {keyboard} = require("#nut-tree/nut-js"); keyboard.type(args.value);
In my input, above the webview tag, it works like a charm, but I am not able to type inside the webview.
Can anyone help me to solve this problem or does anyone know a perfect solution how to use other OSK in electron app or how to open native windows osk on input focus? Thank you in advance.
I'm not sure how you'd accomplish that with this library. But you can just use Window's default on-screen-keyboard to accomplish that. Here is a link to how enable it. windows support
You should also use a BrowserView instead of a Webview, as the Webview is not guaranteed to be present in future versions and it's API is unstable.
The BrowserView doesn't work like an HTML element though and you should read the docs here.
But anyways, just use the system's default and you should be fine.
Also, if you're interested, I'm developing a web browser with Electron (in fact, I'm currently writing this using that browser) and as far as I can say, it's written pretty simply and anyone should understand most of it, so take a look if you're in trouble. But I am no expert and you shouldn't rely on my code as a standard of any kind, really.
Well, I might have just found an answer for you.
Firstly, as I mentioned, you should use a BrowserView instead of webView for your external content, and this time it is a requirement for this method to work. I would create a BrowserWindow with the controls at the top, then place a BrowserView to act as a "browser" and create another BrowserView at the bottom and load in the keyboard html file. And then, when a key is pressed on the virtual keyboard, you should send an ipc message to the main script with the information of what key was pressed(it should be done via a preload script for the OSK BrowserView). In the main script, once you recieve the ipc message (via ipcMain.on()) you should then send an input event to the BrowserView containing your external content. That's done by calling contents.sendInputEvent(Event), so it has to be a main script. Here is a link to contents.sendInputEvent(Event), BrowserView (link) and preload script as well as ipc communication (link).
As for invoking the keyboard once you click on the input element, you could probably do it with a preload script for your "browser's" BrowserView, if you can find how you can check whether the focused element is an input element or something like that, and call an ipc message to then hide or show the keyboard. (Hiding and shwoing the keyboard could be done by calling BrowserWindow.addBrowserView(BrowserView) or BrowserWindow.removeBrowserView(BrowserView). But you would have to search the documentation yourself for those methods as I can't write anymore right now. Documentation could anwser any of your questions if you search for it there.
I created a Safari Web Extension using the script that generates the project from a Chrome extension.
My users are confused by the process of buying the app and then running it which just opens a window that does nothing (they keep asking for refunds saying the app doesn't work). So I want to add some more text into the app window that tells them they have to look for the extension in Safari.
I can see how to add the text in the html file called "Main". But in my Mac app this means that the content no longer fits within the apps window. I'm trying to figure out how to change the size of the app window.
Also, the script generates a Mac app with a help menu but it just says that help is not available. How do I go about adding some help to explain that this App does nothing and that the extension is in Safari?
It seems like the script does a lot of the work for you but you still have to learn a bit about developing an App (rather than an extension) to make it a polished experience.
Using Application Modeller I indentified some HTML elements on a Chrome web page (for clicking on stuff, fill input fields...)
When my bot clicks 'Attach' button, the Chrome will open the Chrome open tool (where you can browse for files). My problem is that I can't identify elements inside that open tool. I used some writers to type in the path field and file name field the path and the file name, but the bot is acting like the Chrome open tool does not exist. Do you have any idea about how can I make the bot complete those fields?
It's common that browsers (for security, among other reasons) will spawn these file browser windows as separate processes. This means that Blue Prism won't see the resulting window as a part of the same browser.
You'll need to either create a new object to attach directly to the window, or detatch and re-attach to the file chooser window once you've opened it. Attaching by the "Window Title" is usually the quickest and easiest way to target these.
Once you've attached to the file chooser window, you should be able to spy the interface elements there. If you're using the detatch and re-attach functionality within your preexisting Business Object, don't forget to detatch and re-attach to your browser instance once you've completed the required actions in the file chooser window.
I'd like to use my chrome extension to create and manage the focus for windows in my Progressive Web App. Focusing windows works well, but whenever I try to create a new window using chrome.windows.create(), the url loads into a new web browser window and not within the PWA. Is there a way to get chrome to recognize that a url within that scope should always load within the PWA?
My app requires allowing the user to micromanage their window focus to keep their workflow fast, and unfortunately vanilla .open() and .focus() have loads of limitations within chrome.
Ok, this may sound as a very strange question, but nevertheless.
What I want is to have a separate browser application (on mac) with some fixed set of tabs that will be reseted on each start of this app. For example, I use a bunch of web applications for work (gitlab, toggle, forge, etc) and I want to use them separately from other sites, in separate application.
Can this be achieved with any browser, or maybe quickly built with some SDK or in any other way?
For now the most close thing I've found is this: http://www.sitepoint.com/tabbed-browser-node-webkit-angularjs/
But the approach.. You use a single webview, fake tabs in js and use iframe to display content. It should work, but I wonder, if there is a better way?
You can create different profiles on chrome and set them up to start up with the list of tabs you need for each profile.
each profile is virtually a sandbox with it's own storage cookies sessions etc, so you can have different user logins for each profile.
It'll look something like this:
Create a desktop shortcut that will point to chrome, stating the profile and the list of websites you want to open by default (separated with spaces):
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --profile-directory="Default" https://google.com https://gmail.com
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --profile-directory="Profile 1" https://github.com https://twitter.com
You can find your chrome profile directories in:
%localappdata%\Google\Chrome\User Data