UX Improvements (#25)

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

@@ -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": {

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": "[email protected]"
+      "id": "[email protected]",
+      "strict_min_version": "102.0"
     }
   }
 }

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();

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,19 +97,41 @@ 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'
         ? syncObject.sync_existing
         : 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;
 }

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;
 }

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,15 +173,15 @@
         </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>
               <option value="takeaway">Key Moments</option>
             </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>