Running multiple instances

[Plainbroke]

Is there a way to run multiples of this

[mariosgouros]

Same question. While running two instances only the one is updated (probably the first that is read in config.js)

[ifnull]

My guess is that this is because the wrapper targeting is using an ID that is the same for all instances.

[ifnull]

I don't have time to create a PR right now but the changes below seem to resolve the issue. I had to add a couple more config options for my purposes but everything seems to be working for me now. For my use case, I'm loading Wyze cams but I don't want the header nav so I'm removing that via loadedJS. I'm also pulling flight tracking from my locally running feeder and needed to get rid of that header as well. Each module can be independently named allowing multiple modules to work properly but if an id is not specified in the config then it will fallback to default for all. So in order for multiple instances to work, you must specify IDs for each.

const WEBVIEW_ID = 'mmm-webview';

Module.register('MMM-WebView', {
  defaults: {
    url: 'https://www.google.com/',
    height: '640px',
    width: '480px',
    autoRefresh: false,
    autoRefreshInterval: 10 * 60 * 1000,
    autoRefreshIgnoreCache: true,
    loadedJS: undefined,
    id: 'default',
  },
  start: function () {
    if (this.config.autoRefresh) {
      setInterval(() => {
        //Electron.session.defaultSession.clearCache(() => {});
        //this.updateDom();
        const webview = document.getElementById(WEBVIEW_ID + '-' + this.config.id);
        if (this.config.autoRefreshIgnoreCache) {
          webview.reloadIgnoringCache();
        }
      }, this.config.autoRefreshInterval);
    }
  },
  getDom: function () {
    let wrapper = document.createElement('div');
    wrapper.id = `mmm-webview-wrapper-${this.config.id}"`;
    wrapper.innerHTML = `<webview id="${WEBVIEW_ID}-${this.config.id}" style="width: ${this.config.width}; height: ${this.config.height};" src="${this.config.url}"></webview>`;
    return wrapper;
  },
  notificationReceived: function (notification, payload, sender) {
    if (notification == 'MODULE_DOM_CREATED') {
      if (this.config.loadedJS && this.config.loadedJS.length > 0) {
        const webview = document.getElementById(WEBVIEW_ID + '-' + this.config.id);
        if (webview) {
          webview.addEventListener('did-finish-load', () => {
            webview.executeJavaScript(this.config.loadedJS);
          });
        } else {
          // TODO: Show Error
        }
      }
    }
  },
});

Relevant config changes:

let config = {
	address: "localhost",
	port: 8081,
	basePath: "/",
	ipWhitelist: ["0.0.0.0", "127.0.0.1", "::ffff:127.0.0.1", "::1", "192.168.87.126"],	
	useHttps: false,
	httpsPrivateKey: "",
	httpsCertificate: "",
	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR", "DEBUG"],
	timeFormat: 24,
	units: "metric",
	electronOptions: {
		webPreferences: {
			webviewTag: true,
		},
	},

	modules: [
		{
			module: 'MMM-WebView',
			position: 'top_right',
			config: {
				url: 'https://my.wyze.com/live',
				width: '1024px',
				height: '700px',
				autoRefresh: true,
				autoRefreshInterval: 30 * 60 * 1000,
				autoRefreshIgnoreCache: false,
				loadedJS: "document.body.style.overflow='hidden'; document.getElementsByTagName('header')[0].remove(); document.getElementsByClassName('eiaVLh')[0].style['padding-top'] = 0; document.getElementsByClassName('css-1rton0f')[0].style['padding'] = 0; document.getElementsByClassName('css-9crmh6')[0].remove();",
				id: 'wyze',
			},
		},
		{
			module: 'MMM-WebView',
			position: 'top_left',
			config: {
				url: 'http://piaware.local:8080/',
				width: '890px',
				height: '700px',
				loadedJS: "document.getElementById('header').remove(); document.getElementById('layout_container').style['height'] = 'calc(100%)'",
				id: 'piware',
			},
		},
		{
			module: 'MMM-WebView',
			position: 'bottom_left',
			config: {
				url: 'https://tempestwx.com/station/****/',
				width: '640px',
				height: '380px',
				autoRefresh: true,
				autoRefreshInterval: 10 * 60 * 1000,
				autoRefreshIgnoreCache: false,
				loadedJS: "document.body.style.overflow='hidden'; document.getElementsByTagName('header')[0].remove();",
				id: 'weather-summary',
			},
		},
...