mirror of
https://github.com/He4eT/browser-milje-2077.git
synced 2026-05-04 17:07:24 +00:00
milje.js: toggle milje
This commit is contained in:
parent
8571446097
commit
31fcd6ced2
5 changed files with 60 additions and 11 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
1
scripts/browser.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const browser = (globalThis.browser ?? globalThis.chrome)
|
||||
|
|
@ -1 +0,0 @@
|
|||
export const storage = (window.browser ?? window.chrome)['storage']
|
||||
Loading…
Add table
Add a link
Reference in a new issue