fix: Use browser.storage.local.onChanged.addListener (#1755)

Author: marcustyphoon

docs/Chapter 4.2 - Feature modules.md

@@ -18,7 +18,7 @@ The cleanup function of the feature. Called whenever the user disables the featu
 - Type: Async Function
 - Required: No
 
-The preference-handling code of the feature. Added as a `browser.storage.onChanged` listener when the feature is enabled, and removed when the feature is disabled. If the module does not export this function, the feature will be automatically restarted when its preferences are changed.
+The preference-handling code of the feature. Added as a `browser.storage.local.onChanged` listener when the feature is enabled, and removed when the feature is disabled. If the module does not export this function, the feature will be automatically restarted when its preferences are changed.
 
 ## `stylesheet`
 - Type: Boolean

src/action/render_backup.js

@@ -78,11 +78,7 @@ const localRestore = async function () {
 
 const renderLocalBackup = async function () {
   updateLocalExportDisplay();
-  browser.storage.onChanged.addListener((changes, areaName) => {
-    if (areaName === 'local') {
-      updateLocalExportDisplay();
-    }
-  });
+  browser.storage.local.onChanged.addListener(updateLocalExportDisplay);
 
   localCopyButton.addEventListener('click', localCopy);
   localDownloadButton.addEventListener('click', localExport);

src/content_scripts/main.js

@@ -36,21 +36,19 @@
       document.documentElement.append(styleElement);
     }
 
-    restartListeners[name] = async (changes, areaName) => {
-      if (areaName !== 'local') return;
-
+    restartListeners[name] = async (changes) => {
       const { [enabledFeaturesKey]: enabledFeatures } = changes;
       if (enabledFeatures && !enabledFeatures.newValue.includes(name)) return;
 
       if (onStorageChanged instanceof Function) {
-        onStorageChanged(changes, areaName);
+        onStorageChanged(changes);
       } else if (Object.keys(changes).some(key => key.startsWith(`${name}.preferences`) && changes[key].oldValue !== undefined)) {
         await clean?.();
         await main?.();
       }
     };
 
-    browser.storage.onChanged.addListener(restartListeners[name]);
+    browser.storage.local.onChanged.addListener(restartListeners[name]);
   };
 
   const destroyFeature = async function (name) {
@@ -70,15 +68,11 @@
       styleElement.remove();
     }
 
-    browser.storage.onChanged.removeListener(restartListeners[name]);
+    browser.storage.local.onChanged.removeListener(restartListeners[name]);
     delete restartListeners[name];
   };
 
-  const onStorageChanged = async function (changes, areaName) {
-    if (areaName !== 'local') {
-      return;
-    }
-
+  const onStorageChanged = async function (changes) {
     const { [enabledFeaturesKey]: enabledFeatures } = changes;
 
     if (enabledFeatures) {
@@ -114,7 +108,7 @@
   const init = async function () {
     $('style.xkit, link.xkit').remove();
 
-    browser.storage.onChanged.addListener(onStorageChanged);
+    browser.storage.local.onChanged.addListener(onStorageChanged);
 
     const [
       installedFeatures,

src/features/accesskit/disable_gifs.js

@@ -186,9 +186,7 @@ const processRows = function (rowsElements) {
 const processHoverableElements = elements =>
   elements.forEach(element => element.setAttribute(hoverContainerAttribute, ''));
 
-const onStorageChanged = async function (changes, areaName) {
-  if (areaName !== 'local') return;
-
+const onStorageChanged = async function (changes) {
   const { 'accesskit.preferences.disable_gifs_loading_mode': modeChanges } = changes;
   if (modeChanges?.oldValue === undefined) return;
 
@@ -233,11 +231,11 @@ export const main = async function () {
     processRows
   );
 
-  browser.storage.onChanged.addListener(onStorageChanged);
+  browser.storage.local.onChanged.addListener(onStorageChanged);
 };
 
 export const clean = async function () {
-  browser.storage.onChanged.removeListener(onStorageChanged);
+  browser.storage.local.onChanged.removeListener(onStorageChanged);
 
   pageModifications.unregister(processGifs);
   pageModifications.unregister(processBackgroundGifs);

src/features/accesskit/index.js

@@ -23,7 +23,7 @@ const destroyOption = async function (name) {
   }
 };
 
-export const onStorageChanged = async function (changes, areaName) {
+export const onStorageChanged = async function (changes) {
   if (Object.keys(changes).some(key => key.startsWith('accesskit') && changes[key].oldValue !== undefined)) {
     const preferences = await getPreferences('accesskit');
 

src/features/accesskit/visible_alt_text.js

@@ -49,9 +49,7 @@ const processImages = function (imageElements) {
   }
 };
 
-const onStorageChanged = async function (changes, areaName) {
-  if (areaName !== 'local') return;
-
+const onStorageChanged = async function (changes) {
   const { 'accesskit.preferences.visible_alt_text_mode': modeChanges } = changes;
   if (modeChanges?.oldValue === undefined) return;
 
@@ -65,12 +63,12 @@ export const main = async function () {
   ({ visible_alt_text_mode: mode } = await getPreferences('accesskit'));
 
   pageModifications.register(`article ${imageBlockSelector} img[alt]`, processImages);
-  browser.storage.onChanged.addListener(onStorageChanged);
+  browser.storage.local.onChanged.addListener(onStorageChanged);
 };
 
 export const clean = async function () {
   pageModifications.unregister(processImages);
-  browser.storage.onChanged.removeListener(onStorageChanged);
+  browser.storage.local.onChanged.removeListener(onStorageChanged);
 
   $(`.${processedClass} figcaption`).remove();
   $(`.${processedClass}`).removeClass(processedClass);

src/features/no_recommended/index.js

@@ -23,7 +23,7 @@ const destroyOption = async function (name) {
   }
 };
 
-export const onStorageChanged = async function (changes, areaName) {
+export const onStorageChanged = async function (changes) {
   if (Object.keys(changes).some(key => key.startsWith('no_recommended') && changes[key].oldValue !== undefined)) {
     const preferences = await getPreferences('no_recommended');
 

src/features/notificationblock/index.js

@@ -99,7 +99,7 @@ const unblockPostFilter = async ({ id, rebloggedRootId }) => {
   return blockedPostTargetIDs.includes(rootId);
 };
 
-export const onStorageChanged = (changes, areaName) => {
+export const onStorageChanged = (changes) => {
   if (Object.keys(changes).includes(storageKey)) {
     blockedPostTargetIDs = changes[storageKey].newValue;
     styleElement.textContent = buildCss();

src/features/panorama/index.js

@@ -133,7 +133,7 @@ const processPostImages = images => images.forEach(image => {
   }
 });
 
-export const onStorageChanged = async (changes, areaName) =>
+export const onStorageChanged = async (changes) =>
   Object.keys(changes).some(key => key.startsWith('panorama')) && main();
 
 export const main = async () => {

src/features/postblock/index.js

@@ -49,7 +49,7 @@ const blockPost = async rootID => {
   browser.storage.local.set({ [storageKey]: blockedPostRootIDs });
 };
 
-export const onStorageChanged = async function (changes, areaName) {
+export const onStorageChanged = async function (changes) {
   if (Object.keys(changes).includes(storageKey)) {
     ({ newValue: blockedPostRootIDs = [] } = changes[storageKey]);
     pageModifications.trigger(processPosts);