milje.js: toggle milje

This commit is contained in:
He4eT 2024-08-15 18:44:31 +02:00
commit 31fcd6ced2
5 changed files with 60 additions and 11 deletions

View file

@ -1,3 +1,7 @@
const browser = (globalThis.browser ?? globalThis.chrome)
/* */
start()
/* */
@ -12,18 +16,13 @@ function start () {
})
.then(assureParams)
.then(run)
.then(setMessageListener)
}
/* Params */
function getParamsFromStorage () {
/**
* Sorry, you are not allowed to use import in the content_script :c
* Copy'n'paste of storage here!
*/
const storage = (globalThis.browser ?? globalThis.chrome)['storage']
return storage.local.get(['params'])
return browser.storage.local.get(['params'])
.then(({params}) => params)
}
@ -56,6 +55,24 @@ function run({ randomSeed, halfPatternSize, scaleFactor, gridSize }) {
const miljeCanvas = matrixToCanvas(pattern, halfPatternSize, scaleFactor)
document.body.appendChild(miljeCanvas)
return miljeCanvas
}
function setMessageListener (miljeCanvas) {
if (!('runtime' in browser)) {
console.log('Milje 2077 extension cannot set up listener.')
return
}
browser.runtime.onMessage.addListener((message) => {
switch (message.command) {
case 'toggleMilje':
miljeCanvas.hidden = !miljeCanvas.hidden
break
default:
console.log('Milje 2077 extension recieved unsupported message.')
}
})
}
/* Parts */

View file

@ -3,9 +3,31 @@
<head>
<meta charset="UTF-8">
<title>Milje-2077</title>
<style>
html, body {
text-align: center;
font-family: sans;
}
main {
width: 200px;
}
button {
display: block;
box-sizing: border-box;
width: 100%;
margin: 8px 0;
}
</style>
</head>
<body>
test
<main>
<h1>Milje 2077</h1>
<button id="toggleMiljeButton">Toggle the Milje</button>
<button id="openSettingsButton">Open Settings</button>
</main>
<script type="module" src="./popup.js"></script>
</body>
</html>

View file

@ -1,3 +1,13 @@
import { storage } from '../../scripts/storage.js'
import { browser } from '../../scripts/browser.js'
storage.local.set({'params': {scaleFactor: 128}})
document.getElementById('toggleMiljeButton').onclick = () => {
browser.tabs.query({active: true, currentWindow: true})
.then(([tab]) => browser.tabs.sendMessage(tab.id, {
command: 'toggleMilje',
}))
}
document.getElementById('openSettingsButton').onclick = () => {
browser.storage.local.set({'params': {scaleFactor: 16}})
console.log('openSettingsButton')
}

1
scripts/browser.js Normal file
View file

@ -0,0 +1 @@
export const browser = (globalThis.browser ?? globalThis.chrome)

View file

@ -1 +0,0 @@
export const storage = (window.browser ?? window.chrome)['storage']