Update to comply with chrome manifest v3

CHANGELOG.md

@@ -1,6 +1,16 @@
 Changelog
 =========
 
+### v1.8.0 / 2025-04-06
+
+  - Update extension to Manifest V3 to comply with Chrome requirements
+  - Update CSS variable selectors to match GitHub's current implementation
+  - Modernize Chrome Storage API with Promise-based approach
+  - Add proper error handling with detailed error messages
+  - Add required "action" field to replace deprecated "browser_action"
+  - Improve code readability with modern JavaScript syntax
+  - Enhance error logging for better debugging
+
 ### v1.7.2 / 2020-10-30
 
   - Fix contribution graph and progress bar colors (new GitHub CSS variables)

src/js/contentscript.js

@@ -69,11 +69,11 @@ var colors = {
 };
 
 var cssGitHubVars = [
-  '--color-calendar-graph-day-bg',
-  '--color-calendar-graph-day-L1-bg',
-  '--color-calendar-graph-day-L2-bg',
-  '--color-calendar-graph-day-L3-bg',
-  '--color-calendar-graph-day-L4-bg'
+  '--contribution-default-bgColor-0',
+  '--contribution-default-bgColor-1',
+  '--contribution-default-bgColor-2',
+  '--contribution-default-bgColor-3',
+  '--contribution-default-bgColor-4'
 ];
 
 var randomColor = randomProperty(colors);
@@ -129,15 +129,16 @@ function applyColorToActivity (color) {
 }
 
 function applyOptions () {
-  chrome.storage.local.get('favoriteColor', function (color) {
-    if (!color.favoriteColor) {
-      color.favoriteColor = 'halloween';
-    } else if (color.favoriteColor === 'random') {
-      color.favoriteColor = randomColor;
+  chrome.storage.local.get(['favoriteColor']).then((result) => {
+    let colorName = result.favoriteColor || 'halloween';
+    if (colorName === 'random') {
+      colorName = randomColor;
     }
-    applyColorToCssGitHubVars(colors[color.favoriteColor]);
-    applyColorToLegend(colors[color.favoriteColor]);
-    applyColorToActivity(colors[color.favoriteColor]);
+    applyColorToCssGitHubVars(colors[colorName]);
+    applyColorToLegend(colors[colorName]);
+    applyColorToActivity(colors[colorName]);
+  }).catch((error) => {
+    console.error(`Error when getting stored color: ${error}`);
   });
 }
 

src/js/options.js

@@ -4,20 +4,24 @@ function saveOptions () {
   var color = document.getElementById('color').value;
   chrome.storage.local.set({
     favoriteColor: color
-  }, function () {
+  }).then(() => {
     var status = document.getElementById('status');
     status.textContent = 'Options saved.';
     setTimeout(function () {
       status.textContent = '';
     }, 750);
+  }).catch((error) => {
+    console.error(`Error when saving options: ${error}`);
   });
 }
 
 function restoreOptions () {
   chrome.storage.local.get({
     favoriteColor: 'halloween'
-  }, function (items) {
+  }).then((items) => {
     document.getElementById('color').value = items.favoriteColor;
+  }).catch((error) => {
+    console.error(`Error when restoring options: ${error}`);
   });
 }
 

src/manifest.json

@@ -1,8 +1,8 @@
 {
   "name": "GitHub Contribution Color Graph",
   "description": "Change colors of contribution graph in GitHub",
-  "manifest_version": 2,
-  "version": "1.7.2",
+  "manifest_version": 3,
+  "version": "1.8.0",
 
   "content_scripts": [{
     "js": [ "js/contentscript.js" ],
@@ -23,5 +23,13 @@
     "16": "images/icon-16.png",
     "48": "images/icon-48.png",
     "128": "images/icon-128.png"
+  },
+
+  "action": {
+    "default_icon": {
+      "16": "images/icon-16.png",
+      "48": "images/icon-48.png",
+      "128": "images/icon-128.png"
+    }
   }
 }