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.
Related
I'm new to Chrome extension development, and I'm a bit struggling with the architecture to put in place.
I would like to develop an extension (browser_action), that, when the button is clicked, opens a window where information will be populated from the WebTraffic.
I figured out I could use the WebRequest API to get info about the traffic.
I could create a popup window, but it's displayed only when I click on the extension button, and hides as soon as I click somewhere else
I tried creating a background window, but it does not show up.
I'd be very grateful if anyone could help me with the initial setup of my application.
Thanks in advance
You need both.
Take a look at the Architecture Overview, or maybe this question.
The lifetime of the popup is indeed equal to how long it stays on screen. It's the UI part, but putting logic there is usually bad.
A background page is permanently there but invisible. It's typically the "brain" of an extension, taking care of heavy lifting and routing messages to other parts.
In short:
You need a background script to collect webRequest information for you in some format.
You need a popup page to show it. Keep in mind it's not guaranteed to be present at a given time and can close at any time.
It's probably best to use Messaging to request the information from the background page. If you need real-time updates, you can use long-lived connections.
In your case you can also tightly couple the two and call chrome.runtime.getBackgroundPage() to directly reference stuff in it.
When launching the Chrome Extension Google-Hangouts, a panel initially appears that lists members and a link/button to create a new Hangout.
This panel is initially pinned to the bottom right of the browser window. When pinned like this, it remains always on top as a browser navigation session continues: users can go to different URLs, change tabs, etc. and that panel stays at the bottom right and stays on top of all other windows (or at least on top of the main browser window).
Once it's unpinned, you can drag it around the window, but it no longer stays always on top.
My question is, how was that achieved - what code, or what functions, do i need to call to create that window/panel so that it stays initially pinned and always on top? Is there some binding to some native code that's involved? Some other approach?
If anyone know and can show or explain, i would be hugely grateful as this feature is key to an extension i'm trying to build.
Thanks a lot!
This may not be an answer but to get a clue of what is happening I extracted the crx file to view its content there are a few OS specific files : ace.dll , libace.so and ace. After researching a bit i found this. This is a plugin. Hangouts extension is using ace plugin which is actually running on your desktop(i'm not sure about this). You can check this article
I found this related post: How to build an chrome extension like Google Hangouts
ACE is actually not what makes the window, Chrome has that capability built in, apparently. Even if you don't enable panels, extensions from Google can still make them, provided your OS is capable.
I am embedding an org.eclipse.swt.browser.Browser into a view in a modified eclipse (Indigo), for use as a preview pane of a form editor component. On a form model change or an element selection change the code renders the form via vaadin 6 and displays it in the browser component.
Now, this works like a charm in most cases. But for some highly complex forms the HTML+JS generated by vaadin generates a lot of stress on the browser, rendering it unresponsive for up to a few seconds. That in itself wouldn't be tragic (1), but as long as the SWT Browser component is busy rendering that stuff, the entire eclipse UI thread is blocked.
A simple way to reproduce this is to create an HTML page that blocks inside a javascript function (see https://gist.github.com/creinig/5150747 for an example) and display it in the SWT browser. As long as that JS function is running, the entire SWT application is not responding to anything.
The only info I've found on this problem are
one SO question (without resolution) and
one question on EclipseZone (unanswered).
Not that helpful :(
The API docs of the Browser component don't seem to offer any insight on whether its rendering is triggered periodically by the UI thread or if itself triggers something that blocks the UI.
Is there a way to decouple the Browser component's rendering from the SWT UI thread? Or anything else that could be done to protect the eclipse UI from hanging stuff in the browser?
(1): We need forms of this complexity level, we're already optimizing the rendering performance and a switch to vaadin7 will most likely also speed things up. But the problem will certainly persist, if only in reduced severity.
Not a real solution, but a workaround that Works For Me (TM):
As described here it is really easy to launch the system's default browser from SWT. So I'm going to add an option to the view containing the browser control that will "detach" the view by disabling the browser control and opening the system browser instead.
In case the linked page drops off the net, here's the gist:
org.eclipse.swt.program.Program.launch("http://my.funny.url/");
launches the application registered for HTTP URLs. In other words: the system default browser.
Happiness ensues :)
Say someone else has a website generated by JavaScript, so I can't go look at the source and read what should be on the screen. How can I grab the text on the screen so I can feed it into another program? Also, how can I write a program that automatically clicks on radio buttons, links, etc. that satisfy certain criteria?
You can write a web scraping tool in Perl or Python. Or, you can use existing tools and frameworks to achieve that.
Check out Scrapy, an open-source tool written in Python.
Take a look at Selenium too.
To parse dynamic content you could see the javascript source and get that same content the same way the webpage is getting it. (ie. replicating ajax calls and such)
If you want to submit data (not actually click on the elements) as if it were clicked/edited/selected you could also send a request containing the same data that the server is expecting by using some HTTP library, like CURL. See an example here.
If you need to handle content generated by script, then your first problem is to cause the script to execute. Further, the script will want to generate the content into a DOM. That means you need to have a DOM, and a script engine, and probably HTTP access to the Internet, and XML handling, etc.
If that sounds a lot like a web browser, then you're listening.
What you basically need is a web browser that you can control from a program. You'll need to be able to tell it to browse to a page, click buttons and links, etc., then you'll need to read back the resulting DOM.
Only then will you need to parse the page.
If you're in the Microsoft world, then you can use the WebBrowser control. There are several forms of this, and they all amount to the same thing: you can have Internet Explorer run inside of your program, and your program can control it.
I understand there are other browsers that can be controlled from a program, but since I don't know their details, I'll wait for someone else to tell us both.
I have been given a task of toggling nearly 200 users' permissions in an admin. I have access to the database, and I'm sure I can do this in SQL but I'm curious to find out how to do it this way as well, plus I suspect it will be less work because I don't have to study the SQL that's going on and I know exactly what to do after I get access to the browser instance and know how to execute javascript programmatically in the context of the web page open.
I basically want to provide a list of urls which will open ( 195 ) and then execute javascript to toggle checkboxes, then submit the form.
As I stated, I want to use firefox or chrome and I'm on linux.
This is basically what greasemonkey does.
Or, if you can do it all while staying on the same page, you can also just type in arbitrary JS code by hand in the firebug console or its Chrome equivalent. This could work if combined with some iframe trickery.
If you use Chrome, it has built in support for user automation scripts: http://userscripts.wikidot.com/, http://www.chromium.org/developers/design-documents/user-scripts
I think a cleaner solution would be for you to figure out what is the url and the parameters to pass to do what you need. Then you can just use curl to make those requests.
I use CJS Chrome extension. I add a short script take loads a script from my localhost server and executes it. The executed script can also send results back to the server.