How to get the selected text from a webview in an electron application?
I am using Angular with Electron. So I have a component which has a webview:
<webview id="foo" attr.src={{activeUrl}} style="height: 600px"></webview>
This is what I use for getting the selected text:
let rightClickPosition = null;
const menu = new Menu();
const menuItem = new MenuItem({
label: 'Get selected text',
click: () => {
// does not work for selected text in webview
console.log(window.getSelection().toString());
}
});
menu.append(menuItem);
window.addEventListener('contextmenu', (e) => {
e.preventDefault();
rightClickPosition = {x: e.x, y: e.y};
menu.popup(remote.getCurrentWindow());
}, false);
The problem: window.getSelection().toString() does not work for the selected text in the webview. It works only for the text outside the webview.
webView is special kind of tag in Electron. as document (https://electronjs.org/docs/api/webview-tag) says, Unlike an iframe, the webview runs in a separate process than your app. It doesn't have the same permissions as your web page and all interactions between your app and embedded content will be asynchronous..
Since it's different process and doesn't allow direct interaction, way you can communicate is using ipc between webview and outer frame. Check Electron's ipc to establish. Specifically you may interested in ipcRenderer.sendToHost for renderer host and webview.
Related
I am using a x-ms-webview to display an embedded media website, It work great by the problem is I can't handle full screen event when user want to go to full screen.
In iframe i can using webkitfullscreenchange to handle this, but with x-ms-webview seem not work.
Anyone can explaint me why and How to handle full screen event came from media in x-ms-webview?
Thanks
We can interact with the content of the web view by using the InvokeScriptAsync method to invoke or inject script into the web view content, and the ScriptNotify event to get information back from the web view content.
To invoke the onwebkitfullscreenchange event inside the web view content, use the InvokeScriptAsync method.
To enable an external web page to fire the ScriptNotify event when calling window.external.notify, you must include the page's URI in the ApplicationContentUriRules section of the app manifest. (You can do this in Microsoft Visual Studio on the Content URIs tab of the Package.appxmanifest designer.) The URIs in this list must use HTTPS, and may contain subdomain wildcards (for example, https://.microsoft.com) but they cannot contain domain wildcards (for example, https://.com and https://.). The manifest requirement does not apply to content that originates from the app package, uses an ms-local-stream:// URI, or is loaded using NavigateToString.
For more info, refer Interacting with web view content.
For example:
<x-ms-webview id="webview" src="https://www.....com" width="1920" height="1080"></x-ms-webview>
<script src="js/main.js"></script>
The js code:
(function (evt) {
"use strict"
var ViewManagement = Windows.UI.ViewManagement;
var FullScreenSystemOverlayMode = ViewManagement.FullScreenSystemOverlayMode;
var ApplicationView = ViewManagement.ApplicationView;
var view = ApplicationView.getForCurrentView();
var webview = document.getElementById("webview");;
webview.addEventListener("MSWebViewFrameDOMContentLoaded", function () {
var op = webview.invokeScriptAsync("eval", "document.onwebkitfullscreenchange = function (evt) { window.external.notify('123'); }");
op.start();
});
webview.addEventListener("MSWebViewScriptNotify", function (evt) {
if (view.isFullScreen) {
view.exitFullScreenMode();
}
else {
view.tryEnterFullScreenMode();
}
});
})()
I have made an addon for firefox. I install it but i have two problems.I use windows.open because the panel isn`t suitable for me because if the user want to copy something in it, the panel is disappearing when he leaves it. So i have windows. I have this code:
var widgets = require("sdk/widget");
var windows = require("sdk/windows").browserWindows;
var self = require("sdk/self");
var widget = widgets.Widget({
id: "open window",
label: "test",
contentURL: self.data.url("favicon.ico"),
onClick: function() {
windows.open({
url: "http://www.example.com",
onOpen: function(window) {
}
});
}
});
I don`t know where to put the attributes of width,height,no scroll :/ in order to be displayd as a popup window.
And the second problem is that the button is displayed at the bar of addons.How it is possible to display it at the nav bar next to firebug?
The windows module does not support specifying window features.
You could use the unstable window/utils module and the openDialog function to provides.
Or you could get yourself chrome privileges and re-implement the stuff yourself. The implementation of openDialog is surprisingly pretty straight forward and can be borrowed from easily.
Either way, you'll need to wait for a window to actually fully load (newWindow.addEventListener("load", ...)) before you can safely interact with it. Or get somewhat hackish and listen for the first open event via the windows module.
I need to open an external page from my Phonegap app. I need to make it compatible with at least Android and iOS.
I have this code to open the external page
**var ref = window.open('http://mysite.com/', '_blank', 'location=no');**
lastPageLoaded = ref;
ref.addEventListener('loadstop', function (event) {
try {
alert('executing...');
var retVal = lastPageLoaded.executeScript(
{
code: "alert('got here!');"
}, function () {
});
}
catch (exception) {
alert(exception);
}
});
I also have this in my config.xml file:
<access origin="*" />
The code above invokes the InAppBrowser an correctly opens my external page. BUT, the InAppBrowser is not in fullscreen mode which is not good for my app.
I noticed that if I make a slight change to the bolded (that is, the text decorated with ** ) line above to this:
var ref = window.open('http://mysite.com/', **'_self'**, 'location=no');
than InAppBrowser is not invoked but the external page opens in full mode, as my entire app is, which is good!
However, adding the event listener won't work:
ref.addEventListener('loadstop', function (event)
I mean, my code never gets to execute this line:
code: "alert('got here!');"
Seems logical because now I am not running under InAppBrowser context, but I need one of two solutions:
1. Make InAppBrowser run in fullscreen mode and keep my existing event handler
2. Find a similar event to hook to so I can invoke the script on the loaded external page.
Is it possible to achieve this?
I'm unsing a HTML widget in Layar which has to control all the interaction. So no Layar buttons. I trying to use a simple JavaScript / JQuery function to open a target app in the App Store:
$('.btn-download').click(function(){
window.location.href = "itms://itunes.com/apps/someApp";
});
I do something simular opening a mail window with mailto: which works fine. Somehow this will do nothing.
B.t.w. It only has to work on iOS.
Try using this:
setTimeout(function() {
window.location = "http://itunes.com/apps/someApp";
}, 25);
window.location = "custom-uri://";
Copied this from: Is it possible to register a http+domain-based URL Scheme for iPhone apps, like YouTube and Maps?
I am completely new to FF extension creation, and I will be rather specific.
When I run a JS command in, for example, Firefox's built-in sandbox, it works just fine, so I would like to make a FF addon where on click the same JS command would execute. The command basically works in a web page:
javascript:$('.plus').click();
I suppose it doesn't have to work like this:
var Widget = require("widget").Widget;
var tabs = require('tabs');
exports.main = function() {
new Widget({
id: "user-widget-1",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
javascript:$('.plus').click();
}
});
};
Thanks.
$(.plus) is jQuery syntax so you probably want to load jQuery as a content script into your widget. And you want to run your code as a content script as well, e.g.:
var data = require("sdk/self").data;
new Widget({
id: "user-widget-1",
label: "My Mozilla Widget",
contentURL: "http://example.com/foo.html",
contentScriptFile: [data.url("jquery.js"), data.url("myScript.js")]
});
And data/myScript.js would be something like:
$(document).ready(function() {
$('.plus').click()
});
If you don't want the click to happen when the document loads but rather on a specific event happening in your extension, you might want to look into communicating with content scripts. I also recommend reading a general overview of content scripts.
Use Page-Mod to inject content-scripts into a web page, content-script linked in a widget only works in the widget content. Moreover the widget API is deprecated from FF 29, I suggest you to use a Action button instead.