QT QWebEnginePage::setWebChannel() transport object - c++

I'm using the QT WebEngine framework to display web pages. I'm injecting javascript into a page when it loads, and want to allow the javascript to be able to access a QT object. Apparently, to do this a QWebChannel must exist that establishes some IPC between chromium (the javascript) and the rest of my C++/QT project. I came across the QWebEnginePage::setWebChannel (QWebChannel *channel) function, however I can't find any examples of its use. The documentation (http://doc.qt.io/qt-5/qwebenginepage.html#setWebChannel) mentions that qt.webChannelTransport should be available in the javascript context, but I don't see where that is established in qwebchannel.js (https://github.com/qtproject/qtwebchannel/blob/dev/src/webchannel/qwebchannel.js). I've seen the WebChannel examples (http://doc.qt.io/qt-5/qtwebchannel-examples.html) and would like to avoid WebSockets if possible.
Below is how I tried to implement the web channel.
Whenever a page loads I establish a channel and inject the javascript in C++:
QWebChannel *channel = new QWebChannel();
channel->registerObject(QStringLiteral("jshelper"), helper);
view->page()->runJavaScript(qwebjs); //this is qwebchannel.js
view->page()->setWebChannel(channel);
view->page()->runJavaScript(myfunction); //function that calls QT object (jshelper)
In Javascript:
new QWebChannel(qt.webChannelTransport, function(channel) { ... });
Which results in the channel not being connected properly (assuming this is because of qt.webChannelTransport, as it was working when I was using WebSockets). Any pointers to examples of QWebChannel being set up with QWebEnginePage this way is also appreciated.

Short answer: add <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> to your html page (before you call new QWebChannel of course), and remove the line view->page()->runJavaScript(qwebjs); //this is qwebchannel.js from your C++ code.
Long answer:
I too had a ton of trouble figuring out how to use QWebChannel without WebSockets correctly -- managed to get it working after digging around in Qt 5.5 source code and mailing lists (documentation is still lacking). Note that this only works with the new Qt 5.5.
Here's how to use QWebChannel:
// file: MyWebEngineView.cpp, MyWebEngineView extends QWebEngineView
QWebChannel *channel = new QWebChannel(page());
// set the web channel to be used by the page
// see http://doc.qt.io/qt-5/qwebenginepage.html#setWebChannel
page()->setWebChannel(channel);
// register QObjects to be exposed to JavaScript
channel->registerObject(QStringLiteral("jshelper"), helper);
// now you can call page()->runJavaScript(...) etc
// you DON'T need to call runJavaScript with qwebchannel.js, see the html file below
// load your page
load(url);
And on the JS side:
<!-- NOTE: this is what you're missing -->
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript">
<!-- it's a good idea to initialize webchannel after DOM ready, if your code is going to manipulate the DOM -->
document.addEventListener("DOMContentLoaded", function () {
new QWebChannel(qt.webChannelTransport, function (channel) {
var jshelper = channel.objects.jshelper;
// do what you gotta do
});
});
</script>
Also make sure you've added QT += webenginewidgets webchannel to your .pro file else this won't build!
Bonus: you can debug your JavaScript from the comfort of Chrome Dev Tools now! Just add this somewhere in your Qt code (ideally in your application startup):
#ifdef QT_DEBUG
qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "23654");
#endif
Then start your application, navigate to http://localhost:23654 in Chrome, and you'll get a fully-functional JS debugger, profiler, console, etc :)
Follow-up (19/04/2016): if your remote debugger isn't working, note that the qputenv call must also occur before any calls to QWebEngineSettings or any other WebEngine-related class, because these trigger the WebEngine "zygote" process immediately (the zygote is the parent QtWebEngineProcess from which all future QtWebEngineProcesses are forked) and then qputenv cannot affect it. Spent a few hours tracking this down.

Related

How to detect URL schemes with .handlesExternalEvents and NSAppleEventManager simultaneously

I have a SwiftUI-based Mac app with multiple WindowGroups.
1. Opening different SwiftUI WindowGroups using URL schemes
To open those windows I am using URL schemes (like described here):
WindowGroup {
// ...
}
.handlesExternalEvents(matching: Set(arrayLiteral: "primaryWindow"))
... and then calling:
NSWorkspace.shared.open(URL(string: "myapp://primaryWindow")!)
☑️ This works just fine!
2. Detecting URLs called from outside the app
I also need to be able to recognise and handle URL schemes called from outside the app, like myapp://somePath?someParameter=1. I found this solution and set an event handler within my AppDelegate:
func applicationWillFinishLaunching(_ notification: Notification) {
NSAppleEventManager.shared().setEventHandler(self, andSelector: #selector(self.handleGetURL(event:reply:)), forEventClass: AEEventClass(kInternetEventClass), andEventID: AEEventID(kAEGetURL)) )
}
☑️ This works just fine, too, and my #selector method is called like you would expect.
3. Problem: How to use .handlesExternalEvents and .setEventHandler simultaneously?
🛑 Here’s where the problem starts: After calling .setEventHandler my WindowGroups no longer react on called URLs and I remain unable to open new windows.
That somehow makes sense since I’ve registered an event handler in AppDelegate specifically for kAEGetURL but I have no idea how to implement both features simultaneously. Looking forward for your advice!

Open a c++ application installed on computer with a custom url in browser [duplicate]

How do i set up a custom protocol handler in chrome? Something like:
myprotocol://testfile
I would need this to send a request to http://example.com?query=testfile, then send the httpresponse to my extension.
The following method registers an application to a URI Scheme. So, you can use mycustproto: in your HTML code to trigger a local application. It works on a Google Chrome Version 51.0.2704.79 m (64-bit).
I mainly used this method for printing document silently without the print dialog popping up. The result is pretty good and is a seamless solution to integrate the external application with the browser.
HTML code (simple):
Click Me
HTML code (alternative):
<input id="DealerName" />
<button id="PrintBtn"></button>
$('#PrintBtn').on('click', function(event){
event.preventDefault();
window.location.href = 'mycustproto:dealer ' + $('#DealerName').val();
});
URI Scheme will look like this:
You can create the URI Scheme manually in registry, or run the "mycustproto.reg" file (see below).
HKEY_CURRENT_USER\Software\Classes
mycustproto
(Default) = "URL:MyCustProto Protocol"
URL Protocol = ""
DefaultIcon
(Default) = "myprogram.exe,1"
shell
open
command
(Default) = "C:\Program Files\MyProgram\myprogram.exe" "%1"
mycustproto.reg example:
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\Software\Classes\mycustproto]
"URL Protocol"="\"\""
#="\"URL:MyCustProto Protocol\""
[HKEY_CURRENT_USER\Software\Classes\mycustproto\DefaultIcon]
#="\"mycustproto.exe,1\""
[HKEY_CURRENT_USER\Software\Classes\mycustproto\shell]
[HKEY_CURRENT_USER\Software\Classes\mycustproto\shell\open]
[HKEY_CURRENT_USER\Software\Classes\mycustproto\shell\open\command]
#="\"C:\\Program Files\\MyProgram\\myprogram.exe\" \"%1\""
C# console application - myprogram.exe:
using System;
using System.Collections.Generic;
using System.Text;
namespace myprogram
{
class Program
{
static string ProcessInput(string s)
{
// TODO Verify and validate the input
// string as appropriate for your application.
return s;
}
static void Main(string[] args)
{
Console.WriteLine("Raw command-line: \n\t" + Environment.CommandLine);
Console.WriteLine("\n\nArguments:\n");
foreach (string s in args)
{
Console.WriteLine("\t" + ProcessInput(s));
}
Console.WriteLine("\nPress any key to continue...");
Console.ReadKey();
}
}
}
Try to run the program first to make sure the program has been placed in the correct path:
cmd> "C:\Program Files\MyProgram\myprogram.exe" "mycustproto:Hello World"
Click the link on your HTML page:
You will see a warning window popup for the first time.
To reset the external protocol handler setting in Chrome:
If you have ever accepted the custom protocol in Chrome and would like to reset the setting, do this (currently, there is no UI in Chrome to change the setting):
Edit "Local State" this file under this path:
C:\Users\Username\AppData\Local\Google\Chrome\User Data\
or Simply go to:
%USERPROFILE%\AppData\Local\Google\Chrome\User Data\
Then, search for this string: protocol_handler
You will see the custom protocol from there.
Note: Please close your Google Chrome before editing the file. Otherwise, the change you have made will be overwritten by Chrome.
Reference:
https://msdn.microsoft.com/en-us/library/aa767914(v=vs.85).aspx
Chrome 13 now supports the navigator.registerProtocolHandler API. For example,
navigator.registerProtocolHandler(
'web+custom', 'http://example.com/rph?q=%s', 'My App');
Note that your protocol name has to start with web+, with a few exceptions for common ones (like mailto, etc). For more details, see: http://updates.html5rocks.com/2011/06/Registering-a-custom-protocol-handler
This question is old now, but there's been a recent update to Chrome (at least where packaged apps are concerned)...
http://developer.chrome.com/apps/manifest/url_handlers
and
https://github.com/GoogleChrome/chrome-extensions-samples/blob/e716678b67fd30a5876a552b9665e9f847d6d84b/apps/samples/url-handler/README.md
It allows you to register a handler for a URL (as long as you own it). Sadly no myprotocol:// but at least you can do http://myprotocol.mysite.com and can create a webpage there that points people to the app in the app store.
This is how I did it. Your app would need to install a few reg keys on installation, then in any browser you can just link to foo:\anythingHere.txt and it will open your app and pass it that value.
This is not my code, just something I found on the web when searching the same question. Just change all "foo" in the text below to the protocol name you want and change the path to your exe as well.
(put this in to a text file as save as foo.reg on your desktop, then double click it to install the keys)
-----Below this line goes into the .reg file (NOT including this line)------
REGEDIT4
[HKEY_CLASSES_ROOT\foo]
#="URL:foo Protocol"
"URL Protocol"=""
[HKEY_CLASSES_ROOT\foo\shell]
[HKEY_CLASSES_ROOT\foo\shell\open]
[HKEY_CLASSES_ROOT\foo\shell\open\command]
#="\"C:\\Program Files (x86)\\Notepad++\\notepad++.exe\" \"%1\""
Not sure whether this is the right place for my answer, but as I found very few helpful threads and this was one of them, I am posting my solution here.
Problem: I wanted Linux Mint 19.2 Cinnamon to open Evolution when clicking on mailto links in Chromium. Gmail was registered as default handler in chrome://settings/handlers and I could not choose any other handler.
Solution:
Use the xdg-settings in the console
xdg-settings set default-url-scheme-handler mailto org.gnome.Evolution.desktop
Solution was found here https://alt.os.linux.ubuntu.narkive.com/U3Gy7inF/kubuntu-mailto-links-in-chrome-doesn-t-open-evolution and adapted for my case.
I've found the solution by Jun Hsieh and MuffinMan generally works when it comes to clicking links on pages in Chrome or pasting into the URL bar, but it doesn't seem to work in a specific case of passing the string on the command line.
For example, both of the following commands open a blank Chrome window which then does nothing.
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" "foo://C:/test.txt"
"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --new-window "foo://C:/test.txt"
For comparison, feeding Chrome an http or https URL with either of these commands causes the web page to be opened.
This became apparent because one of our customers reported that clicking links for our product from a PDF being displayed within Adobe Reader fails to invoke our product when Chrome is the default browser. (It works fine with MSIE and Firefox as default, but not when either Chrome or Edge are default.)
I'm guessing that instead of just telling Windows to invoke the URL and letting Windows figure things out, the Adobe product is finding the default browser, which is Chrome in this case, and then passing the URL on the command line.
I'd be interested if anyone knows of Chrome security or other settings which might be relevant here so that Chrome will fully handle a protocol handler, even if it's provided via the command line. I've been looking but so far haven't found anything.
I've been testing this against Chrome 88.0.4324.182.
open
C:\Users\<Username>\AppData\Local\Google\Chrome\User Data\Default
open Preferences then search for excluded_schemes you will find it in 'protocol_handler' delete this excluded scheme(s) to reset chrome to open url with default application

QtWebEngine debugging

Recently Qt introduced the QtWebEngine module. Is there a way to invoke developer tools and debug JavaScript code inside QWebEngineView? It was possible with QWebView using
page()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
but I couldn't find any similar option in QWebEngineView.
I just ran across this so I added it here for posterity.
It was just added to Qt 5.5 git. You have to enable it via an environment variable QTWEBENGINE_REMOTE_DEBUGGING=<port>. You can put 0.0.0.0:<port> if you are doing debugging of an embedded device and cant use the local console. Then you can point can connect to http://127.0.0.1: to get the debugger. It will need to be a chromium based browser. Do you have to use Chrome, or you can actually use the "quick nano browser" example if you want.
Alternatively, one may embed Firebug Lite to get a JavaScript console and inspectors.
Just add
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
into the page. Pressing F12 will visualize the Firebug console.
If your devtools view and page are in the same program,use qt function to directly navigate to page devtools instead of http://localhost:port whith is devtools index(have to select devtools of whitch page).
After QTWEBENGINE_REMOTE_DEBUGGING being set up
>=5.13:
void QWebEnginePage::setDevToolsPage(QWebEnginePage *devToolsPage)
5.11~5.12:
void QWebEnginePage::setInspectedPage(QWebEnginePage *page)
Sample pyqt5.12
dev_view = QWebEngineView() # new web view
self.page().setDevToolsPage(dev_view.page()) # self is the source web view
Reference:
https://doc.qt.io/qt-5/qwebenginepage.html#setDevToolsPage
https://doc.qt.io/qt-5/qwebenginepage.html#setInspectedPage
For PyQt5 the following snippet:
self.mainLayout = QtWidgets.QVBoxLayout()
self.webView = QtWebEngineWidgets.QWebEngineView()
self.mainLayout.addWidget(self.webView, 100)
self.webView.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.JavascriptEnabled, True)
self.webView.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.LocalContentCanAccessRemoteUrls, True)
self.webView.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.ErrorPageEnabled, True)
self.webView.settings().setAttribute(QtWebEngineWidgets.QWebEngineSettings.PluginsEnabled, True)
dev_view = QtWebEngineWidgets.QWebEngineView()
self.mainLayout.addWidget(dev_view, 100)
self.webView.page().setDevToolsPage(dev_view.page())
From http://blog.qt.io/blog/2015/03/17/qt-5-5-alpha-available/:
The remote inspector can be used by either defining the env variable
QTWEBENGINE_REMOTE_DEBUGGING, or by supplying the
–remote-debugging-port command line argument. You can then point a
browser at the specified port and inspect your web content.
look this:
The Chromium DevTools provide the ability to inspect and debug layout and performance issues of any web content
https://doc.qt.io/qt-5/qtwebengine-features.html#chromium-devtools

Creating simple WebService in C++ / Qt (acting as server) providing JSON data

I need to create a simple web service (being the "server"). The goal is to provide some data I do read in an Qt / C++ application as JSON data. Basically a JavaScript application in the browser shall read its data from the Qt app. It is usually a single user scenario, so the user runs a Google Maps application in her browser, while additional data come from the Qt application.
So far I have found these libs:
Qxt: http://libqxt.bitbucket.org/doc/0.6/index.html but being a newbie on C++/Qt I miss some examples. Added: I have found one example here
gSoap: http://www.cs.fsu.edu/~engelen/soap.html has more examples and documentation and also seems to support JSON
KD SOAP: http://www.kdab.com/kdab-products/kd-soap/ with no example as far as I can tell, docu is here
Qt features itself, but it is more about acting as a client: http://qt-project.org/videos/watch/qt-networking-web-services
Checking SO gives me basically links to the above libs
webservice with Qt with an example I do not really get.
How to Create a webservice by Qt
So basically I do have the following questions:
Which lib would you use? I want to keep it as simple as possible and would need an example.
Is there another (easy!) way to provide the JSON data to the JavaScript Web page besides the WebService?
-- Edit, remarks: ---
Needs to be application intrinsic. No web server can be installed, no extra run time can be used. The user just runs the app. Maybe the Qt WebKit could be an approach....
-- Edit 2 --
Currently checking the tiny web servers as of SO " Qt HTTP Server? "
As of my tests, currently I am using QtWebApp: http://stefanfrings.de/qtwebapp/index-en.html This is one of the answers of Edit 2 ( Qt HTTP Server? )
Stefan's small WebServer has some well documented code, is written in "Qt C++" and easy to use, especially if you have worked with servlets already. Since it can be easily integrated in my Qt project, I'll end up with an internal WebServer.
Some demo code from my JSON tests, showing that generating the JSON content is basically creating a QString.
void WebServiceController::service(HttpRequest& request, HttpResponse& response) {
// set some headers
response.setHeader("Content-Type", "application/json; charset=ISO-8859-1");
response.setCookie(HttpCookie("wsTest","CreateDummyPerson",600));
QString dp = WebServiceController::getDummyPerson();
QByteArray ba = dp.toLocal8Bit();
const char *baChar = ba.data();
response.write(ba);
}
If someone has easy examples with other libs to share, please let me know.
QByteArray ba = dp.toLocal8Bit();
const char *baChar = ba.data();
You don't need to convert the QByteArray to char array. Response.write() can also be called with a QByteArray.
By the way: qPrintable(dp) is a shortcut to convert from QString to char array.

flex : How to import .fla file into the flex application

I have one .fla file sent by some one. I want to import this file into my actionscript project using flex builder and I need to work on frames of the fla file . How to do this. I am very new to flex . I am searching this in internet with of no results. please help me.
You cannot edit a flash file directly within the Flash Builder (i.e. Flex) IDE. You can however access the published swf from within Flex.
A common use is to access assets from a library swf - http://www.bit-101.com/blog/?p=853. But I assume you are interested in accessing specific frames in the interactive. Different options are possible :
use localConnection - http://fbflex.wordpress.com/2008/06/12/passing-data-from-flash-to-flex-and-back/
load the resulting swf into a loader object and navigate to frame - SWFLoader starts to play SWF without the loading being complete
load the resulting swf into a loader object and communicate via events
<mx:SWFLoader id="embeddedFlash" source="path/to/file.swf" complete="onLoaderComplete(event)"/>
<mx:Script>
<![CDATA[
private function onLoaderComplete(event:Event)
{
// the swf file needs to be fully loaded before these calls are made
if(embeddedFlash.content)
{
// 2 - navigate to frame
var mc:MovieClip = MovieClip(embeddedFlash.content);
mc.gotoAndPlay(0);
// 3 - communicate via events
embeddedFlash.content.addEventListener("nextButtonClick", onNextClick);
embeddedFlash.content.dispatchEvent(new Event("changeOptions", {/* pass on data */}));
}
}
]]>
</mx:Script>