A MagicMirror² module which embeds multiple other websites with iframe or webview

Overview

MMM-EmbedURL

This is a MagicMirror² module which embeds other websites either by "iframe" (default), "webview" or a custom HTML-element to your mirror. Multiple pages can be embeded at once and the pages can be refreshed periodically (all websites get refreshed at the same time). As "webview" usage is possible (only if electron browser is used) even pages that forbid embedding by "iframe" can be embedded (i.e. NodeRed Dashboard).

I use it to embed my Grafana panels, my NodeRED-Dashboard and a Webpage with a Live-Webcam to my mirror.

Screen showing some Grafana panels

Basic features

  • Embed other websites either by "iframe", "webview" or a custom tag
  • Add icon(s) or title(s) before or after the embeded website (position can be configured)
  • Set different attributes for the elements by nesting
  • Periodically refresh the embedded websites (all sites will be refreshed at once)
  • Display embeded elements depending to the current profile (see MMM-ProfileSwitcher)

Basic installation

cd ~/MagicMirror/modules
git clone https://github.com/Tom-Hirschberger/MMM-EmbedURL.git
cd MMM-EmbedURL
npm install

Basic configuration

Add the following code to your ~/MagicMirror/config/config.js:

{
  module: "MMM-EmbedURL",
  position: "top_center",
  header: "Embed-URL",
  config: {
    updateInterval: 120,
    attributes: [
        "frameborder=0",
    ],
    embed: [
        "https://magicmirror.builders/",
        "https://www.youtube.com/embed/dIHr96KqfDI"
    ]
  },
},

In this a very basic example with the following result:

  • The module will be included at the "top_center" position
  • The header text of the module is "Embed-URL"
  • All embeded pages will be refreshed every 120 seconds
  • All embeded pages will get the attribute "frameborder=0" set
  • Two pages will be embedded

Embed sites that forbid embedding and Cookie banners

If the site(s) you want to embed forbid the embedding by setting some headers there are multiple ways them embed them anyway.

There are extensions for at least Firefox, Chrome and Chromium to remove Cookie banners as well.

Webview usage

If do use the build in electron browser to view the mirror you can use Webview instead. Webview is a little bit slower than IFrame but it ignores the forbid to embed flag. YEEEAAAH!

To activate Webview you need to weaken the security settings of electron!

Set the following options in the mirrors "config.js" file (only the electronOptions!):

...
let config = {
  electronOptions: {
    webPreferences: {
      webviewTag: true,
    }
  },
  address: ...
  port: ...
  basePath: ...
...

You then need to set the "basicElementType" to "webview" in the module configuration.

Firefox browser

You can use the Requestly Extension which is able to remove the headers that prevent sites of being embedded! You then can use a iframe to embed the site.

If the site uses a cookie banner you want to hide you may look at the Super-Agent Extension which does the job even in iframes!

Chrome and Chromium browser

You can use the Requestly Extension which is able to remove the headers that prevent sites of being embedded! You then can use a iframe to embed the site.

If the site uses a cookie banner you want to hide you may look at the I-Dont-Care-About-Cookies Extension which does the job even in iframes!

General options

Option Description Type Default
updateInterval The websites will be refreshed in this interval provided in seconds. Integer 60
animationSpeed The creation of the elements will be animated with this speed in milliseconds. Integer 500
embedElementType The websites will be embeded with this html element. String "iframe"
basicElementType The wrappers use this type of html element. String "span"
positions The elements will be added in the order of the characters in this string (i=icon, t=title, e=embeded). String "tie"
attributes This is a array with additional attributes that should be added to the embeded html element. Array of Strings [
"frameborder=0"
]
title Either a single String or a Array of String that will be added as title. It is supported to add html tags to the title! String null
fontIcon A single String or a Array of String containing the fontawesome 4.7 class definition of icons (i.e. "fa fa-tint"). Array or single String null
imgIcon If you want to use a image as icon instead of fontawesome 4.7 icons you can specify a single URL or a Array of URLs with this option. If both fontIcon and imgIcon are specified the imgIcon will be used! Array or single String null
classes A String containing html classes that should be added to the wrappers. If you use multiple instances of the module you can style them differently this way. String null
embed Either a single URL as String or a Array containing Strings and/or more embed objects (see next section for more information). Array or single String null

The embed array

The module supports multiple ways to specify the websites you want to integrate. The embed array can contain either Strings or objects. The objects can contain the same options "positions", "attributes". "title", "fontIcon", "imgIcon", "classes", "embedElementType" and "embed" as in the main configuration. It is possible to nest the embed objects this way and configure different options for them.

Additionally the "profile" option can be used to set a space separated String of profiles in which this elements should be displayed.

If no positions or attributes are defined in the embed array but in the main configuration the ones in the main configuration will be used!

Lets look at a bigger example:

{
 module: "MMM-EmbedURL",
 position: "top_center",
 header: "Embed-URL",
 config: {
  updateInterval: 30,
  embed: [
   "https://magicmirror.builders/",
   {
    title: "Dummy1",
    profiles: "pageR1 pageL1",
    attributes: [
     "frameborder=0",
     "allowfullscreen",
     "allow=accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    ],
    embed: [
     "https://www.youtube.com/embed/dIHr96KqfDI?autoplay=0",
     "https://dummy:3000/temperaturen?orgId=2&from=1666840667772&to=1666862267772&panelId=4",
    ]
   },
   {
    title: ["Dummy2", "Dummy2-2"],
    fontIcon: "fa fa-tint",
    profiles: "pageR2",
    positions: "ite",
    embed: [
     "https://dummy:3000/temperaturen?orgId=2&from=1666840667772&to=1666862267772&panelId=4",
     "https://dummy:3000/temperaturen?orgId=2&from=1666840776401&to=1666862376402&panelId=2",
     "https://dummy:3000/temperaturen?orgId=2&from=1666840963687&to=1666862563687&panelId=6"
    ]
   },
   {
    imgIcon: "./modules/MMM-EmbedURL/icons/tom.jpg",
    classes: "dummy3 myDummy",
    embedElementType: "webview",
    embed: [
     "https://dummy:3000/humidity?orgId=2&from=1666840580521&to=1666862180521&panelId=4",
     "https://dummy:3000/humidity?orgId=2&from=1666840621970&to=1666862221970&panelId=2",
     
    ]
   },
  ]
 },
 classes: "pageC pageL1 pageR1 pageR2"
},

The following happens in this example:

  • The module is only visible if profile "pageC", "pageL1", "pageR1" or "pageR2" is active
  • The MagicMirror² page will be added in a iframe
  • Three embed objects are created
  • The first object:
    • Defines a single title ("Dummy1") and is only visible if profile "pageR1" or "pageL1" is active
    • Defines other attributes than the default ones
    • Addes two elements: A video of youtube and a dummy
  • The second object:
    • Defines two titles "Dummy2" and "Dummy2-2" and is only visible if profile "pageR2" is active
    • Defines a fontIcon
    • Addes three dummy elements
    • The icon should be added first, after it th title followed by the embeded websites
  • The third object
    • Is visible at all profiles
    • Defines a image icon
    • Adds two dummy elements but not uses the default "iframe" element to embed but "webview" instead
    • All elements get the css classes "dummy3" and "myDummy" added

If you think about the dummy URLs look a little bit like URLs of Grafana panels you are right. I use the module to show my Grafana charts. Examples of howto setup InfluxDB and Grafana are included in the doc directory!

Styling

The module uses flexbox layout and all styling is done via css. Even the size of the embeded elements is controlled via css. All wrappers get default classes added additional classes can be configured with the options described above. The class "embed" will be added to the root wrapper!

Look at the embedURL.css file for inspiration but override and style in your "custom.css"!

The size of the embeded elements is controlled in example with:

.embed .embeded {
    width: 800px;
    height: 400px;
}

I included a example of viewing a webcam showing how to embed it and move the position to hide the menu and footer. Look at the corresponding config and css for more details.

You might also like...

The universal DevTools for LIFF (WebView) browser

The universal DevTools for LIFF (WebView) browser

LIFF Inspector 🔬 The universal DevTools for LIFF (WebView) browser LIFF Inspector is the official DevTools for LIFF(LNE Frontend Framework) that is i

Dec 19, 2022

Sample apps showing how to build music and video apps for Xbox using a WebView.

Sample apps showing how to build music and video apps for Xbox using a WebView.

description languages name page_type products urlFragment Sample showing how to build music and video apps using primarily web technologies for Xbox.

Dec 14, 2022

Webview is a tiny cross-platform library to make web-based GUIs for desktop applications.

Webview is a tiny cross-platform library to make web-based GUIs for desktop applications.

webview_deno deno bindings for webview Webview is a tiny cross-platform library to make web-based GUIs for desktop applications. ⚠️ This project is st

Jan 2, 2023

A Node.js binding to webview

webview-nodejs English | 中文(简体) A Node.js binding to webview, a tiny cross-platform webview library to build modern cross-platform desktop GUIs using

Dec 13, 2022

A module federation SDK which is unrelated to tool chain for module consumer.

A module federation SDK which is unrelated to tool chain for module consumer.

hel-micro, 模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 Demo hel-loadash codesandbox hel-loadash git Why hel-micro 如何使用远程模块 仅需要一句npm命令即可载入远程模块,查看下面例子线上示例 1 安装hel-micr

Jan 3, 2023

True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

TRUE P2P CONCEPT - Lets redecentralize the web This repo is just conceptual. Active development of the endproduct (TRUE P2P) happens here https://gith

Mar 29, 2022

⚡🚀 Call multiple view functions, from multiple Smart Contracts, in a single RPC query!

ethers-multicall ⚡ 🚀 Call multiple view functions, from multiple Smart Contracts, in a single RPC query! Querying an RPC endpoint can be very costly

Dec 30, 2022

This is a test parser which can automatically parse the tests in from websites like codeforces, codechef, atcoder etc.

This is a test parser which can automatically parse the tests in from websites like codeforces, codechef, atcoder etc.

✔ Sublime test parser This is a test parser which can automatically parse the tests in from websites like codeforces, codechef, atcoder etc. See how i

Aug 6, 2022

A fast and powerful http toolkit that take a list of domains to find active domains and other information such as status-code, title, response-time , server, content-type and many other

A fast and powerful http toolkit that take a list of domains to find active domains and other information such as status-code, title, response-time , server, content-type and many other

HTTPFY curently in beta so you may see problems. Please open a Issue on GitHub and report them! A Incredible fast and Powerful HTTP toolkit Report Bug

Dec 22, 2022
Comments
  • Unable to display website:

    Unable to display website:

    I am trying to display the following website. [](https://consultas.avanzagrupo.com/qr/malaga-13801 Here isart of my MM config: ipWhitelist shows the IP of my PI running MM 192.168.2.105 `let config = { address: "localhost", // 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.2.105","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: 24,
    units: "metric",
    zoom: 1.0,
    // 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
    
    ignoreXOriginHeader: true,
    ignoreContentSecurityPolicy: true,
    
    electronOptions: {
    webPreferences: {
    webviewTag: true,
    }
    

    },

    modules: [
    
    {
    

    module: "MMM-EmbedURL", position: "top_center", header: "Embed-URL", config: { updateInterval: 120, attributes: [ "frameborder=0", ], embed: [ "https://consultas.avanzagrupo.com/qr/malaga-13801", "https://magicmirror.builders/", //~ "https://www.youtube.com/embed/dIHr96KqfDI" ] }, },

    No errors when running -> npm run config:check in MM folder I do get the following errors Screenshot 2022-11-16 at 16 16 06 <img width="365" alt="Screenshot 2022-11-16 at 16 15 43" src="https://use Screenshot 2022-11-16 at 16 15 13 r-images.githubusercontent.com/1330110/202235991-76104a9a-7bd4-4534-8d6b-e330bb8e2dc7.png">

    Can you help resolve?

    Thank you & Best wishes.

    opened by stubbsjuk 5
Releases(0.0.4)
  • 0.0.4(Nov 23, 2022)

    This is release 0.0.4 with the following changes:

    • automatic refresh now can be disabled by setting updateInterval to 0 or lower
    • the default basicElementType changed from "span" to "div" as i.e. "webview" does not work properly with "span"
    Source code(tar.gz)
    Source code(zip)
  • 0.0.3(Nov 7, 2022)

  • 0.0.2(Nov 1, 2022)

  • 0.0.1(Oct 28, 2022)

    This is the first release 0.0.1 with the following features:

    • embed other websites
    • choose how often the websites should be refreshed (all at once)
    • choose which websites should be displayed if different profiles are active
    • set custom attributes to the elements that includes the websites
    • choose which HTML element should be used to embed the websites (normally iframe or webview)
    • add icons and/or titles before or after the embedded websites
    • icons can be either images or Font Awesome 4.7 icons
    • the order the icons/titles/elements will be added can be configured
    • different options can be configured for different websites by nesting embed elements
    Source code(tar.gz)
    Source code(zip)
Owner
Thomas Hirschberger
Thomas Hirschberger
MagicMirror² is an open source modular smart mirror platform

MagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.

Michael Teeuw 17.3k Dec 29, 2022
This package creates embeds and buttons in a very simple way using the whatsapp-web.js module for whatsapp

This package creates embeds and buttons in a very simple way using the whatsapp-web.js module for whatsapp

DeathAbyss 17 Jan 3, 2023
Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Demo Features Drag-n-drop for list items in the same pane and between different panes 3 modes: move block, copy block, embed block Automatic reference

null 92 Dec 26, 2022
A web component that allows you to run high level programming languages on your websites (static websites included!)

Code-Runner-Web-Component A web component that allows you to run high level programming languages on your website via the public Piston API Show your

Marketing Pipeline 28 Dec 16, 2022
A lightweight extension to automatically detect and provide verbose warnings for embedded iframe elements in order to protect against Browser-In-The-Browser (BITB) attacks.

Enhanced iFrame Protection - Browser Extension Enhanced iFrame Protection (EIP) is a lightweight extension to automatically detect and provide verbose

odacavo 16 Dec 24, 2022
A postMessage bridge to connect to dapps loaded into an iframe.

cardano-dapp-connector-bridge A postMessage bridge to connect to dApps loaded into an iframe. Motivation In April 2022, browser extensions are the onl

Tastenkunst GmbH 15 Oct 11, 2022
iframe and html5 file uploader

Upload iframe and html5 uploader. ⇪ 演示 查看演示,你需要 clone 一份代码: $ git clone git://github.com/aralejs/upload $ cd upload $ npm install $ spm install $ node

aralejs 85 Apr 7, 2022
A simple javascript utility library to include partial html (iframe alternate) without a framework or jQuery.

alt-iframe A simple javascript utility library to include partial html (iframe alternate) without a framework or jQuery. <!doctype html> <html lang="e

FrontEndNeo 17 Dec 30, 2022
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 57 Dec 28, 2022
macOS Internal Webview App SourceCode

macOS Internal Webview App SourceCode Read First Inspecting Web Views in macOS System Preferences Family Sharing wget https://setup.icloud.com/resourc

不郑 4 Mar 7, 2022