Help with MMM-EmbedURL

[TK421_VT]

I am new to MM and need help. I am trying to embed a WeatherUnderground url of my personal Weather station to my MM. I have loaded the module and added the basic code to my config file, but I get nothing. It sounds like it might be an issue with Embed sites that forbid embedding and Cookie banners, but I don’t understand how to remove it. I see the Chrome extension Requestly, but I don’t understand how or where to use it.

Here is an example of a webpage that I want to use: https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash

Any help would be greatly appprecated.

[sdetweil]

@TK421_VT said in Help with MMM-EmbedURL:

https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash

I setup the module and see this error in the developers window
ctrl-shift-i on keyboard, select the console tab

Refused to display 'https://www.wunderground.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

also see this in the console output from npm start

[16.12.2022 07:04.53.720] [ERROR] (node:4015) electron: Failed to load URL: https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash with error: ERR_BLOCKED_BY_RESPONSE

I don’t know how to solve this

[wishmaster270]

@TK421_VT Hi,

i setup a quick dev environment and tried to add the URL. You are right the page forbids embedding.
If a activate the Requestly extension in my Firefox and remove the response headers “X-Frame-Options”, “Content-Security-Policy”, “X-Content-Security-Policy” the site can be embedded. I am pretty sure if you follow the instructions in this tutorial you can embed the site into a MagicMirror instance that is running in server mode and is displayed within Firefox or Chrome.

The question is if you are running MagicMirror in sever mode and display it in a local browser. If not you use the electron browser and you do not need any extensions but can use webview to embed the site.
You will need to enable webview in the electronOptions as described in the Readme of the module and you need to set embedElementType: "webview" in the module configuration.

[sdetweil]

@wishmaster270 and I provide a script to launch chromium over server mode in my script repo.

I set that up auto for pi0w.

run-start.sh

change the npm start to launch the run-start.sh

[TK421_VT]

@wishmaster270 said in Help with MMM-EmbedURL:

embedElementType: “webview”

I am guessing I run Requestly on the PI itself on the default Browers? I don’t currently have Firefox or Chrome loaded on it (not that it is that hard to install).

Honestly, I have no idea if I am running in Server Mode. I install the basic 64 bit PI OS. I am guessing that is not the Server Mode?

I tried adding WebView to the Config file with no change:

{
module: “MMM-EmbedURL”,
position: “top_right”,
header: “Current Weather”,
config: {
updateInterval: 120,
attributes: [
“frameborder=0”,
],
embedElementType: “webview”,
embed: [
“https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash”
]
},
},

Thoughts?

[TK421_VT]

@sdetweil

I don’t have a start-up script running yet, I manually launch it with: npm run start as I am still configuring things.

Is there something I am missing as to why I should?

[sdetweil]

@TK421_VT note that u also have to allow WebView in the electronOptions config up by address/ipWhitelist

[TK421_VT]

I am not going to lie, I wish I understood what you just said.

[sdetweil]

@TK421_VT read his instructions. you have to enable electron webView before u can use it in a module

[TK421_VT]

@sdetweil Thank you for trying to help, but even after reading the readme there are terms or concepts I don’t follow.

This is at the beginning of the config file:

let config = {
electronOptions: {
webPreferences: {
webviewTag: true,
}
},
address: “localhost”, // Address to listen on, can be:

Then this in the module:

{
module: “MMM-EmbedURL”,
position: “top_right”,
header: “Current Weather”,
embedElementType: “webview”,
basicElementType: “div”,
config: {
updateInterval: 120,
attributes: [
“frameborder=0”,
],
embed: [
“https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash”
]
},
},

this is what I see in the terminal log:

[16.12.2022 21:55.38.765] [ERROR] (node:57092) electron: Failed to load URL: https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash with error: ERR_BLOCKED_BY_RESPONSE