add anthropic support

Signed-off-by: Bohaska <73286691+Bohaska@users.noreply.github.com>

Author: Bohaska

chrome-extension/package.json

@@ -19,6 +19,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.55.0",
     "@extension/env": "workspace:*",
     "@extension/shared": "workspace:*",
     "@extension/storage": "workspace:*",

chrome-extension/src/background/index.ts

@@ -0,0 +1,30 @@
+import { createStorage, StorageEnum } from '../base/index.js';
+import type { AnthropicStorageType, AnthropicModelState } from '../types.js';
+
+const storage = createStorage<AnthropicModelState>(
+  'anthropic-storage-key',
+  {
+    apiKey: '',
+    model: 'claude-3-5-haiku-latest',
+  },
+  {
+    storageEnum: StorageEnum.Local,
+    liveUpdate: true,
+  },
+);
+
+export const anthropicStorage: AnthropicStorageType = {
+  ...storage,
+  setApiKey: async (apiKey: string) => {
+    await storage.set(currentState => ({
+      ...currentState,
+      apiKey,
+    }));
+  },
+  setModel: async (model: string) => {
+    await storage.set(currentState => ({
+      ...currentState,
+      model,
+    }));
+  },
+};

packages/storage/lib/impl/anthropic-storage.ts

@@ -2,3 +2,4 @@ export * from './example-theme-storage.js';
 export * from './ai-model-storage.js';
 export * from './openai-storage.js';
 export * from './provider-storage.js';
+export * from './anthropic-storage.js';

packages/storage/lib/impl/index.ts

@@ -16,15 +16,24 @@ export type OpenAiModelState = {
   model: string;
 };
 
+export type AnthropicModelState = {
+  apiKey: string;
+  model: string;
+};
+
 export type ProviderState = {
-  provider: 'gemini' | 'openai';
+  provider: 'gemini' | 'openai' | 'anthropic';
 };
 
 export type AiModelStorageType = BaseStorageType<AiModelState>;
 export type OpenAiStorageType = BaseStorageType<OpenAiModelState> & {
   setApiKey: (apiKey: string) => Promise<void>;
   setModel: (model: string) => Promise<void>;
 };
+export type AnthropicStorageType = BaseStorageType<AnthropicModelState> & {
+  setApiKey: (apiKey: string) => Promise<void>;
+  setModel: (model: string) => Promise<void>;
+};
 
 export type ProviderStorageType = BaseStorageType<ProviderState> & {
   setProvider: (provider: 'gemini' | 'openai') => Promise<void>;

packages/storage/lib/types.ts

@@ -1,8 +1,10 @@
+console.log('AI Autofill Pro Content Script: Initializing...');
 import 'webextension-polyfill';
-import { checkRadioOrCheckbox, extractFormData, fillTextInput, selectDropdownOption } from './utils';
+import { checkRadioOrCheckbox, extractPageContext, fillTextInput, selectDropdownOption } from './utils';
 
 // Function to execute actions received from the background script
 async function executeActions(actions: any[]) {
+  console.log('Executing actions:', actions);
   const actionHandlers: { [key: string]: (element: HTMLElement, args: any) => void } = {
     fill_text_input: (element, args) => fillTextInput(element as HTMLInputElement | HTMLTextAreaElement, args.value),
     select_dropdown_option: (element, args) => selectDropdownOption(element as HTMLSelectElement, args.value),
@@ -12,12 +14,14 @@ async function executeActions(actions: any[]) {
   for (const action of actions) {
     const { tool_name, args } = action;
     const selector = args.selector;
+    console.log(`Processing action: ${tool_name} for selector: ${selector} with args:`, args);
 
     let element: HTMLElement | null = null;
     try {
       // Use XPath to find the element
       const result = document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
       element = result.singleNodeValue as HTMLElement | null;
+      console.log(`Element found for selector ${selector}:`, element);
     } catch (e) {
       console.warn(`Error evaluating XPath '${selector}':`, e);
       continue;
@@ -31,6 +35,7 @@ async function executeActions(actions: any[]) {
     try {
       const handler = actionHandlers[tool_name];
       if (handler) {
+        console.log(`Calling handler for ${tool_name} on element:`, element);
         handler(element, args);
       } else {
         console.warn(`Unknown tool_name: ${tool_name}`);
@@ -54,10 +59,11 @@ async function executeActions(actions: any[]) {
 // Listen for messages from the background script
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.type === 'EXTRACT_FORM_DATA') {
-    const formData = extractFormData();
-    chrome.runtime.sendMessage({ type: 'FORM_DATA_EXTRACTED', payload: formData });
+    const pageContext = extractPageContext();
+    chrome.runtime.sendMessage({ type: 'FORM_DATA_EXTRACTED', payload: pageContext });
     return true; // Indicates async response
   } else if (message.type === 'EXECUTE_ACTIONS') {
+    console.log('Content Script: Received EXECUTE_ACTIONS message.');
     executeActions(message.payload);
     return true; // Indicates async response
   }

pages/content/src/index.ts

@@ -1,5 +1,32 @@
 import 'webextension-polyfill';
 
+// Helper to check if an element is visible
+export function isElementVisible(el: Element): boolean {
+  if (!(el instanceof HTMLElement)) return false;
+  const style = window.getComputedStyle(el);
+  return (
+    style.display !== 'none' &&
+    style.visibility !== 'hidden' &&
+    style.opacity !== '0' &&
+    el.offsetWidth > 0 &&
+    el.offsetHeight > 0
+  );
+}
+
+// Helper to check if an element contains only text nodes as children
+export function hasOnlyTextNodeChildren(element: HTMLElement): boolean {
+  if (!element.hasChildNodes()) {
+    return true; // No children, so effectively only text nodes (or none)
+  }
+  for (let i = 0; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i];
+    if (child.nodeType !== Node.TEXT_NODE) {
+      return false; // Found a non-text node child
+    }
+  }
+  return true; // All children are text nodes
+}
+
 // Function to get a robust XPath for an element
 export function getElementXPath(element: Element): string {
   if (element.id !== '') {
@@ -83,18 +110,146 @@ export function extractFormData() {
 
 // Helper functions for specific actions
 export function fillTextInput(element: HTMLInputElement | HTMLTextAreaElement, value: string) {
+  console.log(`Filling text input with selector: ${getElementXPath(element)} with value: ${value}`);
   element.value = value;
   element.dispatchEvent(new Event('input', { bubbles: true }));
   element.dispatchEvent(new Event('change', { bubbles: true }));
 }
 
 export function selectDropdownOption(element: HTMLSelectElement, value: string) {
+  console.log(`Selecting dropdown option with selector: ${getElementXPath(element)} with value: ${value}`);
   element.value = value;
   element.dispatchEvent(new Event('change', { bubbles: true }));
 }
 
 export function checkRadioOrCheckbox(element: HTMLInputElement, checked: boolean) {
+  console.log(`Checking radio/checkbox with selector: ${getElementXPath(element)} with checked: ${checked}`);
   element.checked = checked;
   element.dispatchEvent(new Event('click', { bubbles: true })); // Click often triggers more reliably for checkboxes/radios
   element.dispatchEvent(new Event('change', { bubbles: true }));
 }
+
+// Function to extract all relevant page content (form elements and surrounding text)
+export function extractPageContext() {
+  const pageContextItems: any[] = [];
+  let domOrderCounter = 0;
+
+  // Whitelist of tags from which to extract general text content
+  const TEXT_EXTRACTION_TAGS_WHITELIST = new Set([
+    'LABEL', 'DIV', 'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN', 'LI', 'TD', 'TH', 'A', 'BUTTON'
+  ]);
+
+  const traverse = (node: Node) => {
+    if (!node) return;
+
+    // Skip script, style, noscript, and comment nodes entirely
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      const tagName = el.tagName.toUpperCase();
+      if (['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(tagName)) {
+        return; // Skip this node and its children
+      }
+    } else if (node.nodeType === Node.COMMENT_NODE) {
+      return; // Skip comment nodes
+    }
+
+    const currentDomOrder = domOrderCounter++;
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+
+      if (isElementVisible(el)) { // Keep visibility check
+        // Check if it's a form element
+        if (el.matches('input, textarea, select')) {
+          const data: any = {
+            tagName: el.tagName.toLowerCase(),
+            type: (el as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).type || el.tagName.toLowerCase(),
+            id: el.id,
+            name: (el as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).name,
+            placeholder: ('placeholder' in el) ? (el as HTMLInputElement | HTMLTextAreaElement).placeholder : undefined,
+            value: (el as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value,
+            selector: getElementXPath(el),
+            domOrder: currentDomOrder,
+          };
+
+          // Get associated label text
+          let labelText = '';
+          const inputEl = el as HTMLInputElement;
+          if (inputEl.labels && inputEl.labels.length > 0) {
+            const firstLabel = inputEl.labels[0];
+            if (firstLabel) {
+              labelText = firstLabel.textContent || '';
+            }
+          } else {
+            let current = el.previousElementSibling;
+            while (current) {
+              if (current.tagName.toLowerCase() === 'label') {
+                labelText = current.textContent || '';
+                break;
+              }
+              current = current.previousElementSibling;
+            }
+            const parent = el.parentElement;
+            if (!labelText && parent?.tagName.toLowerCase() === 'label') {
+              labelText = parent.textContent || '';
+            }
+          }
+          data.labelText = labelText.trim();
+
+          // Get aria-label or aria-labelledby
+          data.ariaLabel = el.getAttribute('aria-label');
+          data.ariaLabelledBy = el.getAttribute('aria-labelledby');
+
+          if (el.tagName.toLowerCase() === 'select') {
+            data.options = Array.from((el as HTMLSelectElement).options).map(opt => ({
+              text: opt.textContent,
+              value: opt.value,
+            }));
+          } else if (el.type === 'radio' || el.type === 'checkbox') {
+            data.checked = (el as HTMLInputElement).checked;
+          }
+          pageContextItems.push({ type: 'formField', domOrder: currentDomOrder, selector: data.selector, formData: data });
+        } else {
+          // Extract text content from non-form elements if visible and in whitelist
+          const text = el.textContent?.trim();
+          const tagName = el.tagName.toUpperCase();
+          // Heuristic to avoid capturing text already covered by form field labels or redundant text
+          const isFormRelated = el.closest('label, input, textarea, select');
+          // Check if tag is in whitelist, text is meaningful, not form-related, and element only contains text nodes
+          if (text && text.length > 1 && TEXT_EXTRACTION_TAGS_WHITELIST.has(tagName) && !isFormRelated && hasOnlyTextNodeChildren(el)) {
+            pageContextItems.push({
+              type: 'text',
+              domOrder: currentDomOrder,
+              selector: getElementXPath(el),
+              text: text,
+            });
+          }
+        }
+      }
+    } else if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent?.trim();
+      const parentElement = node.parentElement;
+      // Ensure parent is visible, its tag is in whitelist, text is meaningful, not form-related, and parent only contains text nodes
+      if (text && text.length > 1 && parentElement && isElementVisible(parentElement)) {
+        const parentTagName = parentElement.tagName.toUpperCase();
+        if (TEXT_EXTRACTION_TAGS_WHITELIST.has(parentTagName) &&
+            !parentElement.matches('input, textarea, select, label, option') && // Avoid text within form elements/labels, and option elements
+            hasOnlyTextNodeChildren(parentElement)) { // Add this condition
+          pageContextItems.push({
+            type: 'text',
+            domOrder: currentDomOrder,
+            selector: getElementXPath(parentElement), // Use parent's XPath for context
+            text: text,
+          });
+        }
+      }
+    }
+
+    // Recursively traverse children
+    node.childNodes.forEach(traverse);
+  };
+
+  traverse(document.body); // Start traversal from the body
+
+  return pageContextItems;
+}