Privacy Consent Screen (#78)

* Privacy Consent Screen This introduces a privacy consent screen that needs to be accepted before using the extension, as requested by Mozilla in order to allow it to be publicly available in their Add-ons marketplace. It also releases this as 0.7.0. * Don't show privacy consent popup in chrome * add link to new browser privacy policy * fix privacy policy link * Update popup.html --------- Co-authored-by: Hugh O'Brien <[email protected]>
kagisearch · Jun 4, 2024 · eef60af · eef60af
1 parent 8934a2d
commit eef60af
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 7 deletions.
diff --git a/chrome/manifest.json b/chrome/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Kagi Search for Chrome",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "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",

diff --git a/firefox/manifest.json b/firefox/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Kagi Search for Firefox",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "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"

diff --git a/shared/src/background.js b/shared/src/background.js
@@ -10,6 +10,7 @@ let sessionApiToken = undefined;
 let sessionApiEngine = undefined;
 let sessionSummaryType = undefined;
 let sessionTargetLanguage = undefined;
+let sessionPrivacyConsent = false;
 let IS_CHROME = true;
 
 // Very hacky, but currently works flawlessly
@@ -18,7 +19,15 @@ if (typeof browser.runtime.getBrowserInfo === 'function') {
 }
 
 async function saveToken(
-  { token, api_token, api_engine, sync, summary_type, target_language } = {},
+  {
+    token,
+    api_token,
+    api_engine,
+    sync,
+    summary_type,
+    target_language,
+    privacy_consent,
+  } = {},
   isManual = false,
 ) {
   sessionToken = typeof token !== 'undefined' ? token : sessionToken;
@@ -32,6 +41,10 @@ async function saveToken(
     typeof target_language !== 'undefined'
       ? target_language
       : sessionTargetLanguage;
+  sessionPrivacyConsent =
+    typeof privacy_consent !== 'undefined'
+      ? privacy_consent
+      : sessionPrivacyConsent;
 
   let shouldSync = sync || !isManual;
   if (typeof sessionToken === 'undefined' || sessionToken.trim().length === 0) {
@@ -49,6 +62,7 @@ async function saveToken(
       api_engine: sessionApiEngine,
       summary_type: sessionSummaryType,
       target_language: sessionTargetLanguage,
+      privacy_consent: sessionPrivacyConsent,
     });
   } catch (error) {
     console.error(error);
@@ -70,6 +84,7 @@ async function saveToken(
     api_engine: sessionApiEngine,
     summary_type: sessionSummaryType,
     target_language: sessionTargetLanguage,
+    privacy_consent: sessionPrivacyConsent,
   });
 }
 

diff --git a/shared/src/lib/utils.js b/shared/src/lib/utils.js
@@ -108,6 +108,8 @@ export async function fetchSettings() {
   const summaryTypeObject = await browser.storage.local.get('summary_type');
   const targetLanguageObject =
     await browser.storage.local.get('target_language');
+  const privacyConsentObject =
+    await browser.storage.local.get('privacy_consent');
 
   return {
     token: sessionObject?.session_token,
@@ -119,6 +121,10 @@ export async function fetchSettings() {
     api_engine: apiEngineObject?.api_engine,
     summary_type: summaryTypeObject?.summary_type,
     target_language: targetLanguageObject?.target_language,
+    privacy_consent:
+      typeof privacyConsentObject?.privacy_consent !== 'undefined'
+        ? privacyConsentObject.privacy_consent
+        : false,
   };
 }
 

diff --git a/shared/src/popup.css b/shared/src/popup.css
@@ -344,7 +344,7 @@ p {
   margin-bottom: 5px;
 }
 
-#summarize_page, #request_permissions_button, #fastgpt_submit {
+#summarize_page, #request_permissions_button, #fastgpt_submit, #privacy_consent_button {
   background-color: #ffb319;
   border: 1px solid #ffb319;
   color: #191919;
@@ -369,7 +369,7 @@ p {
   margin-right: auto;
 }
 
-#summarize_page:hover, #request_permissions_button:hover, #fastgpt_submit {
+#summarize_page:hover, #request_permissions_button:hover, #fastgpt_submit:hover, #privacy_consent_button:hover {
   background-color: #f7a808;
   border: 1px solid #d9950d;
 }
diff --git a/shared/src/popup.html b/shared/src/popup.html
@@ -83,6 +83,23 @@
         </span>
       </div>
 
+      <div id="privacy_consent_message" class="setting_row" style="display: none">
+        <div>
+          <div class="title" style="font-size: 1.2rem; margin-bottom: 1rem; text-align: center;">
+            Privacy Notice
+          </div>
+          <div class="desc" style="font-size: 0.9rem;">
+            With your permission, this extension will access your Kagi account (via the session cookie) and automatically configure the extension so that won't need to log-in when in private browsing mode. Please note you will need to set 'allow in private browsing' in your extensions page as the extension cannot set this automatically.
+            <br /><br />
+            Granting access to the current tab will enable the Universal Summarizer, which receives the URL of your tab and generates a summary.
+            <br /><br />
+            <a href="https://kagi.com/privacy#Browser-Extension" target="_blank" rel="noopener noreferrer">For more information, please refer to our Privacy Policy</a>
+            <br /><br />
+            <button id="privacy_consent_button">Allow access</button>
+          </div>
+        </div>
+      </div>
+
       <span id="status_error_message" style="display: none">
         No kagi session found.<br />
         Login to Kagi or open a Kagi tab and the extension should automatically configure.<br />
@@ -262,7 +279,7 @@
         <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 Permissions</button>
+          <button id="request_permissions_button">Request permissions</button>
         </div>
       </div>
 

diff --git a/shared/src/popup.js b/shared/src/popup.js
@@ -88,6 +88,20 @@ async function setup() {
     return;
   }
 
+  const privacyConsentDiv = document.querySelector('#privacy_consent_message');
+  if (!privacyConsentDiv) {
+    console.error('Could not find privacy div');
+    return;
+  }
+
+  const privacyConsentButton = document.querySelector(
+    '#privacy_consent_button',
+  );
+  if (!privacyConsentButton) {
+    console.error('No privacy consent button found.');
+    return;
+  }
+
   const tokenDiv = document.querySelector('#token');
   if (!tokenDiv) {
     console.error('Could not find token div');
@@ -220,6 +234,19 @@ async function setup() {
     return;
   }
 
+  privacyConsentButton.addEventListener('click', async () => {
+    try {
+      await browser.runtime.sendMessage({
+        type: 'save_token',
+        privacy_consent: true,
+      });
+    } catch (error) {
+      console.error(error);
+
+      showSavingError();
+    }
+  });
+
   saveTokenButton.addEventListener('click', async () => {
     let token = tokenInput.value;
 
@@ -390,8 +417,9 @@ async function setup() {
     api_engine,
     summary_type,
     target_language,
+    privacy_consent,
   } = {}) {
-    if (token) {
+    if ((privacy_consent || IS_CHROME) && token) {
       tokenInput.value = token;
 
       if (api_token) {
@@ -474,7 +502,16 @@ async function setup() {
           }
         }
       }
+    } else if (!privacy_consent && !IS_CHROME) {
+      setStatus('');
+      privacyConsentDiv.style.display = '';
+      tokenDiv.style.display = 'none';
+      advancedToggle.style.display = 'none';
+      saveErrorDiv.style.display = 'none';
+      toggleAdvancedDisplay('close');
     } else {
+      privacyConsentDiv.style.display = 'none';
+      advancedToggle.style.display = '';
       setStatus('no_session');
     }
   }
@@ -510,6 +547,7 @@ async function setup() {
       setStatus('manual_token');
       saveTokenButton.innerText = 'Saved!';
       saveErrorDiv.style.display = 'none';
+      advancedToggle.style.display = '';
 
       const newlyFetchedSettings = await fetchSettings();
       await handleGetData(newlyFetchedSettings);