From aa71f952ecba5040a87bf79aa81eeba027d6a79a Mon Sep 17 00:00:00 2001 From: vuk Date: Mon, 4 Nov 2024 23:42:55 +0100 Subject: [PATCH] let's try indexdb --- Makefile | 13 +++++++++ manifest.json | 6 ++++- popup.html | 5 ++++ scripts/contentScript.js | 5 ++++ scripts/milje.js | 58 ++++++++++++++++++++++++++++++++++++++++ scripts/popup.js | 13 +++++++++ 6 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 Makefile create mode 100644 scripts/contentScript.js create mode 100644 scripts/popup.js diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..2c8fb9f --- /dev/null +++ b/Makefile @@ -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 $< > $@ + + + diff --git a/manifest.json b/manifest.json index 9a06541..20139be 100644 --- a/manifest.json +++ b/manifest.json @@ -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": ["", "file:///"], - "js": ["scripts/milje.js"] + "js": ["scripts/milje.js", "scripts/contentScript.js"] } ], "browser_specific_settings": { diff --git a/popup.html b/popup.html index c94e73e..804ec78 100644 --- a/popup.html +++ b/popup.html @@ -25,6 +25,11 @@

browser-milje!

this should represent the milje + + +
+ +
\ No newline at end of file diff --git a/scripts/contentScript.js b/scripts/contentScript.js new file mode 100644 index 0000000..f08490b --- /dev/null +++ b/scripts/contentScript.js @@ -0,0 +1,5 @@ +chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if (message.type === "setMilje") { + document.body.style.background = `url(${message.milje})`; + } +}); \ No newline at end of file diff --git a/scripts/milje.js b/scripts/milje.js index f3a30b9..323709c 100644 --- a/scripts/milje.js +++ b/scripts/milje.js @@ -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)'; diff --git a/scripts/popup.js b/scripts/popup.js new file mode 100644 index 0000000..77f4295 --- /dev/null +++ b/scripts/popup.js @@ -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); +}) \ No newline at end of file