diff --git a/.github/workflows/esm-lint.yml b/.github/workflows/esm-lint.yml
index f5802fd..7b072cd 100644
--- a/.github/workflows/esm-lint.yml
+++ b/.github/workflows/esm-lint.yml
@@ -81,7 +81,7 @@ jobs:
       - uses: actions/download-artifact@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 16
       - run: echo "${{ env.IMPORT_TEXT }} '${{ env.NPM_MODULE_NAME }}'" > index.mjs
       - run: npm install ./artifact
       - run: node index.mjs
diff --git a/index.ts b/index.ts
index 55fd02a..dba5362 100644
--- a/index.ts
+++ b/index.ts
@@ -3,6 +3,7 @@ import chromeP from 'webext-polyfill-kinda';
 import {isBackground} from 'webext-detect-page';
 import {serialize, deserialize} from 'dom-form-serializer/dist/dom-form-serializer.mjs';
 import LZString from 'lz-string';
+import {onContextInvalidated} from 'webext-events';
 import {loadFile, saveFile} from './file.js';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention -- CJS in ESM imports
@@ -182,6 +183,10 @@ class OptionsSync<UserOptions extends Options> {
 
 		this._form.querySelector('.js-export')?.addEventListener('click', this.exportToFile);
 		this._form.querySelector('.js-import')?.addEventListener('click', this.importFromFile);
+
+		onContextInvalidated.addListener(() => {
+			location.reload();
+		});
 	}
 
 	/**
diff --git a/package.json b/package.json
index cf7f54f..73535bf 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
 		"lz-string": "^1.4.4",
 		"throttle-debounce": "^5.0.0",
 		"webext-detect-page": "^4.0.1",
+		"webext-events": "^1.1.0",
 		"webext-polyfill-kinda": "^1.0.0"
 	},
 	"devDependencies": {