Help with MMM-EmbedURL

[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

[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.

[TK421_VT]

@TK421_VT Sorry for the delay, I have been busy with Holiday stuff. I added the IP address in the config file

it still doesn’t load anything in the top right region.

This is what is in the module section in the config file

Any other thoughts?

[wishmaster270]

@TK421_VT Hi,

that’s weird.
Do you still have Webview enabled in the config with:

electronOptions: {
  webPreferences: {
    webviewTag: true,
  }
},

[TK421_VT]

@wishmaster270 I will look, I ‘think’ so. but I am not sure.

[TK421_VT]

@wishmaster270

[wishmaster270]

@TK421_VT Sorry for the late response. I will need to set up a identical environment to debug the problem. I will try to figure things out in the next days.

[wishmaster270]

@TK421_VT

I setup a new environment today and tested your configuration. There are a few issues with it i did not see cause you did not use the code signs to paste your configuration in the forum.
Please use the
```
YOUR CONFIGURATION
```

which results in

YOUR CONFIGURATION

next time.

First thing is that you set the basicElementType and embedElementType in the wrong level. They need to be set as child object of config.

The second problem is that you use a wrong time of double quotes. It looks like your editor uses a wired type of encoding.

“

is not the same as

"

With the following config everything works well:

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw https://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information on how you can configure this file
 * see https://docs.magicmirror.builders/getting-started/configuration.html#general
 * and https://docs.magicmirror.builders/modules/configuration.html
 */
let config = {
	electronOptions: {
		webPreferences: {
			webSecurity: false,
			webviewTag: true,
		},
		fullscreen: true,
		alwaysOnTop: false
	},
	// ignoreXOriginHeader: true,
	// ignoreContentSecurityPolicy: true,
	address: "192.168.1.1", // Address to listen on, can be:
	// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
	// - another specific IPv4/6 to listen on a specific interface
	// - "0.0.0.0", "::" to listen on any interface
	// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/", // The URL path where MagicMirror is hosted. If you are using a Reverse proxy
	// you must set the sub path here. basePath must end with a /
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "10.18.8.0/24"], // Set [] to allow all IP addresses
	// or add a specific IPv4 of 192.168.1.5 :
	// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
	// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
	// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	useHttps: false, // Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "", // HTTPS private key path, only require when useHttps is true
	httpsCertificate: "", // HTTPS Certificate path, only require when useHttps is true

	language: "de",
	locale: "de-DE",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 24,
	units: "metric",
	// serverOnly:  true/false/"local" ,
	// local for armv6l processors, default
	//   starts serveronly and then starts chrome browser
	// false, default for all NON-armv6l devices
	// true, force serveronly mode, because you want to.. no UI on this device

	modules: [
		{
			module: "clock",
			position: "top_center",
		},
		{
			module: "MMM-EmbedURL",
			position: "top_right",
			header: "Current Weather",
			config: {
				embedElementType: "webview",
				basicElementType: "div",
				updateInterval: 120,
				attributes: [
					"frameborder=0",
				],
				embed: [
					“https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash”
				]
			},
		},
		{
			module: "MMM-Touch",
			position: "bottom_center",
			config: {
				debug: true,
				useDisplay: false,
				defaultMode: "default",
				gestureCommands: {
					default: {
						TAP_1: (commander) => {
							commander.sendNotification("USER_PRESENCE", true);
						},
						PRESS_1: (commander) => {
							commander.sendNotification("SCREEN_TOGGLE", { forced: true });
						},
						SWIPE_UP_1: (commander) => {
							commander.sendNotification("SCREEN_ON", { forced: true });
						},
						SWIPE_DOWN_1: (commander) => {
							commander.sendNotification("SCREEN_OFF", { forced: true });
						},
						SWIPE_LEFT_1: (commander) => {
							commander.sendNotification("PROFILE_INCREMENT_HORIZONTAL", null);
						},
						SWIPE_RIGHT_1: (commander) => {
							commander.sendNotification("PROFILE_DECREMENT_HORIZONTAL", null);
						}
					}
				}
			}
		},
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {
	module.exports = config;
}

[sdetweil]

@wishmaster270 the bad " is because of the no code wrapper

see this

"something"

vs this
“something”

copy/paste of the second will cause bad config message

@TK421_VT to use the code wrapper

paste your text in the message editor, select it all
the hit the button above the edit that looks like </>

note the code wrapper tag MUST start and end on a blank line…

[TK421_VT]

@wishmaster270 Moving basicElementType & embedElementTpe into the correct location seemed to work.

Is there any way to make the window Wider or Longer? Or is it this size because of the region it is set in?

[TK421_VT]

YOUR CONFIGURATION

/* MagicMirror² Config Sample
 *
 * By Michael Teeuw https://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information on how you can configure this file
 * see https://docs.magicmirror.builders/configuration/introduction.html
 * and https://docs.magicmirror.builders/modules/configuration.html
 */
let config = {
  electronOptions: {
    webPreferences: {
      webviewTag: true,
    }
  },
	address: "192.168.1.40", 	// Address to listen on, can be:
							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
							// - another specific IPv4/6 to listen on a specific interface
							// - "0.0.0.0", "::" to listen on any interface
							// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/", 	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
					// you must set the sub path here. basePath must end with a /
	ipWhitelist: ["192.168.1.40", "127.0.0.1", "::ffff:127.0.0.1", "::1"], 	// Set [] to allow all IP addresses
															// or add a specific IPv4 of 192.168.1.5 :
															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
															// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
															// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
	httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 12,
	units: "english",
	// serverOnly:  true/false/"local" ,
	// local for armv6l processors, default
	//   starts serveronly and then starts chrome browser
	// false, default for all NON-armv6l devices
	// true, force serveronly mode, because you want to.. no UI on this device

	modules: [
		
		{
			module: "clock",
			position: "top_left",
			config: {
			timeFormat: "12",
			displaySeconds: "false",
			showPeriod: "true"
				}
		},		
        {
    module: "MMM-Bring",
    position: "bottom_bar",
    config: {
       email: 'xxxxxx@xxxx.com',
       password: 'xxxxxx',
       updateInterval: 1, // in Minutes
       listName: "Costco", // optional
       showListName: false,
       activeItemColor: "#EE524F",
       latestItemColor: "#4FABA2",
       showLatestItems: false,
       maxItems: 0,
       maxLatestItems: 0,
       locale: "en-US",
       useKeyboard: false,
       customTitle: "Costco List", // optional
       listDropdown: false
    }
},
{
		module: "MMM-CalendarWeek",
		position: "middle_center",	// This can be any of the regions. Best results in bottom region.
		config: {
	colored: true,
	coloredSymbolOnly: false,
	maximumNumberOfDays: 21,
	maximumDaysPerLine: 7,
	wrapEvents: true,
	showEndDate: true,
	calendars: [
		{
			url: 'https://calendar.google.com/calendar/ical/xxxxxxgmail.com/public/basic.ics',
			symbol: 'calendar',
			auth: {
			    user: 'xxxxxxxx',
			    pass: 'xxxxxxxx',
			    method: 'basic'
			}
		},
	],
}
},
{
  module: "MMM-EmbedURL",
  position: "top_right",
  header: "Current Weather",
  config: {
    embedElementType: "webview",
    basicElementType: "div",
    updateInterval: 120,
    attributes: [
        "frameborder=0",
    ],
      embed: [
        "https://www.wunderground.com/dashboard/pws/KVTCAMBR4?cm_ven=localwx_pwsdash"
    ]
  },
},
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}