Node red browser interaction

Hello everybody,

I'm pretty new to node-red so this may be a stupid question. I did search a lot though and found nothing.

Currently I have node-red up and running on a raspberry pi and a bluetooth smart button linked to it. What I'm trying to achieve is when I press the button I get the URL of the website I'm on at the moment and maybe some more info. The end-project is to be able to like a video on Youtube for example by the press of a button. Any help would be much appreciated.

Thanks in advance!

1 Like

Hi and welcome.

I assume that you are also using the browser on the Pi as well then?

I'm actually not sure that is feasible. Because the browser is so powerful and connected to the Internet as well as your local device, what it can do locally is deliberately restricted.

If you are able to pick up the button press in the browser, then it might be feasible but even then I suspect that you would need to write a browser extension. Extensions are allowed to request additional permissions from you.

Not particularly an expert in this area though so I might well be wrong.

Well there is also the Web Bluetooth spec that may be worth looking at - https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API - but is a) experimental (aka not well supported across hardware/browsers) b) nothing to do with Node-RED apart from using it to host the web page you are experimenting with :-).

2 Likes

Thank you for welcoming me and replying!

At the moment I've tried the "window.location.href" command in a function but I get the error "window is not defined" which is more than normal since node-red is not running in the browser.

Actually, if I could get the current URL, it would be an awesome start for the project. Like somehow defining the browser window.

Thanks again for your time!

Do you mean you have some random web page open in the browser and you want to be able to ask the browser what page is currently on view?

It is certainly doable, but it’s a bit of effort. I think you’re going to need a custom made browser extension that communicates with node-red, for example through a websocket connection.
The alternative is browsing through a tool running in an iframe on a page hosted by your node-red install, and communicate between the outer page and the contents of your iframe which gets ugly really soon.


While doable, it’s certainly not the easiest thing and requires a fair bit of coding. Can I ask you what the further idea for this project is, to maybe offer suggestions or alternatives?

Update: as for liking a video you’ve to interact with the webpage directly. Your best bet here is going the browser extension method with a bi-directional communication between page DOM and “backend” extension, and between “backend” extension and node-red through a websocket.

Yea, that would do.

Hello afelix,

Thanks for your time and effort to help me.

The end-point of the project is that while watching something on web-tv for example, or any video on the web for the matter, you can express your mood with a smart button.

I don't really have to interact with the webpage. If by pressing the button I could have the information of the webpage (like the header), the media element playing and the timer of the video the moment I press the button that would be more than enough.

It's my degree thesis if you're wondering, I'm not going for a market product.

Once again thank you for your time and effort!

Yeah... in order to get that information you have to interact with the webpage. Specifically, you have to interact with the javascript running on that page. Same for information about the media element, especially if there's more than 1. The moment you press the button can be gained from setting the timestamp in Node-RED the moment the button event comes in.

For the URL, you can get it without actually interacting with the page. If by "the header" you mean the http headers, you can get those too without interacting with the webpage, by having an extension log/intercept http requests. For header/information visible on the webpage, you have to get that from the DOM. If your button only needs to interact with the current tab open, the activeTab permission is enough to get the URL and doing basic interactions, if not, it requires a deeper dive.

Start by reading the warnings here and wonder if you'd like to continue doing this: Sharing objects with page scripts - Mozilla | MDN
If not, back to the drawing board.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.