moosetraveller/example.html

## example.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Template Test</title>
</head>
<body>

    <div id="plugin"></div>

    <script>

        void async function () {

            const htmlFile = await fetch('plugin.html');

            const plugin = document.getElementById('plugin');

            plugin.innerHTML = await htmlFile.text();

            const scriptElements = Array.from(plugin.getElementsByTagName('script'));

            for (const scriptElement of scriptElements) {

                const newScriptElement = document.createElement('script');

                if (!!scriptElement.src) {
                    newScriptElement.src = scriptElement.src;
                }
                else {
                    newScriptElement.text = scriptElement.text;
                }

                plugin.appendChild(newScriptElement);
                scriptElement.remove();

                await new Promise((resolve, reject) => {
                    const timeout = setTimeout(() => resolve(), 2000);
                    newScriptElement.onload = () => {
                        clearTimeout(timeout);
                        resolve();
                    };
                });

            }

        } ()

    </script>

</body>
</html>

## plugin.html
<style>
    #map { height: 500px; }
</style>

<div id="map"></div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>

    let map = L.map('map').setView([22.31, 114.17], 13);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML Template Test</title>
	</head>
	<body>

	<div id="plugin"></div>

	<script>

	void async function () {

	const htmlFile = await fetch('plugin.html');

	const plugin = document.getElementById('plugin');

	plugin.innerHTML = await htmlFile.text();

	const scriptElements = Array.from(plugin.getElementsByTagName('script'));

	for (const scriptElement of scriptElements) {

	const newScriptElement = document.createElement('script');

	if (!!scriptElement.src) {
	newScriptElement.src = scriptElement.src;
	}
	else {
	newScriptElement.text = scriptElement.text;
	}

	plugin.appendChild(newScriptElement);
	scriptElement.remove();

	await new Promise((resolve, reject) => {
	const timeout = setTimeout(() => resolve(), 2000);
	newScriptElement.onload = () => {
	clearTimeout(timeout);
	resolve();
	};
	});

	}

	} ()

	</script>

	</body>
	</html>
	<style>
	#map { height: 500px; }
	</style>

	<div id="map"></div>

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

	<script>

	let map = L.map('map').setView([22.31, 114.17], 13);

	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);

	</script>