How to connect chrome web extension with localhost server?

Question

I have a google chrome web extension that needs to communicate with a Qt desktop application - but how?

There is chrome's native messaging, but as I want to support multiple browsers/OS, this would be too much effort because it is only for chrome.
Then there is this post that suggests setting up a local server. This is what I did, see below.

I have set up a server with Qt with QTcpServer that uses QTcpSocket's on 127.0.0.1 (localhost). But a web extension can not listen to sockets, only chrome apps can. There are 2 possible solutions on my mind:

As a workaround, I could perhaps write a small chrome app. The Qt application would talk to the chrome extension via the chrome app (chrome apps support sockets). But I think this method is clumsy and not quite elegant.
On the other hand, I have read about socket.io. The idea is: The chrome extension talks via http requests with socket.io, and socket.io talks via sockets with my desktop app. Is this a possible solution?

What I also tried, is to directly connect to the local server with the following code. In my Qt server application, I see that there is a new connection. But I can not get a response at all (either my Qt code is wrong or it is because extensions can not listen to sockets?)

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:12345", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
  alert('This is the response from the server: '+ xhr.responseText );
}

If you want to support multiple browsers/OS, why you still use google chrome extensions? It is only for chrome. — Haibara Ai
– Haibara Ai, Commented Jan 25, 2016 at 8:38
because it was the easiest to start with and the core (js, html, css) should be quite universal... — user2366975
– user2366975, Commented Jan 25, 2016 at 20:11
This is similar to a question I want to ask but in my case the local web-server would only need to respond to requests from the browser rather than push updates. Is that something I can do directly from JS without extensions/apps? Figured I'd ask here before raising a new question in case it's trivial. — Mr. Boy
– Mr. Boy, Commented May 28, 2019 at 11:48

Community · Accepted Answer · 2017-05-23 10:31:03Z

6

as you already know extensions can not create direct connections:

Google Chrome Socket API in extensions

possible solution

maybe your QT application could serve a websocket and you should be able to communicate with that from Javascript:

http://www.html5rocks.com/en/tutorials/websockets/basics/

if you are unable to serve websockets from inside the QT application, another approach could be create a "bridge" a little script that could serve a websocket to your JavaScript and pass the messages from/to the QT application

you will find plenty of examples on websockets, the easy way to get into this could be creating a little server using node.js to play with it stackabuse.com/node-js-websocket-examples-with-socket-io/

oh! and do a search for "websocket same origin policy"

Example of an extension using websockets (that will be useful for debugging): chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo?hl=en

hope this helps

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 17, 2016 at 9:58

vmp999

761 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

user2366975 Over a year ago

This is also what I figured out in the meantime. I had to upgrade vom Qt5.2 to Qt5.3 because of the added support for web sockets though. I am using HTML5 chrome-side and Qt, no node.js needed.

Collectives™ on Stack Overflow

How to connect chrome web extension with localhost server?

1 Answer 1

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related