From 11bdc966054b876f50a5415d66dc9c0f507c961d Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Wed, 2 Aug 2023 15:48:21 +0100
Subject: [PATCH] UX Improvements

This includes a lot of UX improvements and cleanup, done while the research for other features/improvements was underway:

- The extension can now be used without granting the `activeTab` permission, where it'll just behave as it did before `0.3`, simply allowing Kagi to be used in private sessions (#19)
- The extension should now be fully usable in Firefox for Android (#3)
- The extension will now look for the active tab of the last focused window (alternative fix to Edge issue reported in #24 with multiple windows)
- I confirmed the extension works as expected in Edge (and Brave, besides Chrome) without any new (invasive) permissions (#23)
- Using Cecil will now not call the API, even if an API Key is set (https://kagifeedback.org/d/1751-enable-kagi-api-users-to-use-universal-summarizer-cecil-without-incurring-api-charges)
- Confirmed there's no other current way of storing the session that survives clearing of session data (https://kagifeedback.org/d/1754-restarting-the-firefox-browser-signs-me-out-of-kagi)

Additionally, I looked into sending the tab's HTML/Text content instead of the URL with a setting/dropdown (https://discord.com/channels/849884108750061568/1050508822864732170/1125156451015475364), but decided against it, because we would need access to the tab's DOM content, and the only ways I found to do that were too invasive in terms of permissions (`scripting`, which could be optional, and wildcard host, which could not be optional). [Source](https://stackoverflow.com/questions/19758028/chrome-extension-get-dom-content)

Fixes #19
Fixes #3
Closes #24
---
 chrome/manifest.json           |   4 +-
 firefox/manifest.json          |   7 +-
 shared/src/background.js       |  25 +--
 shared/src/lib/utils.js        |  30 ++-
 shared/src/popup.css           |  17 +-
 shared/src/popup.html          |  20 +-
 shared/src/popup.js            | 339 +++++++++++++++++++--------------
 shared/src/summarize_result.js |  57 +++---
 8 files changed, 293 insertions(+), 206 deletions(-)

diff --git a/chrome/manifest.json b/chrome/manifest.json
index 63e5c74..e509990 100644
--- a/chrome/manifest.json
+++ b/chrome/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Kagi Search for Chrome",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "A simple extension for setting Kagi as a default search engine, and automatically logging in to Kagi in incognito browsing windows",
   "background": {
     "service_worker": "src/background.js",
@@ -19,12 +19,12 @@
     "default_popup": "src/popup.html"
   },
   "permissions": [
-    "activeTab",
     "cookies",
     "declarativeNetRequestWithHostAccess",
     "webRequest",
     "storage"
   ],
+  "optional_permissions": ["activeTab"],
   "host_permissions": ["https://kagi.com/*"],
   "chrome_settings_overrides": {
     "search_provider": {
diff --git a/firefox/manifest.json b/firefox/manifest.json
index a372fcc..e5849e7 100644
--- a/firefox/manifest.json
+++ b/firefox/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Kagi Search for Firefox",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "A simple helper extension for setting Kagi as a default search engine, and automatically logging in to Kagi in incognito browsing windows.",
   "background": {
     "page": "src/background_page.html"
@@ -18,12 +18,12 @@
     "default_popup": "src/popup.html"
   },
   "permissions": [
-    "activeTab",
     "cookies",
     "declarativeNetRequestWithHostAccess",
     "webRequest",
     "storage"
   ],
+  "optional_permissions": ["activeTab"],
   "host_permissions": ["https://kagi.com/*"],
   "chrome_settings_overrides": {
     "search_provider": {
@@ -47,7 +47,8 @@
   },
   "browser_specific_settings": {
     "gecko": {
-      "id": "search@kagi.com"
+      "id": "search@kagi.com",
+      "strict_min_version": "102.0"
     }
   }
 }
diff --git a/shared/src/background.js b/shared/src/background.js
index 5edd284..c0726af 100644
--- a/shared/src/background.js
+++ b/shared/src/background.js
@@ -1,4 +1,4 @@
-import { summarizeContent } from './lib/utils.js';
+import { summarizeContent, fetchSettings } from './lib/utils.js';
 
 if (!globalThis.browser) {
   globalThis.browser = chrome;
@@ -167,25 +167,12 @@ browser.commands.onCommand.addListener(async (command) => {
 });
 
 async function loadStorageData() {
-  const sessionObject = await browser.storage.local.get('session_token');
-  if (sessionObject?.session_token) {
-    sessionToken = sessionObject.session_token;
-  }
-
-  const syncObject = await browser.storage.local.get('sync_existing');
-  if (typeof syncObject?.sync_existing !== 'undefined') {
-    syncSessionFromExisting = syncObject.sync_existing;
-  }
+  const { token, sync_existing, api_token, api_engine } = await fetchSettings();
 
-  const apiObject = await browser.storage.local.get('api_token');
-  if (typeof apiObject?.api_token !== 'undefined') {
-    sessionApiToken = apiObject.api_token;
-  }
-
-  const apiEngineObject = await browser.storage.local.get('api_engine');
-  if (typeof apiEngineObject?.api_engine !== 'undefined') {
-    sessionApiEngine = apiEngineObject.api_engine;
-  }
+  sessionToken = token;
+  syncSessionFromExisting = sync_existing;
+  sessionApiToken = api_token;
+  sessionApiEngine = api_engine;
 }
 
 loadStorageData();
diff --git a/shared/src/lib/utils.js b/shared/src/lib/utils.js
index cb9b3ad..902f425 100644
--- a/shared/src/lib/utils.js
+++ b/shared/src/lib/utils.js
@@ -13,7 +13,9 @@ export async function summarizeContent({
 }) {
   let summary = 'Unknown error';
   let success = false;
-  const useApi = Boolean(api_token);
+  const useApi = Boolean(
+    api_token && ((api_engine && api_engine !== 'cecil') || text),
+  );
 
   try {
     const requestParams = {
@@ -95,13 +97,13 @@ export async function summarizeContent({
   };
 }
 
-export async function updateSettings(handleGetData) {
+export async function fetchSettings() {
   const sessionObject = await browser.storage.local.get('session_token');
   const syncObject = await browser.storage.local.get('sync_existing');
   const apiObject = await browser.storage.local.get('api_token');
   const apiEngineObject = await browser.storage.local.get('api_engine');
 
-  await handleGetData({
+  return {
     token: sessionObject?.session_token,
     sync_existing:
       typeof syncObject?.sync_existing !== 'undefined'
@@ -109,5 +111,27 @@ export async function updateSettings(handleGetData) {
         : true,
     api_token: apiObject?.api_token,
     api_engine: apiEngineObject?.api_engine,
+  };
+}
+
+export async function getActiveTab() {
+  const tabs = await browser.tabs.query({
+    active: true,
+    lastFocusedWindow: true,
   });
+
+  // Chrome/Firefox might give us more than one active tab when something like "chrome://*" or "about:*" is also open
+  const tab =
+    tabs.find(
+      (tab) =>
+        tab?.url?.startsWith('http://') || tab?.url?.startsWith('https://'),
+    ) || tabs[0];
+
+  if (!tab || !tab.url) {
+    console.error('No tab/url found.');
+    console.error(tabs);
+    return null;
+  }
+
+  return tab;
 }
diff --git a/shared/src/popup.css b/shared/src/popup.css
index deb29ec..c90115c 100644
--- a/shared/src/popup.css
+++ b/shared/src/popup.css
@@ -147,6 +147,7 @@ h3 {
 #incognito {
   max-width: 100%;
   padding: 0 15px;
+  font-size: 0.9rem;
 }
 
 .setting_row {
@@ -285,19 +286,19 @@ p {
   right: 2px;
 }
 
-#summarize {
+#summarize, #request_permissions {
   margin-top: 10px;
   width: 100%;
   padding: 0 15px;
 }
 
-#summarize .setting_row {
+#summarize .setting_row, #request_permissions .setting_row {
   margin-top: 10px;
   padding: 0;
   justify-content: space-between;
 }
 
-#summarize .setting_row > div {
+#summarize .setting_row > div, #request_permissions .setting_row > div {
   margin-right: 10px;
 }
 
@@ -306,7 +307,7 @@ p {
   margin-bottom: 5px;
 }
 
-#summarize_page {
+#summarize_page, #request_permissions_button {
   background-color: #ffb319;
   border: 1px solid #ffb319;
   color: #191919;
@@ -320,7 +321,13 @@ p {
   margin-right: 10px;
 }
 
-#summarize_page:hover {
+#request_permissions_button {
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#summarize_page:hover, #request_permissions_button:hover {
   background-color: #f7a808;
   border: 1px solid #d9950d;
 }
diff --git a/shared/src/popup.html b/shared/src/popup.html
index 1daaeb5..ee6b697 100644
--- a/shared/src/popup.html
+++ b/shared/src/popup.html
@@ -152,7 +152,7 @@
           <div>
             <label class="title" for="engine">API Summarizer Engine</label>
             <select id="engine">
-              <option value="cecil" selected="selected">Cecil</option>
+              <option value="cecil" selected="selected">Cecil (free)</option>
               <option value="agnes">Agnes</option>
               <option value="daphne">Daphne</option>
               <option value="muriel">Muriel</option>
@@ -173,7 +173,7 @@
         </div>
 
         <div class="setting_row">
-          <div>
+          <div class="summarize_option">
             <label for="summary_type">Summary Type</label>
             <select id="summary_type">
               <option value="summary" selected="selected">Summary</option>
@@ -181,7 +181,7 @@
             </select>
           </div>
 
-          <div>
+          <div class="summarize_option">
             <label for="target_language">Output Language</label>
             <select id="target_language">
               <option value="" selected="selected">Default</option>
@@ -220,6 +220,20 @@
           <button id="summarize_page">Summarize</button>
         </div>
       </div>
+      
+      <div id="request_permissions" style="display: none">
+
+        <div class="title">
+          Summarize the current page
+        </div>
+
+        <div class="desc">Allow accessing the currently active tab, so it can be summarized.</div>
+
+        <div class="setting_row">
+          <button id="request_permissions_button">Request access</button>
+        </div>
+      </div>
+
     </div>
     <script type="module" src="popup.js"></script>
   </body>
diff --git a/shared/src/popup.js b/shared/src/popup.js
index 6233775..61c1cee 100644
--- a/shared/src/popup.js
+++ b/shared/src/popup.js
@@ -1,4 +1,4 @@
-import { updateSettings } from './lib/utils.js';
+import { fetchSettings, getActiveTab } from './lib/utils.js';
 
 if (!globalThis.browser) {
   globalThis.browser = chrome;
@@ -34,23 +34,24 @@ function setStatus(type) {
 
   switch (type) {
     case 'no_session': {
-      const openKagiElement = document.querySelector('#open_kagi');
-      const permission = {
-        origins: ['https://kagi.com/*'],
-      };
-      browser.permissions.contains(permission).then((hasPermission) => {
-        openKagiElement.onclick = async (e) => {
-          e.preventDefault();
-          const grant = await browser.permissions.request(permission);
-          if (grant) {
-            browser.tabs.create({
-              url: 'https://kagi.com/',
-            });
-          } else {
-            statusPermissionMessageElement.style.display = '';
-          }
-        };
+      const openKagiLinkElement = document.querySelector('#open_kagi');
+
+      openKagiLinkElement.addEventListener('click', async (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const grant = await browser.permissions.request({
+          origins: ['https://kagi.com/*'],
+        });
+        if (grant) {
+          browser.tabs.create({
+            url: 'https://kagi.com/',
+          });
+        } else {
+          statusPermissionMessageElement.style.display = '';
+        }
       });
+
       statusErrorMessageElement.style.display = '';
       statusErrorIcon.style.display = '';
       statusGoodIcon.style.display = 'none';
@@ -77,113 +78,135 @@ function setStatus(type) {
 }
 
 async function setup() {
-  const eTokenDiv = document.querySelector('#token');
-  if (!eTokenDiv) {
+  const tokenDiv = document.querySelector('#token');
+  if (!tokenDiv) {
     console.error('Could not find token div');
     return;
   }
 
-  const eTokenInput = document.querySelector('#token_input');
-  if (!eTokenInput) {
+  const tokenInput = document.querySelector('#token_input');
+  if (!tokenInput) {
     console.error('Could not set token because no input exists');
     return;
   }
 
-  eTokenInput.addEventListener('focus', (e) => {
-    e.target.select();
+  tokenInput.addEventListener('focus', (event) => {
+    event.target.select();
   });
 
-  eTokenInput.addEventListener('click', () =>
+  tokenInput.addEventListener('click', () =>
     this.value ? this.setSelectionRange(0, this.value.length) : null,
   );
 
-  const eApiTokenInput = document.querySelector('#api_token_input');
-  if (!eApiTokenInput) {
+  const apiTokenInput = document.querySelector('#api_token_input');
+  if (!apiTokenInput) {
     console.error('Could not set API token because no input exists');
     return;
   }
 
-  eApiTokenInput.addEventListener('focus', (e) => {
-    e.target.select();
+  apiTokenInput.addEventListener('focus', (event) => {
+    event.target.select();
   });
 
-  eApiTokenInput.addEventListener('click', () =>
+  apiTokenInput.addEventListener('click', () =>
     this.value ? this.setSelectionRange(0, this.value.length) : null,
   );
 
-  const eApiEngineSelect = document.querySelector('#engine');
-  if (!eApiEngineSelect) {
+  const apiEngineSelect = document.querySelector('#engine');
+  if (!apiEngineSelect) {
     console.error('Could not set API engine because no select exists');
     return;
   }
 
-  const eAdvanced = document.querySelector('#advanced');
-  if (!eAdvanced) {
+  const advancedToggle = document.querySelector('#advanced');
+  if (!advancedToggle) {
     console.error('Could not find advanced toggle');
     return;
   }
 
-  const eSummarize = document.querySelector('#summarize');
-  if (!eSummarize) {
+  const summarizeSection = document.querySelector('#summarize');
+  if (!summarizeSection) {
     console.error('Could not find summarize section');
     return;
   }
 
-  const eSummarizePage = document.querySelector('#summarize_page');
-  if (!eSummarizePage) {
+  const summarizePageButton = document.querySelector('#summarize_page');
+  if (!summarizePageButton) {
     console.error('Could not find summarize page button');
     return;
   }
 
-  const eApiParams = document.querySelectorAll('.api_param');
-  if (!eApiParams.length) {
+  const apiParamElements = document.querySelectorAll('.api_param');
+  if (!apiParamElements.length) {
     console.error('Could not find api param divs');
     return;
   }
 
-  eApiParams.forEach((element) => {
+  apiParamElements.forEach((element) => {
     element.style.display = 'none';
   });
 
-  const eSaveToken = document.querySelector('#token_save');
-  if (!eSaveToken) {
+  const saveTokenButton = document.querySelector('#token_save');
+  if (!saveTokenButton) {
     console.error('Could not find save settings button');
     return;
   }
 
-  eSaveToken.addEventListener('click', async () => {
-    const eToken = document.querySelector('#token_input');
-    if (!eToken) {
-      console.error('No token input found.');
-      return;
-    }
+  const summaryTypeSelect = document.querySelector('#summary_type');
+  if (!summaryTypeSelect) {
+    console.error('No summary type select found.');
+    return;
+  }
+
+  const targetLanguageSelect = document.querySelector('#target_language');
+  if (!targetLanguageSelect) {
+    console.error('No target language select found.');
+    return;
+  }
+
+  const engineSelect = document.querySelector('#engine');
+  if (!engineSelect) {
+    console.error('No engine select found.');
+    return;
+  }
 
-    let token = eToken.value;
+  const summarizeOptions = document.querySelectorAll('.summarize_option');
+  if (summarizeOptions.length === 0) {
+    console.error('No summarize options found.');
+    return;
+  }
+
+  const requestPermissionsSection = document.querySelector(
+    '#request_permissions',
+  );
+  if (!requestPermissionsSection) {
+    console.error('No request permissions section found.');
+    return;
+  }
+
+  const requestPermissionsButton = document.querySelector(
+    '#request_permissions_button',
+  );
+  if (!requestPermissionsButton) {
+    console.error('No request permissions button found.');
+    return;
+  }
+
+  saveTokenButton.addEventListener('click', async () => {
+    let token = tokenInput.value;
 
     if (token.startsWith('https://kagi.com')) {
       const url = new URL(token);
       token = url.searchParams.get('token');
 
-      if (token) eToken.value = token;
+      if (token) tokenInput.value = token;
     }
 
-    const eApiToken = document.querySelector('#api_token_input');
-    if (!eApiToken) {
-      console.error('No API token input found.');
-      return;
-    }
+    const api_token = apiTokenInput.value;
 
-    const api_token = eApiToken.value;
+    const api_engine = apiEngineSelect.value;
 
-    const eApiEngine = document.querySelector('#engine');
-    if (!eApiEngine) {
-      console.error('No API engine select found.');
-      return;
-    }
-
-    const api_engine = eApiEngine.value;
-
-    eSaveToken.innerText = 'Saving...';
+    saveTokenButton.innerText = 'Saving...';
 
     await browser.runtime.sendMessage({
       type: 'save_token',
@@ -193,69 +216,48 @@ async function setup() {
     });
   });
 
-  function toggleAdvancedDisplay(forceState) {
-    const icons = eAdvanced.querySelectorAll('svg');
+  async function toggleAdvancedDisplay(forceState) {
+    const icons = advancedToggle.querySelectorAll('svg');
     const showSettingsIcon = icons[0];
     const closeSettingsIcon = icons[1];
 
-    if (forceState === 'close' || eTokenDiv.style.display === '') {
+    if (forceState === 'close' || tokenDiv.style.display === '') {
       showSettingsIcon.style.display = '';
       closeSettingsIcon.style.display = 'none';
-      eTokenDiv.style.display = 'none';
-      if (eTokenInput.value) {
-        eSummarize.style.display = '';
+      tokenDiv.style.display = 'none';
+      if (tokenInput.value) {
+        const hasPermissions = await browser.permissions.contains({
+          permissions: ['activeTab'],
+        });
+
+        if (!hasPermissions) {
+          summarizeSection.style.display = 'none';
+          requestPermissionsSection.style.display = '';
+        } else {
+          summarizeSection.style.display = '';
+          requestPermissionsSection.style.display = 'none';
+        }
       }
-      eAdvanced.setAttribute('title', 'Advanced settings');
+      advancedToggle.setAttribute('title', 'Advanced settings');
     } else {
       showSettingsIcon.style.display = 'none';
       closeSettingsIcon.style.display = '';
-      eTokenDiv.style.display = '';
-      eSummarize.style.display = 'none';
-      eAdvanced.setAttribute('title', 'Close advanced settings');
+      tokenDiv.style.display = '';
+      summarizeSection.style.display = 'none';
+      requestPermissionsSection.style.display = 'none';
+      advancedToggle.setAttribute('title', 'Close advanced settings');
     }
   }
-  eAdvanced.addEventListener('click', () => toggleAdvancedDisplay());
+  advancedToggle.addEventListener('click', () => toggleAdvancedDisplay());
 
-  eSummarizePage.addEventListener('click', async (event) => {
+  async function handleSummarizePageButtonClick(event) {
     event.preventDefault();
     event.stopPropagation();
 
-    const eSummaryType = document.querySelector('#summary_type');
-    if (!eSummaryType) {
-      console.error('No summary type select found.');
-      return;
-    }
-
-    const eTargetLanguage = document.querySelector('#target_language');
-    if (!eTargetLanguage) {
-      console.error('No target language select found.');
-      return;
-    }
-
-    const eEngine = document.querySelector('#engine');
-    if (!eEngine) {
-      console.error('No engine select found.');
-      return;
-    }
-
-    const eApiToken = document.querySelector('#api_token_input');
-    if (!eApiToken) {
-      console.error('No API token input found.');
-      return;
-    }
-
-    const tabs = await browser.tabs.query({ active: true });
-
-    // Chrome/Firefox might give us more than one active tab when something like "chrome://*" or "about:*" is also open
-    const tab =
-      tabs.find(
-        (tab) =>
-          tab?.url?.startsWith('http://') || tab?.url?.startsWith('https://'),
-      ) || tabs[0];
+    const tab = await getActiveTab();
 
     if (!tab) {
       console.error('No tab/url found.');
-      console.error(tabs);
       return;
     }
 
@@ -263,11 +265,11 @@ async function setup() {
 
     const searchParams = {
       url,
-      summary_type: eSummaryType.value,
-      target_language: eTargetLanguage.value,
-      token: eTokenInput.value,
-      api_token: eApiToken.value,
-      api_engine: eEngine.value,
+      summary_type: summaryTypeSelect.value,
+      target_language: targetLanguageSelect.value,
+      token: tokenInput.value,
+      api_token: apiTokenInput.value,
+      api_engine: engineSelect.value,
     };
 
     const urlSearchParams = new URLSearchParams({ ...searchParams });
@@ -283,7 +285,31 @@ async function setup() {
     });
 
     window.close();
-  });
+  }
+
+  summarizePageButton.addEventListener('click', handleSummarizePageButtonClick);
+
+  async function handleRequestPermissionsButtonClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const permissionGranted = await browser.permissions.request({
+      permissions: ['activeTab'],
+    });
+
+    if (!permissionGranted) {
+      alert(
+        "You can't summarize without allowing access to the currently active tab.",
+      );
+    }
+
+    window.close();
+  }
+
+  requestPermissionsButton.addEventListener(
+    'click',
+    handleRequestPermissionsButtonClick,
+  );
 
   async function handleGetData({
     token,
@@ -292,13 +318,25 @@ async function setup() {
     api_engine,
   } = {}) {
     if (token) {
-      eTokenInput.value = token;
+      tokenInput.value = token;
 
       if (api_token) {
-        eApiTokenInput.value = api_token;
+        apiTokenInput.value = api_token;
       }
 
-      eSummarize.style.display = '';
+      if (tokenDiv.style.display === 'none') {
+        const hasPermissions = await browser.permissions.contains({
+          permissions: ['activeTab'],
+        });
+
+        if (!hasPermissions) {
+          summarizeSection.style.display = 'none';
+          requestPermissionsSection.style.display = '';
+        } else {
+          summarizeSection.style.display = '';
+          requestPermissionsSection.style.display = 'none';
+        }
+      }
 
       if (sync_existing) {
         setStatus('auto_token');
@@ -307,44 +345,44 @@ async function setup() {
       }
 
       if (api_token) {
-        eApiParams.forEach((element) => {
+        apiParamElements.forEach((element) => {
           element.style.display = '';
         });
       }
 
       if (api_engine) {
-        eApiEngineSelect.value = api_engine;
+        apiEngineSelect.value = api_engine;
       }
 
       const hasIncognitoAccess =
         await browser.extension.isAllowedIncognitoAccess();
 
       if (!hasIncognitoAccess) {
-        const eIncognito = document.querySelector('#incognito');
+        const incognitoSection = document.querySelector('#incognito');
 
-        if (!eIncognito) {
+        if (!incognitoSection) {
           console.error('No incognito div to place text');
           return;
         }
 
-        eIncognito.style.display = '';
+        incognitoSection.style.display = '';
 
-        const eFirefoxExt = document.querySelector('#firefox_ext');
-        const eChromeExt = document.querySelector('#chrome_ext');
+        const firefoxExtensionSection = document.querySelector('#firefox_ext');
+        const chromeExtensionSection = document.querySelector('#chrome_ext');
 
         if (!IS_CHROME) {
-          eFirefoxExt.style.display = '';
-          eChromeExt.style.display = 'none';
+          firefoxExtensionSection.style.display = '';
+          chromeExtensionSection.style.display = 'none';
         } else {
-          eFirefoxExt.style.display = 'none';
-          eChromeExt.style.display = '';
+          firefoxExtensionSection.style.display = 'none';
+          chromeExtensionSection.style.display = '';
         }
 
         // NOTE: slight little hack to make the chrome://extensions link not be blocked.
         if (IS_CHROME) {
-          const eChromeLink = document.querySelector('#chrome_link');
-          if (eChromeLink) {
-            eChromeLink.addEventListener('click', async () => {
+          const chromeLinkElement = document.querySelector('#chrome_link');
+          if (chromeLinkElement) {
+            chromeLinkElement.addEventListener('click', async () => {
               await browser.runtime.sendMessage({ type: 'open_extension' });
             });
           }
@@ -355,46 +393,59 @@ async function setup() {
     }
   }
 
-  await updateSettings(handleGetData);
+  const fetchedSettings = await fetchSettings();
+  await handleGetData(fetchedSettings);
 
   let savingButtonTextTimeout = undefined;
 
   browser.runtime.onMessage.addListener(async (data) => {
     if (data.type === 'synced') {
       setStatus('manual_token');
-      eSaveToken.innerText = 'Saved!';
+      saveTokenButton.innerText = 'Saved!';
 
-      await updateSettings();
+      const newlyFetchedSettings = await fetchSettings();
+      await handleGetData(newlyFetchedSettings);
 
       if (savingButtonTextTimeout) {
         clearTimeout(savingButtonTextTimeout);
       }
 
       savingButtonTextTimeout = setTimeout(() => {
-        eSaveToken.innerText = 'Save settings';
+        saveTokenButton.innerText = 'Save settings';
       }, 2000);
 
-      if (eTokenDiv.style.display === 'none') {
+      if (tokenDiv.style.display === 'none') {
         if (data.token) {
-          eSummarize.style.display = '';
+          const hasPermissions = await browser.permissions.contains({
+            permissions: ['activeTab'],
+          });
+
+          if (!hasPermissions) {
+            summarizeSection.style.display = 'none';
+            requestPermissionsSection.style.display = '';
+          } else {
+            summarizeSection.style.display = '';
+            requestPermissionsSection.style.display = 'none';
+          }
         } else {
-          eSummarize.style.display = 'none';
+          summarizeSection.style.display = 'none';
+          requestPermissionsSection.style.display = 'none';
         }
       }
 
       if (data.api_token) {
-        eApiParams.forEach((element) => {
+        apiParamElements.forEach((element) => {
           element.style.display = '';
         });
       } else {
-        eApiParams.forEach((element) => {
+        apiParamElements.forEach((element) => {
           element.style.display = 'none';
         });
       }
     } else if (data.type === 'reset') {
       setStatus('no_session');
-      eTokenDiv.style.display = 'none';
-      eAdvanced.style.display = '';
+      tokenDiv.style.display = 'none';
+      advancedToggle.style.display = '';
       toggleAdvancedDisplay('close');
     }
   });
diff --git a/shared/src/summarize_result.js b/shared/src/summarize_result.js
index b4dd7d1..c4eff01 100644
--- a/shared/src/summarize_result.js
+++ b/shared/src/summarize_result.js
@@ -1,4 +1,4 @@
-import { updateSettings } from './lib/utils.js';
+import { fetchSettings, getActiveTab } from './lib/utils.js';
 
 if (!globalThis.browser) {
   globalThis.browser = chrome;
@@ -54,7 +54,10 @@ async function setup() {
 
       if (data.success) {
         summaryResultElement.classList.remove('error');
-        summaryTextContents = data.summary;
+        summaryTextContents = new DOMParser().parseFromString(
+          data.summary.replaceAll(/<br>/g, '\n'),
+          'text/html',
+        ).documentElement.textContent;
         copySummaryElement.style.display = '';
       } else {
         summaryResultElement.classList.add('error');
@@ -63,11 +66,23 @@ async function setup() {
       }
 
       summaryResultElement.style.display = '';
-      summaryResultElement.innerHTML = data.summary.replaceAll(/\n/g, '<br />');
+      summaryResultElement.innerText = summaryTextContents;
     }
   });
 
   async function requestPageSummary() {
+    const hasTabAccess = await browser.permissions.contains({
+      permissions: ['activeTab'],
+    });
+
+    if (!hasTabAccess) {
+      summaryResultElement.style.display = '';
+      summaryResultElement.classList.add('error');
+      summaryResultElement.innerText =
+        "You can't summarize without allowing access to the currently active tab.";
+      return;
+    }
+
     const searchParams = new URLSearchParams(window.location.search);
 
     // If there's no URL, get the currently active tab and default params
@@ -75,38 +90,26 @@ async function setup() {
       searchParams.set('summary_type', 'summary');
       searchParams.set('target_language', '');
 
-      const tabs = await browser.tabs.query({ active: true });
-
-      // Chrome/Firefox might give us more than one active tab when something like "chrome://*" or "about:*" is also open
-      const tab =
-        tabs.find(
-          (tab) =>
-            tab?.url?.startsWith('http://') || tab?.url?.startsWith('https://'),
-        ) || tabs[0];
+      const tab = await getActiveTab();
 
       if (!tab) {
         console.error('No tab/url found.');
-        console.error(tabs);
         return;
       }
 
       searchParams.set('url', url);
 
-      await updateSettings(async function handleGetData({
-        token,
-        api_token,
-        api_engine,
-      } = {}) {
-        if (token) {
-          searchParams.set('token', token);
-        }
-        if (api_token) {
-          searchParams.set('api_token', api_token);
-        }
-        if (api_engine) {
-          searchParams.set('api_engine', api_engine);
-        }
-      });
+      const { token, api_token, api_engine } = await fetchSettings();
+
+      if (token) {
+        searchParams.set('token', token);
+      }
+      if (api_token) {
+        searchParams.set('api_token', api_token);
+      }
+      if (api_engine) {
+        searchParams.set('api_engine', api_engine);
+      }
     }
 
     loadingElement.style.display = '';