BarryCarlyon/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>

    <link rel="stylesheet" href="style.css" />
    <title>Testing Extension</title>
</head>
<body>
    <div id="content">
        <div id="buttons">
            <p>Actions</p>
            <button id="share">Login/Logout</button>
        </div>

        <div id="error"></div>
        <table>
            <tr><td>onAuthorized</td><td id="onAuthorized"></td></tr>
            <tr><td>isLinked</td><td id="isLinked"></td></tr>
        </table>

        <p>onAuthorized Data</p>
        <table id="onAuthorizedData"></table>
        <p>context data</p>
        <table id="context"></table>

        <p>onHighlightChanged data</p>
        <table id="onHighlightChanged"></table>
        <p>onVisibilityChanged data</p>
        <table id="onVisibilityChanged"></table>

        <p>featureflags data</p>
        <table id="features"></table>
        <p>featureflags onchanged data</p>
        <div id="features_onchanged"></div>

        <p>viewer data</p>
        <table id="viewer"></table>
        <p>viewer onchanged data</p>
        <table id="viewer_onchanged"></div>

        <p>Query Params</p>
        <div id="query_params"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

## script.js
var p = {};
var params = new URLSearchParams(window.location.search);
params.forEach((value, key) => {
    p[key] = value;
});
iterateObject(document.getElementById('query_params'), p);

window.Twitch.ext.onAuthorized((auth) => {
    document.getElementById('onAuthorized').textContent = new Date();

    iterateObject(document.getElementById('onAuthorizedData'), auth);

    if (window.Twitch.ext.viewer.isLinked) {
        document.getElementById('isLinked').textContent = 'isLinked';
    } else {
        document.getElementById('isLinked').textContent = 'isUnLinked';
    }

    iterateObject(document.getElementById('viewer'), window.Twitch.ext.viewer);
    window.Twitch.ext.viewer.onChanged((dat) => {
        document.getElementById('viewer_onchanged', JSON.stringify(dat));
    });

    iterateObject(document.getElementById('features'), window.Twitch.ext.features);
    window.Twitch.ext.features.onChanged((dat) => {
        console.log('FEATURES CHANGED', dat);
        document.getElementById('features_onchanged', JSON.stringify(dat));
    });
});

window.Twitch.ext.onContext((ctx) => {
    iterateObject(document.getElementById('context'), ctx);
});
window.Twitch.ext.onError((err) => {
    console.error(err);
    document.getElementById('error').textContent(err);
});
window.Twitch.ext.onHighlightChanged((isHighlighted) => {
    iterateObject(document.getElementById('onHighlightChanged'), isHighlighted);
});
window.Twitch.ext.onVisibilityChanged((isHighlighted) => {
    iterateObject(document.getElementById('onVisibilityChanged'), isHighlighted);
});

function iterateObject(target, obj) {
    target.textContent = '';
    var r = document.createElement('tr');
    target.append(r);
    var d = document.createElement('td');
    r.append(d);
    var d = document.createElement('td');
    r.append(d);
    d.setAttribute('colspan', 2);
    d.textContent = new Date();
    for (var k in obj) {
//        console.log(k, typeof obj[k], obj[k]);

        var r = document.createElement('tr');
        target.append(r);
        var d = document.createElement('td');
        r.append(d);
        d.textContent = k;

        var d = document.createElement('td');
        r.append(d);
        d.textContent = typeof obj[k];

        var d = document.createElement('td');
        r.append(d);
        if (typeof obj[k] == 'string' || typeof obj[k] == 'boolean' || typeof obj[k] == 'number') {
            d.textContent = obj[k];
        } else if (typeof obj[k] == 'object') {
            //d.setAttribute('id', k + '_data');
            var t = document.createElement('table');
            iterateObject(t, obj[k]);
        }
    }
}

document.getElementById('share').addEventListener('click', (e) => {
    e.preventDefault();

    window.Twitch.ext.actions.requestIdShare();
});

## style.css
html, body, #content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#content {
    overflow: scroll;
}
body {

    background: #EEEEEE;
    color: #111111;

    font-size: 30px;
    font-family: Verdana;
}
body.twitch_dark {
    background: #111111;
    color: #EEEEEE;
}

#logged_in,
#logged_out {
    display: none;
}

.logged_in #logged_in,
.logged_out #logged_out {
    display: block
}

table, button {
    width: 100%;
}
img {
    width: 50%;
}
th, td {
    font-size: 15px;
    padding: 2px 3px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

tr td:first-child { text-align: right; }
tr td { text-align: left; }
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>

	<link rel="stylesheet" href="style.css" />
	<title>Testing Extension</title>
	</head>
	<body>
	<div id="content">
	<div id="buttons">
	<p>Actions</p>
	<button id="share">Login/Logout</button>
	</div>

	<div id="error"></div>
	<table>
	<tr><td>onAuthorized</td><td id="onAuthorized"></td></tr>
	<tr><td>isLinked</td><td id="isLinked"></td></tr>
	</table>

	<p>onAuthorized Data</p>
	<table id="onAuthorizedData"></table>
	<p>context data</p>
	<table id="context"></table>

	<p>onHighlightChanged data</p>
	<table id="onHighlightChanged"></table>
	<p>onVisibilityChanged data</p>
	<table id="onVisibilityChanged"></table>

	<p>featureflags data</p>
	<table id="features"></table>
	<p>featureflags onchanged data</p>
	<div id="features_onchanged"></div>

	<p>viewer data</p>
	<table id="viewer"></table>
	<p>viewer onchanged data</p>
	<table id="viewer_onchanged"></div>

	<p>Query Params</p>
	<div id="query_params"></div>
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	var p = {};
	var params = new URLSearchParams(window.location.search);
	params.forEach((value, key) => {
	p[key] = value;
	});
	iterateObject(document.getElementById('query_params'), p);

	window.Twitch.ext.onAuthorized((auth) => {
	document.getElementById('onAuthorized').textContent = new Date();

	iterateObject(document.getElementById('onAuthorizedData'), auth);

	if (window.Twitch.ext.viewer.isLinked) {
	document.getElementById('isLinked').textContent = 'isLinked';
	} else {
	document.getElementById('isLinked').textContent = 'isUnLinked';
	}

	iterateObject(document.getElementById('viewer'), window.Twitch.ext.viewer);
	window.Twitch.ext.viewer.onChanged((dat) => {
	document.getElementById('viewer_onchanged', JSON.stringify(dat));
	});

	iterateObject(document.getElementById('features'), window.Twitch.ext.features);
	window.Twitch.ext.features.onChanged((dat) => {
	console.log('FEATURES CHANGED', dat);
	document.getElementById('features_onchanged', JSON.stringify(dat));
	});
	});

	window.Twitch.ext.onContext((ctx) => {
	iterateObject(document.getElementById('context'), ctx);
	});
	window.Twitch.ext.onError((err) => {
	console.error(err);
	document.getElementById('error').textContent(err);
	});
	window.Twitch.ext.onHighlightChanged((isHighlighted) => {
	iterateObject(document.getElementById('onHighlightChanged'), isHighlighted);
	});
	window.Twitch.ext.onVisibilityChanged((isHighlighted) => {
	iterateObject(document.getElementById('onVisibilityChanged'), isHighlighted);
	});

	function iterateObject(target, obj) {
	target.textContent = '';
	var r = document.createElement('tr');
	target.append(r);
	var d = document.createElement('td');
	r.append(d);
	var d = document.createElement('td');
	r.append(d);
	d.setAttribute('colspan', 2);
	d.textContent = new Date();
	for (var k in obj) {
	// console.log(k, typeof obj[k], obj[k]);

	var r = document.createElement('tr');
	target.append(r);
	var d = document.createElement('td');
	r.append(d);
	d.textContent = k;

	var d = document.createElement('td');
	r.append(d);
	d.textContent = typeof obj[k];

	var d = document.createElement('td');
	r.append(d);
	if (typeof obj[k] == 'string' \|\| typeof obj[k] == 'boolean' \|\| typeof obj[k] == 'number') {
	d.textContent = obj[k];
	} else if (typeof obj[k] == 'object') {
	//d.setAttribute('id', k + '_data');
	var t = document.createElement('table');
	iterateObject(t, obj[k]);
	}
	}
	}

	document.getElementById('share').addEventListener('click', (e) => {
	e.preventDefault();

	window.Twitch.ext.actions.requestIdShare();
	});
	html, body, #content {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	}
	#content {
	overflow: scroll;
	}
	body {

	background: #EEEEEE;
	color: #111111;

	font-size: 30px;
	font-family: Verdana;
	}
	body.twitch_dark {
	background: #111111;
	color: #EEEEEE;
	}

	#logged_in,
	#logged_out {
	display: none;
	}

	.logged_in #logged_in,
	.logged_out #logged_out {
	display: block
	}

	table, button {
	width: 100%;
	}
	img {
	width: 50%;
	}
	th, td {
	font-size: 15px;
	padding: 2px 3px;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	}

	tr td:first-child { text-align: right; }
	tr td { text-align: left; }