miljegen/browser-milje
1
0
Fork 0
mirror of https://github.com/miljegen/browser-milje.git synced 2025-09-01 08:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: miljegen:a009f6425cabbaae9a6656f95c3826492dc85069
Branches Tags
miljegen:main miljegen:js-edit
miljegen:v0.0.1
..
compare: miljegen:main
Branches Tags
miljegen:main miljegen:js-edit
miljegen:v0.0.1

2 Commits
a009f6425c ... main

Author SHA1 Message Date
vuk
aa71f952ec let's try indexdb 2024-11-04 23:42:55 +01:00
vuk
31b725dfc6 milje.js now outputs the version number from the manifest file(testing something out) 2024-09-22 14:03:01 +02:00
6 changed files with 109 additions and 4 deletions
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 $< > $@

14
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",
@@ -15,9 +19,13 @@
},
"content_scripts": [
{
"matches": ["<all_urls>", "file:///"],
"js": ["scripts/milje.js"]
"js": ["scripts/milje.js", "scripts/contentScript.js"]
}
]
],
"browser_specific_settings": {
"gecko": {
"id": ""
}
}
}

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})`;
}
});

63
scripts/milje.js
View File

@@ -1,4 +1,7 @@
console.log("browser-milje version 0.0.1")
const manifestData = chrome.runtime.getManifest();
const version = manifestData.version;
console.log("browser-milje version " + version);
const milje = document.createElement('div');
const style = {
@@ -17,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);
})