MMM-WebView: A WebView module for MagicMirror²

This is a module for the MagicMirror².

MMM-WebView allows you to add a webview which can display any url.

This module uses the Electron's <webview> tag instead of <iframe> to embed pages. It makes possible to display pages that cannot be displayed in a <iframe>.

Installation

1. Clone this repository in your modules folder:

cd ~/MagicMirror/modules
git clone https://github.com/Iketaki/MMM-WebView.git

2. Add the following configuration block to the modules array in the config/config.js file:

let config = {
  modules: [
    {
      module: 'MMM-WebView',
      position: 'top_center',
      config: {
        url: 'https://www.google.com/',
        width: '640px',
        height: '480px',
      },
    },
  ],
};

3. Finally, add the following configuration block to config/config.js file. This is required to run this module correctly.

let config = {
  electronOptions: {
    webPreferences: {
      webviewTag: true,
    },
  },
};

Update

1. Get the latest version using the command git pull:

cd ~/MagicMirror/modules/MMM-WebView
git pull

Configuration options

Option	Description
url	[Optional] the URL in the WebView Default: https://www.google.com/
width	[Optional] the Width of the WebView (the value of CSS property width) Default: 640px
height	[Optional] the Height of the WebView (the value of CSS property height) Default: 480px
autoRefresh	[Optional] Set to true to allow an auto-refresh of the WebView Default: false
autoRefreshInterval	[Optional] the interval of auto-refresh for the WebView, in milliseconds If autoRefresh: true Default: 10 * 60 * 1000
loadedJS	[Optional] the JavaScript code string to be executed after page load Default: undefined

Motivation

When considering about embedding websites to MagicMirror, some websites cannot be embedded using iframe.

There are several reasons, one of that is HTTP response header X-Frame-Options: DENY by the websites makes iframe disable. This is needed for the internet security.

For MagicMirror usage, using WebView instead of iframe may resolve the problem.