Claude Skills Guide

Building a Chrome extension that integrates with Anki opens up powerful possibilities for automated learning. Whether you want to capture vocabulary from foreign language websites, save technical documentation highlights, or create flashcards from research articles, combining Chrome’s web access with Anki’s spaced repetition system creates a seamless learning pipeline.

This guide walks through the architecture, implementation patterns, and practical code examples for building Chrome extension Anki integrations that developers and power users can customize for their specific needs.

Understanding the Integration Architecture

Chrome extensions communicate with Anki through two primary mechanisms: the AnkiConnect API (for Anki desktop) or direct file-based import. The AnkiConnect approach is more flexible and provides real-time feedback, while import files work across all Anki versions including AnkiMobile.

Your extension will need three core components:

  1. Content Script - Runs on web pages to extract and analyze content
  2. Background Script - Handles communication between content scripts and external services
  3. Popup/Options Page - Provides user configuration and manual card creation

The data flow typically looks like this: User selects text on a webpage → Content script extracts the selection and surrounding context → Background script processes the data and sends to AnkiConnect → Anki creates the new card.

Setting Up AnkiConnect

Before building your extension, you need the AnkiConnect plugin installed in Anki. Install it from the Anki add-ons repository, then configure it to accept connections from your extension.

Here’s a minimal manifest.json for your Chrome extension:

{
  "manifest_version": 3,
  "name": "Anki Web Clipper",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

Implementing the Content Script

The content script handles text extraction and preparation. For a vocabulary learning use case, you’ll want to capture the selected word, its definition, and example sentences from the surrounding context.

// content.js
function extractSelection() {
  const selection = window.getSelection();
  const selectedText = selection.toString().trim();
  
  if (!selectedText || selectedText.length > 100) {
    return null;
  }

  // Get surrounding context (optional but helpful)
  const range = selection.getRangeAt(0);
  const container = range.startContainer.parentElement;
  const pageTitle = document.title;
  const pageUrl = window.location.href;

  return {
    front: selectedText,
    back: "", // Will be populated with definition later
    tags: ["web-clip"],
    note: {
      deckName: "Web Vocabulary",
      modelName: "Basic",
      fields: {
        Front: selectedText,
        Back: ""
      }
    },
    context: {
      title: pageTitle,
      url: pageUrl,
      sentence: getSurroundingSentence(range)
    }
  };
}

function getSurroundingSentence(range) {
  const text = range.startContainer.textContent;
  const offset = range.startOffset;
  const start = text.lastIndexOf('.', offset - 1) + 1;
  const end = text.indexOf('.', offset);
  return text.slice(start, end > 0 ? end : text.length).trim();
}

// Listen for messages from popup or background
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "extractSelection") {
    const data = extractSelection();
    sendResponse(data);
  }
});

Building the Background Communication Layer

The background script acts as a bridge between your content script and AnkiConnect. It handles the API communication and error management.

// background.js
const ANKICONNECT_URL = "http://127.0.0.1:8765";

async function addCardToAnki(cardData) {
  try {
    const response = await fetch(ANKICONNECT_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: "addNote",
        version: 6,
        params: {
          note: {
            deckName: cardData.note.deckName,
            modelName: cardData.note.modelName,
            fields: cardData.note.fields,
            tags: cardData.tags
          }
        }
      })
    });

    const result = await response.json();
    
    if (result.error) {
      throw new Error(result.error);
    }
    
    return { success: true, cardId: result.result };
  } catch (error) {
    console.error("AnkiConnect error:", error);
    return { success: false, error: error.message };
  }
}

// Handle messages from popup
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "addToAnki") {
    addCardToAnki(request.cardData).then(sendResponse);
    return true; // Keep channel open for async response
  }
});

Creating the User Interface

The popup provides the interface for reviewing and confirming card creation. This is where users configure their card format and deck preferences.

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 320px; padding: 16px; font-family: system-ui; }
    .preview { background: #f5f5f5; padding: 12px; border-radius: 6px; margin: 12px 0; }
    button { background: #2196F3; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; width: 100%; }
    button:hover { background: #1976D2; }
    button:disabled { background: #ccc; }
    .status { margin-top: 12px; padding: 8px; border-radius: 4px; display: none; }
    .success { background: #e8f5e9; color: #2e7d32; }
    .error { background: #ffebee; color: #c62828; }
  </style>
</head>
<body>
  <h3>Add to Anki</h3>
  <div class="preview" id="preview"></div>
  <select id="deckSelect" style="width: 100%; margin-bottom: 12px; padding: 8px;">
    <option value="Web Vocabulary">Web Vocabulary</option>
    <option value="Technical Terms">Technical Terms</option>
  </select>
  <button id="addButton">Add Card</button>
  <div class="status" id="status"></div>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
document.addEventListener('DOMContentLoaded', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // Request selection from content script
  chrome.tabs.sendMessage(tab.id, { action: "extractSelection" }, (data) => {
    if (!data) {
      document.getElementById('preview').textContent = "No text selected";
      document.getElementById('addButton').disabled = true;
      return;
    }
    
    document.getElementById('preview').innerHTML = `
      <strong>Selected:</strong> ${data.front}<br>
      <small>From: ${data.context.title}</small>
    `;
    
    document.getElementById('addButton').addEventListener('click', async () => {
      const deckName = document.getElementById('deckSelect').value;
      data.note.deckName = deckName;
      
      chrome.runtime.sendMessage({ 
        action: "addToAnki", 
        cardData: data 
      }, (response) => {
        const statusEl = document.getElementById('status');
        statusEl.style.display = 'block';
        
        if (response.success) {
          statusEl.className = 'status success';
          statusEl.textContent = `Card added successfully! (ID: ${response.cardId})`;
        } else {
          statusEl.className = 'status error';
          statusEl.textContent = `Error: ${response.error}`;
        }
      });
    });
  });
});

Advanced: Adding Dictionary Lookups

For vocabulary learning, you typically want to fetch definitions automatically. You can extend the background script to call a dictionary API:

async function fetchDefinition(word) {
  const response = await fetch(
    `https://api.dictionaryapi.dev/api/v2/entries/en/${encodeURIComponent(word)}`
  );
  
  if (!response.ok) return null;
  
  const data = await response.json();
  const meaning = data[0]?.meanings[0];
  
  if (!meaning) return null;
  
  const definition = meaning.definitions[0]?.definition;
  const example = meaning.definitions[0]?.example;
  
  return { definition, example, partOfSpeech: meaning.partOfSpeech };
}

Call this function in your background script before sending to Anki, then populate the back field with the definition.

Deployment and Testing Considerations

When distributing your extension, keep these practical notes in mind:

Extending the Integration

This foundation supports many extensions: language learning from news sites, technical term capture from documentation, research paper highlights, and more. The key is defining clear extraction rules for your specific use case and handling the data transformation between web content and Anki’s card format.

The AnkiConnect API supports additional operations like searching existing cards, updating notes, and managing decks. These enable features like duplicate detection before adding new cards, automatic deck routing based on content source, and bulk import from saved collections.

Built by theluckystrike — More at zovo.one

Explore Our Developer Guides

© 2026 theluckystrike Developer Guides