node-hooker/browser-test.html at main · mamedul/node-hooker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>node-hooker Browser Test</title>
        <script>
			// re-write - console.log function
			function appendToConsole(type, args) {
				const consoleDiv = document.getElementById('console');
				const msg = Array.from(args).map(arg => {
					if (typeof arg === 'object') {
						try {
							return JSON.stringify(arg);
						} catch (e) {
							return '[object]';
						}
					}
					return String(arg);
				}).join(' ');

				const el = document.createElement('div');
				let color = '#000';
				switch(type) {
					case 'warn': color = '#b58900'; break;
					case 'error': color = '#dc322f'; break;
					case 'info': color = '#268bd2'; break;
				}
				el.style.color = color;
				el.style.fontFamily = 'monospace';
				el.style.borderBottom = '1px solid #b1b1b1';
				el.style.padding = '2px 4px';
				el.style.margin = '4px 0px';
				el.textContent = `[${type}] ${msg}`;
				consoleDiv.appendChild(el);
			}

			['log', 'warn', 'error', 'info'].forEach(type => {
				const orig = console[type];
				console[type] = function(...args) {
					appendToConsole(type, args);
					orig.apply(console, args);
				};
			});
		</script>
    </head>
    <body>
        <h1>Check the console!</h1>

		<h3>Codes:</h3>
		<p>
		<pre style="width: 100%; background-color: #d1d1d1; color: #444444; padding: 4px 8px;">
&lt;script src="./dist/node-hooker.umd.js"&gt;&lt;/script&gt;
&lt;script&gt;
    // The 'Hooker' global variable is now available!
    console.log(Hooker);

    // You can now use it like you did in Node.js
    Hooker.add_action('browser_event', function(msg){
        console.log(`The browser event fired with message: "${msg}"`);
    });

    Hooker.do_action('browser_event', 'Hello from the browser!');
    // Console output: The browser event fired with message: "Hello from the browser!"

&lt;/script&gt;
		</pre>
		</p>

		<h3>Console:</h3>
		<div id="console" style="background:#d1d1d1; padding:4px 8px;border-radius: 4px; max-height:320px; overflow: auto;"></div>

        <script src="./dist/node-hooker.umd.js"></script>
        <script>
            // The 'Hooker' global variable is now available!
            console.log(Hooker);

            // You can now use it like you did in Node.js
            Hooker.add_action('browser_event', function(msg){
                console.log(`The browser event fired with message: "${msg}"`);
            });

            Hooker.do_action('browser_event', 'Hello from the browser!');
            // Console output: The browser event fired with message: "Hello from the browser!"

        </script>
    </body>
</html>