I have a page I want to use as an extension for chrome. It consists of:
-INDEX.HTML:
<html>
<body>
<div id="one">
some things
</div>
<div id="two">
some other things
</div>
</body>
<script type="text/javascript">
toggle();
window.onresize = function() {
toggle();
}
function toggle() {
if (window.innerWidth < 700) {
document.getElementById('one').style.display = 'none';
document.getElementById('two').style.display = 'block';
}
else {
document.getElementById('two').style.display = 'none';
document.getElementById('one').style.display = 'block';
}
}
</script>
-AND MANIFEST.JSON:
{
"name": "New Tab Page",
"description": "Woohoo! Description!",
"version": "1.0.0",
"manifest_version": 2,
"icons": {
"128": "icon.png"
},
"chrome_url_overrides": {
"newtab": "index.html"
}
}
When I open index.html with chrome as a local file, it works just fine, and the text changes when the page is resized. When I open the containing folder in chrome://extensions , enter developer mode, and load it as an unpackaged extension, both #one and #two appear, not just #one.
Is there any way I can fix this?