Add toggle functionality to web extension

This commit is contained in:
Cecylia Bocovich 2019-06-26 20:21:44 -04:00
parent ead579a6e9
commit 799a13d385
5 changed files with 37 additions and 3 deletions

View file

@ -13,5 +13,6 @@
},
"default_title": "Snowflake",
"default_popup": "popup.html"
}
},
"permissions": ["cookies", "https://snowflake.torproject.org/"]
}

View file

@ -12,9 +12,9 @@
<p></p>
</div>
<div class="b toggle">
<label>Turn Off</label>
<label id=toggle>Turn On</label>
<label class="switch">
<input type="checkbox" checked>
<input id="enabled" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>

View file

@ -11,4 +11,17 @@ port.onMessage.addListener((m) => {
const clients = active ? 1 : 0;
ps[0].innerText = `${clients} client${(clients !== 1) ? 's' : ''} connected.`;
ps[1].innerText = `Your snowflake has helped ${m.total} user${(m.total !== 1) ? 's' : ''} circumvent censorship in the last 24 hours.`;
const enabled = m.enabled
const enabledText = document.getElementById('toggle');
if (enabled) {
document.getElementById('enabled').checked = true;
enabledText.innerText = 'Turn Off';
} else {
document.getElementById('enabled').checked = false;
enabledText.innerText = 'Turn On';
}
});
document.addEventListener('change', (event) => {
port.postMessage({enabled: event.target.checked});
})