Add Reload button that purges site cache via chrome.browsingData

src/extension/_locales/de/messages.json

@@ -743,6 +743,13 @@
   "update_success": {
     "message": "Vorschau erfolgreich aktualisiert, wird neu geladen …"
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "Anmelden"
   },

src/extension/_locales/en/messages.json

@@ -664,6 +664,13 @@
     "update_success": {
       "message": "Preview successfully updated, reloading..."
     },
+    "reload_clear_cache": {
+      "message": "Reload",
+      "description": "Purge site cache and reload the page"
+    },
+    "reload_clear_cache_state": {
+      "message": "Clearing cache and reloading..."
+    },
     "preview_success": {
       "message": "Preview successfully updated, opening Preview..."
     },

src/extension/_locales/es/messages.json

@@ -743,6 +743,13 @@
   "update_success": {
     "message": "Vista previa actualizada correctamente, volviendo a cargar..."
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "Iniciar sesión"
   },

src/extension/_locales/fr/messages.json

@@ -744,6 +744,13 @@
   "update_success": {
     "message": "Aperçu mis à jour. Nouveau chargement..."
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "Se connecter"
   },

src/extension/_locales/it/messages.json

@@ -744,6 +744,13 @@
   "update_success": {
     "message": "Anteprima aggiornata, ricaricamento in corso..."
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "Accedi"
   },

src/extension/_locales/ja/messages.json

@@ -744,6 +744,13 @@
   "update_success": {
     "message": "プレビューが正常に更新されました。リロード中..."
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "ログイン"
   },

src/extension/_locales/ko/messages.json

@@ -744,6 +744,13 @@
   "update_success": {
     "message": "미리보기가 정상적으로 업데이트됨. 다시 로드하는 중..."
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "로그인"
   },

src/extension/_locales/pt_BR/messages.json

@@ -744,6 +744,13 @@
   "update_success": {
     "message": "Visualização atualizada com sucesso. Recarregando..."
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "Fazer logon"
   },

src/extension/_locales/zh_CN/messages.json

@@ -744,6 +744,13 @@
   "update_success": {
     "message": "预览更新成功，正在重新加载……"
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "登录"
   },

src/extension/_locales/zh_TW/messages.json

@@ -744,6 +744,13 @@
   "update_success": {
     "message": "預覽已成功更新，正在重新載入…"
   },
+  "reload_clear_cache": {
+    "message": "Reload",
+    "description": "Purge site cache and reload the page"
+  },
+  "reload_clear_cache_state": {
+    "message": "Clearing cache and reloading..."
+  },
   "user_login": {
     "message": "登入"
   },

src/extension/actions.js

@@ -616,6 +616,32 @@ async function updateProject(_, { config }) {
   }
 }
 
+/**
+ * Purges browser cache (and cache storage) for the current tab's origin and reloads the tab.
+ * @param {chrome.tabs.Tab} tab The tab
+ * @returns {Promise<void>}
+ */
+async function purgeCacheAndReload(tab) {
+  if (!tab?.id || !tab.url) {
+    log.warn('purgeCacheAndReload: no tab or url');
+    return;
+  }
+  try {
+    const { origin } = new URL(tab.url);
+    if (!origin.startsWith('http:') && !origin.startsWith('https:')) {
+      log.warn('purgeCacheAndReload: unsupported origin', origin);
+      return;
+    }
+    await chrome.browsingData.remove(
+      { origins: [origin] },
+      { cache: true, cacheStorage: true },
+    );
+    await chrome.tabs.reload(tab.id, { bypassCache: true });
+  } catch (e) {
+    log.warn('purgeCacheAndReload failed', e);
+  }
+}
+
 /**
  * Actions which can be executed via internal messaging API.
  * @type {Object} The internal actions
@@ -630,6 +656,7 @@ export const internalActions = {
   guessAEMSite,
   updateProject,
   saveDocument,
+  purgeCacheAndReload,
 };
 
 /**

src/extension/app/plugins/reload-cache/reload-cache.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { Plugin } from '../../components/plugin/plugin.js';
+
+/**
+ * @typedef {import('@AppStore').AppStore} AppStore
+ */
+
+/**
+ * @typedef {import('@Types').CorePlugin} CorePlugin
+ */
+
+/**
+ * Creates the reload (purge cache) plugin. Purges all browser caches for the current
+ * site using chrome.browsingData and reloads the page.
+ * @param {AppStore} appStore The app store
+ * @returns {Plugin} The reload-cache plugin
+ */
+export function createReloadCachePlugin(appStore) {
+  return new Plugin({
+    id: 'reload-cache',
+    condition: (store) => store.isContent() && (
+      store.isPreview() || store.isLive() || store.isReview() || store.isProd()
+    ),
+    button: {
+      text: appStore.i18n('reload_clear_cache'),
+      action: async () => {
+        appStore.showToast({
+          message: appStore.i18n('reload_clear_cache_state'),
+          variant: 'info',
+        });
+        await chrome.runtime.sendMessage({ action: 'purgeCacheAndReload' });
+      },
+    },
+  }, appStore);
+}

src/extension/app/store/app.js

@@ -40,6 +40,7 @@ import { createEnvPlugin } from '../plugins/env/env.js';
 import { createEditPlugin } from '../plugins/edit/edit.js';
 import { createPreviewPlugin } from '../plugins/preview/preview.js';
 import { createReloadPlugin } from '../plugins/reload/reload.js';
+import { createReloadCachePlugin } from '../plugins/reload-cache/reload-cache.js';
 import { createDeletePlugin } from '../plugins/delete/delete.js';
 import { createPublishPlugin } from '../plugins/publish/publish.js';
 import { createUnpublishPlugin } from '../plugins/unpublish/unpublish.js';
@@ -288,6 +289,7 @@ export class AppStore {
       const editPlugin = createEditPlugin(this);
       const previewPlugin = createPreviewPlugin(this);
       const reloadPlugin = createReloadPlugin(this);
+      const reloadCachePlugin = createReloadCachePlugin(this);
       const deletePlugin = createDeletePlugin(this);
       const publishPlugin = createPublishPlugin(this);
       const unpublishPlugin = createUnpublishPlugin(this);
@@ -302,6 +304,7 @@ export class AppStore {
       this.registerPlugin(this.corePlugins, editPlugin);
       this.registerPlugin(this.corePlugins, previewPlugin);
       this.registerPlugin(this.corePlugins, reloadPlugin);
+      this.registerPlugin(this.corePlugins, reloadCachePlugin);
       this.registerPlugin(this.corePlugins, deletePlugin);
       this.registerPlugin(this.corePlugins, publishPlugin);
       this.registerPlugin(this.corePlugins, unpublishPlugin);

src/extension/manifest.json

@@ -8,6 +8,7 @@
   "description": "__MSG_description__",
   "permissions": [
     "activeTab",
+    "browsingData",
     "contextMenus",
     "declarativeNetRequest",
     "scripting",

test/app/components/plugin/plugin-action-bar.test.js

@@ -132,6 +132,7 @@ describe('Plugin action bar', () => {
         'env-switcher',
         'edit',
         'reload',
+        'reload-cache',
         'publish',
       ]);
 
@@ -178,6 +179,7 @@ describe('Plugin action bar', () => {
       expectInActionBar([
         'env-switcher',
         'edit',
+        'reload-cache',
         'publish',
       ]);
 
@@ -196,6 +198,7 @@ describe('Plugin action bar', () => {
       expectInActionBar([
         'env-switcher',
         'edit',
+        'reload-cache',
         'publish',
       ]);
 
@@ -324,6 +327,7 @@ describe('Plugin action bar', () => {
         'env-switcher',
         'edit',
         'reload',
+        'reload-cache',
         'publish',
       ]);
 
@@ -361,6 +365,7 @@ describe('Plugin action bar', () => {
         'env-switcher',
         'edit',
         'reload',
+        'reload-cache',
         'publish',
       ]);
 

test/mocks/chrome.js

@@ -80,6 +80,9 @@ export default {
     reload: async () => {},
     update: async () => {},
   },
+  browsingData: {
+    remove: async () => {},
+  },
   scripting: {
     executeScript: async ({ func, args = [] }) => {
       if (typeof func === 'function') {