Merge pull request #1 from HuggeK/experimental

Updated the extension to manifest V3
HuggeK · Jan 27, 2022 · 1f50317 · 1f50317
2 parents bbd1467 + 4ce7c65
commit 1f50317
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,12 @@
 # Veckonr
 ![veckonr_icon_128](https://user-images.githubusercontent.com/48095810/130605912-97ae066b-ae88-4a48-824f-8fb13c3658e4.png)
 
-Ett Chromium tillägg för att snabbt och lätt visa veckonumret. Cred går till [@luddd3!](https://github.com/luddd3) Jag har ändrat så att plugin:et ändrar sig när webbläsaren är i dark mode och uppdaterat ikonerna.
+A Chromium extension to fast and easy show the week number in the browser toolbar. The extension follows the ISO 8601 standard.
 
-Finns att ladda ner på [Microsoft Edge Add-ons store.](https://microsoftedge.microsoft.com/addons/detail/veckonummer/bmoffkcljddjmejkgflbpfcchhjekahf)
+Available to download through [Microsoft Edge Add-ons store: ](https://microsoftedge.microsoft.com/addons/detail/veckonummer/bmoffkcljddjmejkgflbpfcchhjekahf)
 
-Finns att ladda ner på [chrome web store.](https://chrome.google.com/webstore/detail/week-number/dgjiedcgmmfaolcgieilddloapakcfhh)
+Available to download through [chrome web store: ](https://chrome.google.com/webstore/detail/week-number/dgjiedcgmmfaolcgieilddloapakcfhh)
 
 <img width="500" alt="Edge_light_demo" src="https://user-images.githubusercontent.com/48095810/130601346-fef57495-ae29-4160-aa36-65322e1a06c0.png">
-<img width="500" alt="Edge_dark_demo" src="https://user-images.githubusercontent.com/48095810/130601157-f1e16fa9-735f-4cbd-8909-ffcf2c77278c.png">
+
+![Edge screenshot](https://user-images.githubusercontent.com/48095810/151400717-35bf4665-a9f3-482e-b829-dce60486f4a4.png)
diff --git a/images/calendar3.png b/images/calendar3.png
diff --git a/images/calendar4.png b/images/calendar4.png
diff --git a/js/background.html b/js/background.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        var background = new Image();
+    </script>
+</body>
+</html>
diff --git a/js/background.js b/js/background.js
@@ -1,67 +1,105 @@
-chrome.alarms.create('update', {periodInMinutes: 60 * 8});
+chrome.alarms.create("update", { periodInMinutes: 60 * 8 });
 
-chrome.runtime.onInstalled.addListener(function() {
-	init();
+chrome.runtime.onInstalled.addListener(function () {
+  init();
 });
 
-chrome.runtime.onStartup.addListener(function() {
-	init();
+chrome.runtime.onStartup.addListener(function () {
+  init();
 });
 
-chrome.alarms.onAlarm.addListener(function(alarm) {
-	init();
+chrome.alarms.onAlarm.addListener(function (alarm) {
+  init();
 });
 
-var init = function() {
-	var canvas = document.createElement("canvas");
-	var ctx = canvas.getContext("2d");
-	canvas.width = 19;
-	canvas.height = 19;
-
-	moment.locale('sv');
-
-	var background = new Image();
-// Tillagt:
-	const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-	if(userPrefersDark){
-		background.src = "/images/calendar4.png";
-	}
-	else background.src = "/images/calendar3.png";
-
-	background.onload = function() {
-		updateIcon(ctx, canvas, background, userPrefersDark);
-	}
+function getImg() {
+  return new Promise((resolve) => {
+    fetch("/images/calendar3.png")
+      .then((res) => res.blob())
+      .then((data) => {
+        return resolve(data);
+      });
+  });
 }
 
-var updateIcon = function(ctx, canvas, background, userPrefersDark) {
-	drawBackground(ctx, background);
+function buildCanvas(width, height) {
+  const canvas = new OffscreenCanvas(width, height);
+  return canvas;
+}
 
-	var week = moment().format('w');
-	drawText(ctx, week, userPrefersDark);
+var init = async function () {
+  var canvas = buildCanvas(100, 100);
+  var ctx = canvas.getContext("2d");
+  canvas.width = 19;
+  canvas.height = 19;
 
-	chrome.browserAction.setIcon({
-		"imageData": ctx.getImageData(0, 0, canvas.width, canvas.height)
-	});
-}
+  const imgBlobs = await getImg();
+  const background = await createImageBitmap(imgBlobs);
 
-var drawBackground = function(ctx, background) {
-	ctx.drawImage(background, 0, 0);
-}
 
-var drawText = function(ctx, text, userPrefersDark) {
-	var xOffset;
-//Tillagt:
-	if(userPrefersDark){
-    	ctx.fillStyle = 'rgba(255, 255, 255, 255)';
-	}
-	else ctx.fillStyle = 'rgba(0, 0, 0, 255)';
-	ctx.font = "bold 10px Arial";
-
-	if (text.length > 1) {
-		xOffset = 4;
-	} else {
-		xOffset = 7;
-	}
-
-	ctx.fillText(text, xOffset, 15, 19);
-}
+  updateIcon(ctx, canvas, background, false);
+
+};
+
+var updateIcon = function (ctx, canvas, background) {
+  drawBackground(ctx, background);
+
+  function getWeek(date) {
+    if (!(date instanceof Date)) date = new Date();
+
+    // ISO week date weeks start on Monday, so correct the day number
+    var nDay = (date.getDay() + 6) % 7;
+
+    // ISO 8601 states that week 1 is the week with the first Thursday of that year
+    // Set the target date to the Thursday in the target week
+    date.setDate(date.getDate() - nDay + 3);
+
+    // Store the millisecond value of the target date
+    var n1stThursday = date.valueOf();
+
+    // Set the target to the first Thursday of the year
+    // First, set the target to January 1st
+    date.setMonth(0, 1);
+
+    // Not a Thursday? Correct the date to the next Thursday
+    if (date.getDay() !== 4) {
+      date.setMonth(0, 1 + ((4 - date.getDay() + 7) % 7));
+    }
+
+    // The week number is the number of weeks between the first Thursday of the year
+    // and the Thursday in the target week (604800000 = 7 * 24 * 3600 * 1000)
+    return 1 + Math.ceil((n1stThursday - date) / 604800000);
+  }
+  var textnumber = getWeek();
+  var text = String(textnumber);
+
+//    console.log(text);
+
+  drawText(ctx, text);
+
+  chrome.action.setIcon({
+    imageData: ctx.getImageData(0, 0, canvas.width, canvas.height),
+  });
+
+  //   console.log(ctx.getImageData(0, 0, canvas.width, canvas.height));
+};
+
+var drawBackground = function (ctx, background) {
+  ctx.drawImage(background, 0, 0);
+};
+
+var drawText = function (ctx, text) {
+  var xOffset;
+
+  ctx.fillStyle = "rgba(0, 0, 0, 255)";
+
+  ctx.font = "bold 10px Arial";
+
+  if (text.length > 1) {
+    xOffset = 4;
+  } else {
+    xOffset = 7;
+  }
+
+  ctx.fillText(text, xOffset, 15, 19);
+};
diff --git a/js/service_worker.js b/js/service_worker.js
@@ -0,0 +1,5 @@
+try {
+    importScripts("background.js");
+} catch (e) {
+    console.log(e);
+}
diff --git a/libs/moment-with-locales.min.js b/libs/moment-with-locales.min.js
diff --git a/manifest.json b/manifest.json
@@ -1,31 +1,26 @@
 {
-	"manifest_version" : 2,
-	"name": "__MSG_extensionName__",
-	"author": "Mathias Lundell / Hugo Karlsson",
-	"short_name": "Veckonr",
-	"version": "0.2",
-	"description": "__MSG_extensionDescription__",
-	"default_locale": "en",
-	"homepage_url": "https://github.com/HuggeK/veckonr",
-
-	"icons": { "16" : "images/veckonr_icon_300.png",
-		"48" : "images/veckonr_icon_300.png",
-		"128" : "images/veckonr_icon_300.png"
-	},
+  "manifest_version": 3,
+  "name": "__MSG_extensionName__",
+  "author": "Mathias Lundell / Hugo Karlsson",
+  "short_name": "Veckonr",
+  "version": "0.3",
+  "description": "__MSG_extensionDescription__",
+  "default_locale": "en",
+  "homepage_url": "https://github.com/HuggeK/veckonr",
 
-	"permissions": [
-		"alarms"
-	],
+  "icons": {
+    "16": "images/veckonr_icon_300.png",
+    "48": "images/veckonr_icon_300.png",
+    "128": "images/veckonr_icon_300.png"
+  },
 
-	"browser_action": {
-		"default_title": "Veckonummer"
-	},
+  "permissions": ["alarms"],
 
-	"background": {
-		"scripts": [
-			"libs/moment-with-locales.min.js",
-			"js/background.js"
-		],
-		"persistent": false
-	}
+  "action": {
+    "default_title": "Veckonummer"
+  },
+
+  "background": {
+    "service_worker": "js/service_worker.js"
+  }
 }