什么是 Ollama Page Assist

Ollama Page Assist 是一个基于 Ollama 框架开发的浏览器扩展工具，旨在通过本地运行的 AI 模型增强网页浏览体验。它能够实时分析网页内容，提供摘要、翻译、问答等功能，同时支持自定义脚本扩展。

核心功能架构

Ollama Page Assist 采用分层架构设计，主要分为以下组件：

前端注入层
通过浏览器扩展的 content script 实现与网页的交互：

// content.js
class PageAssist {
  constructor() {
    this.observer = new MutationObserver(this.handleDOMChanges.bind(this));
  }
  
  start() {
    this.observer.observe(document.body, {
      subtree: true,
      childList: true,
      characterData: true
    });
  }

  handleDOMChanges(mutations) {
    mutations.forEach(mutation => {
      if (mutation.type === 'characterData') {
        this.processTextNode(mutation.target);
      }
    });
  }
}

模型通信层
通过 WebSocket 与本地 Ollama 服务通信：

# server.py
import websockets
from ollama import Client

async def handle_client(websocket):
    client = Client()
    async for message in websocket:
        response = client.generate(
            model="llama3",
            prompt=message,
            stream=True
        )
        async for chunk in response:
            await websocket.send(chunk['response'])

典型使用场景

实时内容摘要
对选中文本生成摘要的示例实现：

// summarizer.js
export async function summarize(text) {
  const response = await fetch('http://localhost:11434/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      model: 'mistral',
      prompt: `Summarize in 3 bullet points:\n${text}`,
      stream: false
    })
  });
  return response.json();
}

跨语言翻译
实现即时翻译的代码示例：

# translator.py
def translate_text(text, target_lang):
    prompt = f"""Translate to {target_lang} while preserving:
    - Technical terms
    - Proper nouns
    - Original formatting
    
    Text: {text}"""
    
    result = ollama.generate(
        model='llama3',
        prompt=prompt,
        options={'temperature': 0.2}
    )
    return result['response']

高级定制功能

自定义指令模板
允许用户创建可重复使用的指令模板：

{
  "templates": {
    "explain_code": {
      "prompt": "Explain this code in detail:\n{{selection}}",
      "model": "codellama"
    },
    "generate_test": {
      "prompt": "Create unit tests for:\n{{selection}}",
      "temperature": 0.3
    }
  }
}

上下文感知处理
利用 DOM 结构增强处理效果：

function enhanceWithContext(text, element) {
  const context = {
    heading: getClosestHeading(element),
    linkText: getSurroundingLinks(element),
    wordCount: text.split(/\s+/).length
  };
  
  return {
    original: text,
    context: context,
    processed: null
  };
}

性能优化技巧

缓存策略
实现基于内容的缓存机制：

from hashlib import md5

def get_cache_key(text, operation):
    return md5(f"{operation}:{text}".encode()).hexdigest()

def cached_generate(text, operation):
    key = get_cache_key(text, operation)
    if key in cache:
        return cache[key]
    
    result = generate_response(text)
    cache[key] = result
    return result

批处理请求
优化多个小文本的处理：

async function batchProcess(elements) {
  const texts = elements.map(el => el.textContent);
  const response = await ollama.batchGenerate({
    inputs: texts,
    template: "Analyze sentiment: {{input}}",
    batch_size: 5
  });
  
  elements.forEach((el, i) => {
    el.dataset.sentiment = response[i].result;
  });
}

安全注意事项

内容过滤
防止敏感信息泄露的预处理：

def sanitize_input(text):
    patterns = [
        r'\b\d{4}-\d{4}-\d{4}-\d{4}\b',  # 信用卡号
        r'\b\d{3}-\d{2}-\d{4}\b'        # SSN
    ]
    
    for pattern in patterns:
        text = re.sub(pattern, '[REDACTED]', text)
    return text

权限控制
扩展 manifest 的权限声明示例：

{
  "permissions": [
    "activeTab",
    "storage",
    "contextMenus",
    "clipboardRead"
  ],
  "host_permissions": [
    "http://localhost:11434/*"
  ]
}

扩展开发示例

创建自定义操作的完整流程：

// custom-action.js
class CustomAction {
  static metadata = {
    name: 'Code Optimizer',
    icon: '💻',
    models: ['codellama', 'llama3']
  };

  async execute(selection) {
    const optimized = await this.optimizeCode(selection);
    return this.createDiffView(selection, optimized);
  }

  async optimizeCode(code) {
    const response = await ollama.generate({
      model: 'codellama',
      prompt: `Optimize this code:\n\`\`\`\n${code}\n\`\`\``
    });
    return extractCodeBlock(response);
  }
}

调试与测试

单元测试示例
使用 Jest 测试核心功能：

// assist.test.js
describe('Summary Generator', () => {
  test('handles empty input', async () => {
    const result = await summarize('');
    expect(result).toHaveProperty('error');
  });

  test('produces valid bullet points', async () => {
    const text = sampleText.substring(0, 500);
    const result = await summarize(text);
    expect(result.summary.split('\n').length).toBeGreaterThan(1);
  });
});

性能监控
跟踪关键指标：

# monitor.py
class PerformanceTracker:
    def __init__(self):
        self.metrics = {
            'response_time': [],
            'token_rate': []
        }

    def record(self, operation, duration, tokens):
        self.metrics['response_time'].append(duration)
        self.metrics['token_rate'].append(tokens/duration)

通过以上技术实现，Ollama Page Assist 能够提供高效、安全的网页增强体验。开发者可以通过扩展 API 添加自定义功能，或修改现有模块适应特定需求。