diff --git a/.gitignore b/.gitignore
index c40289d..42cfbbb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,5 +37,4 @@ jspm_packages
 .node_repl_history
 
 .DS_Store
-dist
-package
+web-ext-profile
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 821f172..d2591f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
 Changelog
 =========
 
+### unreleased
+  - replace [`grunt`](https://gruntjs.com) with [`web-ext`](https://extensionworkshop.com)
+
 ### v1.7.2 / 2020-10-30
 
   - Fix contribution graph and progress bar colors (new GitHub CSS variables)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a976ec0..8eca953 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -13,59 +13,40 @@ Setup
 npm i
 ```
 
-Test
-----
-
-```bash
-npm t
-```
+Run
+---
 
-Build
------
+Chrome:
 
 ```bash
-npm run build
+npm run -- serve:chromium
 ```
 
-or
+This will open a new chromium browser window with a temporary profile
+and the web extension already loaded.
+
+Firefox:
 
 ```bash
-npm run serve
+npm run -- serve:firefox
 ```
 
-to update source continuously.
+This will open a new firefox browser window with a temporary profile
+and the web extension already loaded.
 
-Run
----
-
-Chrome:
-
-1. Open Tools -> Extensions
-2. Check the "Developer Mode" option (if not already)
-3. Select "Load unpacked extension"
-4. Navigate to the project `github-contribution-color-graph/dist/chrome` and click select
-
-Firefox:
-
-1. Open Tools -> Add-ons
-2. Click "Debug Add-ons"
-3. Check the "Enable add-on debugging" option (if not already)
-4. Select "Load Temporary Add-on"
-5. Navigate to the project `github-contribution-color-graph/dist/firefox` and click open
-  
 Opera:
 
 1. View -> Show Extensions
 2. Click on "Developer Mode" button (if not already)
 3. Click on "Load Unpacked Extension..."
-4. Navigate to the project `github-contribution-color-graph/dist/chrome` and click select
-  
+4. Navigate to the project `github-contribution-color-graph/src` and click select
+
 Edge Chromium:
 
 1. `...` -> Extensions
 2. Click on "Developer Mode" button (if not already)
 3. Click on "Load Unpacked"
-4. Navigate to the project `github-contribution-color-graph/dist/chrome` and click select
+4. Navigate to the project `github-contribution-color-graph/src` and click select
 
 Package
 -------
@@ -74,6 +55,11 @@ Package
 npm run package
 ```
 
+Note : The `package` script is maintained for backward-compatibility.
+The web extension can now be packaged with the built-in `npm pack`
+command which generates a neat tarball with the required files. Usage
+of the `npm pack` command is encouraged over `npm run -- package`.
+
 License
 -------
 
diff --git a/grunt/aliases.yml b/grunt/aliases.yml
deleted file mode 100644
index 54b9991..0000000
--- a/grunt/aliases.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-test:
-  - 'eslint'
-
-build:
-  - 'test'
-  - 'copy:buildChrome'
-  - 'copy:buildFirefox'
-
-package:
-  - 'build'
-  - 'compress'
-
-serve:
-  - 'build'
-  - 'watch'
-
-default:
-  - 'serve'
diff --git a/grunt/compress.js b/grunt/compress.js
deleted file mode 100644
index d02054e..0000000
--- a/grunt/compress.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-module.exports = function (grunt, options) {
-  return {
-    chrome: {
-      options: {
-        archive: 'package/chrome-v' + options.package.version + '.zip'
-      },
-      files: [{
-        src: '**/*',
-        cwd: 'dist/chrome/',
-        dest: '',
-        expand: true
-      }]
-    },
-    firefox: {
-      options: {
-        archive: 'package/firefox-v' + options.package.version + '.zip'
-      },
-      files: [{
-        src: '**/*',
-        cwd: 'dist/firefox/',
-        dest: '',
-        expand: true
-      }]
-    }
-  };
-};
diff --git a/grunt/copy.js b/grunt/copy.js
deleted file mode 100644
index 9e268e9..0000000
--- a/grunt/copy.js
+++ /dev/null
@@ -1,35 +0,0 @@
-'use strict';
-
-module.exports = function (grunt, options) {
-  return {
-    buildChrome: {
-      files: [{
-        expand: true,
-        cwd: 'src/',
-        src: ['js/**', 'css/**', 'images/**', '*.html', 'manifest.json'],
-        dest: 'dist/chrome/',
-        nonull: true
-      }]
-    },
-    buildFirefox: {
-      files: [{
-        expand: true,
-        cwd: 'src/',
-        src: ['js/**', 'css/**', 'images/**', '*.html'],
-        dest: 'dist/firefox/',
-        nonull: true
-      }, {
-        expand: true,
-        cwd: 'src/',
-        src: ['manifest.firefox.json'],
-        dest: 'dist/firefox/',
-        nonull: true,
-        rename: function (destBase, destPath) {
-          return destBase + destPath.replace(
-            'manifest.firefox.json', 'manifest.json'
-          );
-        }
-      }]
-    }
-  };
-};
diff --git a/grunt/eslint.js b/grunt/eslint.js
deleted file mode 100644
index 3d9be92..0000000
--- a/grunt/eslint.js
+++ /dev/null
@@ -1,8 +0,0 @@
-'use strict';
-
-module.exports = {
-  options: {
-    configFile: '.eslintrc.json'
-  },
-  target: ['**/*.js', '!node_modules/**/*.js', '!dist/**/*.js']
-};
diff --git a/grunt/watch.js b/grunt/watch.js
deleted file mode 100644
index deb3b86..0000000
--- a/grunt/watch.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-module.exports = {
-  build: {
-    files: [
-      'src/**/*',
-      'test/**/*'
-    ],
-    tasks: ['build']
-  },
-  options: {
-    livereload: true
-  }
-};
diff --git a/gruntfile.js b/gruntfile.js
deleted file mode 100644
index f6dface..0000000
--- a/gruntfile.js
+++ /dev/null
@@ -1,5 +0,0 @@
-'use strict';
-
-module.exports = function (grunt) {
-  require('load-grunt-config')(grunt);
-};
diff --git a/package.json b/package.json
index 32517a0..c841b78 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,12 @@
   "engines": {
     "node": ">=10"
   },
+  "files": [ "src" ],
   "scripts": {
-    "build": "grunt build",
-    "package": "grunt package",
-    "serve": "grunt serve",
-    "test": "grunt test"
+    "package": "npm pack",
+    "serve:firefox": "web-ext run --target firefox-desktop",
+    "serve:chromium": "web-ext run --target chromium",
+    "lint": "eslint src"
   },
   "devDependencies": {
     "eslint-config-standard": "^14.1.1",
@@ -22,11 +23,18 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "grunt": "^1.1.0",
-    "grunt-contrib-compress": "^1.6.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-watch": "^1.1.0",
-    "load-grunt-config": "^3.0.1",
-    "grunt-eslint": "^23.0.0"
+    "web-ext": "^6.0.0"
+  },
+  "webExt": {
+    "sourceDir": "src",
+    "run": {
+      "profileCreateIfMissing": true,
+      "keepProfileChanges": true,
+      "firefoxProfile": "./web-ext-profile/firefox",
+      "chromiumProfile": "./web-ext-profile/chromium",
+      "startUrl": [
+        "github.com/williambelle"
+      ]
+    }
   }
 }
diff --git a/src/manifest.firefox.json b/src/manifest.firefox.json
deleted file mode 100644
index 70ea8c8..0000000
--- a/src/manifest.firefox.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "GitHub Contribution Color Graph",
-  "description": "Change colors of contribution graph in GitHub",
-  "manifest_version": 2,
-  "version": "1.7.2",
-
-  "applications": {
-    "gecko": {
-      "strict_min_version": "57.0",
-      "id": "github-contribution-color-graph@example.com"
-    }
-  },
-
-  "content_scripts": [{
-    "js": [ "js/contentscript.js" ],
-    "matches": [ "https://github.com/*" ],
-    "run_at": "document_end"
-  }],
-
-  "options_ui": {
-    "page": "options.html",
-    "open_in_tab": true
-  },
-
-  "permissions": [
-    "storage"
-  ],
-
-  "icons": {
-    "48": "images/icon-48.png"
-  }
-}
diff --git a/src/manifest.json b/src/manifest.json
index a4e7d28..53d8e82 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -4,6 +4,13 @@
   "manifest_version": 2,
   "version": "1.7.2",
 
+  "applications": {
+    "gecko": {
+      "strict_min_version": "57.0",
+      "id": "github-contribution-color-graph@example.com"
+    }
+  },
+
   "content_scripts": [{
     "js": [ "js/contentscript.js" ],
     "matches": [ "https://github.com/*" ],