Add persistent settings (via chrome.storage.sync).

Author: cnuahs

.gitignore

@@ -1,5 +1,7 @@
 # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
+src/schemas/*.validator.*
+
 # Compiled output
 /dist
 /tmp

custom-webpack.config.ts

@@ -1,11 +1,27 @@
 // see https://www.npmjs.com/package/@angular-builders/custom-webpack
 import type { Configuration } from 'webpack';
 
+// Note: AJV transforms/compiles a JSON Schema to an actual JS function. You can then call that function
+//       to validate input against said schema. BUT, to generate the function AJV uses dynamic code
+//       evaluation, which means doing this at runtime exposes us to the risk of code injection. To avoid
+//       this (and the need to add 'unsafe-eval' to our CSP in manifest.json) we use webpack's compile hook
+//       hook to "pre-compile" our validator function(s).
+import { compile } from './utils/ajv-utils';
+
 export default {
     entry: { 
         background: 'src/background.ts',
         content: 'src/content.ts'
     },
+    plugins: [
+        {
+            apply: (compiler) => {
+                compiler.hooks.compile.tap("AjvPlugin", (_params) => {
+                    compile( { schema: "src/schemas/settings.json", useDefaults: true } );
+                });
+            },
+        },
+    ],
     optimization: {
         runtimeChunk: false
     },

package-lock.json

@@ -39,6 +39,7 @@
     "@types/jasmine": "~5.1.0",
     "autoprefixer": "^10.4.20",
     "jasmine-core": "~5.2.0",
+    "json-schema-typed": "^8.0.1",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",

package.json

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SettingsService } from './settings.service';
+
+describe('SettingsService', () => {
+  let service: SettingsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SettingsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/settings.service.spec.ts

@@ -0,0 +1,54 @@
+// Angular service wrapping Electron IPC for user settings.
+
+// 2024-06-09 - Shaun L. Cloherty <[email protected]>
+
+import { Injectable } from '@angular/core';
+
+import _settings from '../settings';
+
+import { Setting } from '../settings';
+export type { Setting } from '../settings';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingsService {
+  // key: string | null = null;
+
+  constructor() { }
+
+  // lock (): void {
+  //   // console.log('SettingsService.lock()');
+  //   // 1. clear this.settings
+  //   // 2. discard key
+  //   this.key = null;
+  //   // 3. clear retriever in the service worker?
+  // }
+
+  // unlock (passphrase?: string): Promise<void> {
+  //   // console.log('SettingsService.unlock():', passphrase);
+  //   return new Promise((resolve, _reject) => {
+  //     // 1. generate key from passphrase
+  //     this.key = passphrase? passphrase : null;
+  //     // 2. retrieve settings from chrome.storage.sync
+  //     // 3. decrypt settings using key
+  //     resolve();
+  //   });
+  // }
+
+  get (name?: string): Promise<Setting[]> {
+    // console.log('SettingsService.get()', name);
+    // return new Promise((resolve, reject) => {
+    //   this.settings && this.key ?
+    //     // resolve(name ? this.settings.filter((setting) => setting.name === name) : this.settings) :
+    //     resolve(name ? [ _get(name) as Setting ] : _get() as Setting[]) :
+    //     reject(Error('Failed to load settings!')) // locked?
+    // });
+    return name ? _settings.get(name) as Promise<Setting[]> : _settings.get() as Promise<Setting[]>;
+  }
+
+  set (settings: Setting[]): void {
+    // console.log('SettingsService.set()', setting);
+    _settings.set(settings);
+  }
+}

src/app/settings.service.ts

@@ -15,9 +15,32 @@
             </a>
         </div>
     </div>
-    <div class="w-full justify-items-center bg-slate-100 grow">
-        <div class="text-slate-400 py-1 uppercase">
-            <a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a> | Settings
+
+    @if (settings !== null) {
+        <!-- <div class="absolute z-10 min-w-full px-12 flex flex-col top-4"> -->
+        <div class="min-w-full px-2 py-2 bg-slate-100 flex flex-col grow">
+
+            <ul>
+                @for (setting of settings ; track setting.label) {
+                    <li class="flex flex-col my-2">
+                        <p>{{setting.label}}</p>
+                        <span class="font-light text-gray-500 text-sm">{{setting.description}}</span>
+                        <input class="p-2 placeholder:text-slate-300 outline outline-1 outline-slate-200 focus:outline-cyan-500 rounded-sm" type="text" autocomplete="off" [(ngModel)]="setting.value" name="{{setting.value}}" ngDefaultControl placeholder="{{setting.label}}">
+                    </li>
+                }
+            </ul>
+            <!-- <div class="flex flex-col justify-end grow"> -->
+            <div class="flex flex-row gap-2 place-self-end justify-end">
+                <input type="button" class="px-4 py-2 bg-cyan-500 text-white rounded-md" value="Apply" (click)="onClick(true)">
+                <input type="button" class="px-4 py-2 bg-slate-200 text-slate-500 rounded-md" value="Cancel" (click)="onClick(false)">
+            </div>
+            <!-- </div> -->
         </div>
-    </div>   
-</div>
+    } 
+    @else {
+        <div class="min-w-full px-2 py-2 bg-slate-100 flex flex-col grow">
+            <input #passphrase type="password" class="p-2 placeholder:text-slate-300 outline outline-1 outline-slate-200 focus:outline-cyan-500 rounded-sm" [(ngModel)]="passphrase" name="passphrase" ngDefaultControl placeholder="Passphrase">
+            <input type="button" class="px-4 py-2 bg-cyan-500 text-white rounded-md" value="Unlock" (click)="unlock(passphrase.value)">
+        </div>
+    }
+</div>

src/app/settings/settings.component.html

@@ -1,13 +1,52 @@
-import { Component } from '@angular/core';
-import { RouterOutlet, RouterLink } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+
+import { SettingsService, Setting } from '../settings.service';
 
 @Component({
   selector: 'app-settings',
   standalone: true,
-  imports: [RouterOutlet, RouterLink],
+  imports: [FormsModule, RouterLink],
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.css'
 })
-export class SettingsComponent {
+export class SettingsComponent implements OnInit {
+  settings: Setting[] | null = null; 
+
+  constructor( private router: Router, private settingsService: SettingsService) {
+      // injects SettingsService as this.settingsService
+      console.log('SettingsComponent.constructor()');
+  }
+
+  ngOnInit() {
+    console.log('SettingsComponent.ngOnInit()');
+    this.settingsService.get()
+    .then(
+        (settings: Setting[]) => {this.settings = settings}
+    )
+    .catch(
+        (error) => { this.settings = null; console.error('SettingsComponent.ngOnInit()', error); }
+    );
+  }
+
+  onClick(apply: boolean) {
+    if (apply ) {
+      // apply the settings via the settings service
+      this.settingsService.set(this.settings? this.settings : []);
+    }
+
+    this.router.navigate(['/']);
+  }
+
+  unlock(passphrase: string) {
+    // unlock settings
+    // this.settingsService.unlock(passphrase);
 
+    // const url = this.router.url
+    // this.router.navigateByUrl('/', { skipLocationChange: true })
+    // .then(() => {
+    //   this.router.navigate([`${url}`]);
+    // });
+  }
 }

src/app/settings/settings.component.ts

@@ -91,6 +91,15 @@ chrome.runtime.onMessage.addListener(function (message, _sender, sendResponse) {
 });
 
 
+chrome.storage.onChanged.addListener((changes, namespace) => {
+  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
+    console.log(
+      `Storage key "${key}" in namespace "${namespace}" changed.`,
+      `Old value was "${oldValue}", new value is "${newValue}".`
+    );
+  }
+});
+
 // ------------------------------
 
 // // create a new periodic alarm

src/background.ts

@@ -287,8 +287,12 @@ export class PineconeStoreNoContent
 
 import { Pinecone as PineconeClient } from "@pinecone-database/pinecone";
 
-import { PINECONE_API_KEY } from "./secrets";
-const pc = new PineconeClient({ apiKey: PINECONE_API_KEY });
+// import { PINECONE_API_KEY } from "./secrets";
+import settings from "./settings"
+import { Setting } from "./settings";
+
+const apiKey = await settings.get("pinecone-api-key") as Setting;
+const pc = new PineconeClient({ apiKey: apiKey.value });
 
 const namespace = ""; // default: empty namespace
 const index = pc.index("vhs-ext").namespace(namespace); // FIXME: .Index vs .index?
@@ -471,7 +475,7 @@ export async function search(query: string): Promise<Bookmark[]> {
   return Promise.resolve(results.map(doc => Bookmark.fromDocument(doc)));
 }
 
-
+export default { add, del, get, search };