miljegen/browser-milje
1
0
Fork 0
mirror of https://github.com/miljegen/browser-milje.git synced 2024-12-22 07:27:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

let's try indexdb

Browse Source
This commit is contained in:
vuk 2024-11-04 23:42:55 +01:00
parent 31b725dfc6
commit aa71f952ec
6 changed files with 99 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Makefile Normal file
View File

@ -0,0 +1,13 @@
ENCODED_IMAGES := $(wildcard assets/*.png.64)
IMAGES := $(patsubst assets/%.png.64, images/%.png, $(ENCODED_IMAGES))
out: $(IMAGES)
images/:
mkdir $@
echo '*' > images/.gitignore
images/%.png: assets/%.png.64 | images/
base64 -d $< > $@

6
manifest.json
View File

@ -3,10 +3,14 @@
"name": "browser-milje",
"description": "adds a milje table cloth on top of your browser viewport",
"version": "0.0.2",
"permissions": ["storage", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html",
"default_icon": "assets/browser-milje.png"
},
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "assets/icon-16.png",
"32": "assets/icon-32.png",
@ -16,7 +20,7 @@
"content_scripts": [
{
"matches": ["<all_urls>", "file:///"],
"js": ["scripts/milje.js"]
"js": ["scripts/milje.js", "scripts/contentScript.js"]
}
],
"browser_specific_settings": {

5
popup.html
View File

@ -25,6 +25,11 @@
<body>
<h1>browser-milje!</h1>
<img id="milje" src="assets/milje.png" alt="this should represent the milje">
<input type="file" id="fileInput" accept="image/*">
<button id="uploadButton">upload milje!</button>
<div id="miljeGallery">
</div>
<script src="milje.js"></script>
</body>
</html>

5
scripts/contentScript.js Normal file
View File

@ -0,0 +1,5 @@
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "setMilje") {
document.body.style.background = `url(${message.milje})`;
}
});

58
scripts/milje.js
View File

@ -20,6 +20,64 @@ const style = {
transform : 'translateY(-50%)',
}
function convertImageToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
})
}
function openDatabase() {
return new Promise((resolve, reject) => {
const request = indexedDB.open("MiljeDB", 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains("miljes")) {
db.createObjectStore("miljes", { keyPath: "id", autoIncrement: true });
}
};
request.onsuccess = () => resolve(request.result);
request.onerror = (event) => reject(event.target.error);
});
}
async function saveImage(base64Milje) {
const db = await openDatabase();
const transaction = db.transaction("miljes", "readwrite");
const store = transaction.objectStore("miljes");
return new Promise((resolve, reject) => {
const request = store.add({ image: base64Milje });
request.onsuccess = () => resolve(request.result);
request.onerror = reject;
});
}
async function getMiljes() {
const db = await openDatabase();
const transaction = db.transaction("images", "readonly");
const store = transaction.objectStore("images");
return new Promise((resolve, reject) => {
const request = store.getAll();
request.onsuccess = () => resolve(request.result);
request.onerror = reject;
});
}
async function applyMilje(miljeId) {
const miljes = await getMiljes();
const selectedMilje = images.find(milje => milje.id === miljeId);
if (selectedImage) {
document.body.style.backgroundImage = `url(${selectedMilje.milje})`;
}
}
Object.assign(milje.style, style);
//milje.style.backgroundImage='url(https://www.github.com/miljegen/browser-milje/blob/main/assets/milje.png)';

13
scripts/popup.js Normal file
View File

@ -0,0 +1,13 @@
document.getElementById('uploadButton').addEventListener('click', async () => {
const miljeInput = document.getElementById('fileInput');
const milje = miljeInput.files[0];
if(!milje) {
alert("Please select a milje.");
return;
}
const base64Milje = await convertImageToBase64(milje);
await saveImage(base64Milje);
await displayImage(base64Milje);
})