Help with MMM-EmbedURL

wishmaster270

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

wishmaster270

@TK421_VT Hi,

your config looks good.
There is one last thing we can try. Can you please use your IP address (the one of the Pi) instead of localhost at the address setting.

You can get your IP either by hovering over the network icon in the top right corner of the screen or by entering

ip a

in the shell.

I had this changed for some other modules in my config cause of Cross-Origin problems and it is the only thing that is different in my setup.

TK421_VT

@wishmaster270 Thanks I will give that a try, I know the IP as I set it statically.