Skip to main content

​
Overview

The Knowledge Tooltip extension integrates with the Wikipedia REST API to fetch article summaries and search for matching articles. All requests are made through the background service worker to avoid CORS restrictions.
The extension supports both English (en.wikipedia.org) and Arabic (ar.wikipedia.org) Wikipedia domains based on the user’s language preference.

​
Features Using This API

  • Encyclopedia Tab: Displays Wikipedia article summaries
  • Search Fallback: Finds the best matching article when direct lookup fails
  • Multi-language Support: Automatically switches between English and Arabic Wikipedia

​
Page Summary Endpoint

Retrieves a summary of a Wikipedia article by title.

​
Endpoint

GET https://{domain}/api/rest_v1/page/summary/{title}
​
domain
string
required
Wikipedia domain: en.wikipedia.org or ar.wikipedia.org
​
title
string
required
URL-encoded article title (e.g., Albert_Einstein, Machine_learning)

​
Implementation

From background.js:80-91: 
async function fetchWikipediaData(term, language) {
  const wikiDomain = language === 'ar' ? 'ar.wikipedia.org' : 'en.wikipedia.org';
  const url = `https://${wikiDomain}/api/rest_v1/page/summary/${encodeURIComponent(term)}`;

  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return await response.json();
}

​
Request Example

chrome.runtime.sendMessage({
  action: 'fetchWikipedia',
  term: 'JavaScript',
  language: 'en'
}, (response) => {
  if (response.success) {
    console.log(response.data);
  } else {
    console.error(response.error);
  }
});

​
Response Structure

​
title
string
Article title
​
extract
string
Plain text summary of the article
​
extract_html
string
HTML-formatted summary with links
​
thumbnail
object
Thumbnail image information
​
originalimage
object
Full-size image information (same structure as thumbnail)
​
content_urls
object
URLs to desktop and mobile Wikipedia pages

​
Response Example

{
  "title": "JavaScript",
  "extract": "JavaScript, often abbreviated as JS, is a programming language...",
  "extract_html": "<p><b>JavaScript</b>, often abbreviated as <b>JS</b>...",
  "thumbnail": {
    "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/200px-Unofficial_JavaScript_logo_2.svg.png",
    "width": 200,
    "height": 200
  },
  "content_urls": {
    "desktop": {
      "page": "https://en.wikipedia.org/wiki/JavaScript"
    }
  }
}

​
OpenSearch Endpoint

Searches Wikipedia and returns the best matching article title.

​
Endpoint

GET https://{domain}/w/api.php?action=opensearch&search={term}&limit=1&format=json&origin=*
​
action
string
default:"opensearch"
API action type
​
search
string
required
Search query (URL-encoded)
​
limit
number
default:"1"
Maximum number of results to return
​
format
string
default:"json"
Response format
​
origin
string
default:"*"
CORS origin header (required for cross-origin requests)

​
Implementation

From background.js:93-111: 
async function searchWikipediaAPI(term, language) {
  const wikiDomain = language === 'ar' ? 'ar.wikipedia.org' : 'en.wikipedia.org';
  const url = `https://${wikiDomain}/w/api.php?action=opensearch&search=${encodeURIComponent(term)}&limit=1&format=json&origin=*`;

  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  const data = await response.json();

  if (data[1] && data[1].length > 0) {
    return data[1][0];
  }

  return null;
}

​
Response Structure

OpenSearch returns a 4-element array: 
[
  "search term",           // [0] Original search query
  ["Article Title"],       // [1] Array of matching titles
  ["Description"],         // [2] Array of descriptions
  ["https://en.wikipedia.org/wiki/Article_Title"]  // [3] Array of URLs
]
The extension extracts data[1][0] (the first matching title) or returns null if no matches found.

​
Response Example

[
  "js",
  ["JavaScript"],
  [""],
  ["https://en.wikipedia.org/wiki/JavaScript"]
]

​
Error Handling

All Wikipedia API calls include HTTP status code checking and return standardized error messages.

​
Error Flow

From background.js:17-26: 
function toErrMsg(error) {
  return (error instanceof Error ? error.message : String(error)) || 'Unknown error';
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'fetchWikipedia') {
    fetchWikipediaData(message.term, message.language)
      .then(data => sendResponse({ success: true, data }))
      .catch(error => sendResponse({ success: false, error: toErrMsg(error) }));
    return true;
  }
});

​
Common Error Codes

Status CodeMeaningHandling
404Article not foundFalls back to search API
301/302RedirectFollow redirect automatically
500Server errorDisplay error message to user
429Rate limitedRetry with exponential backoff

​
Usage in Content Script

The content script communicates with the background worker using Chrome’s messaging API: 
// Fetch article summary
chrome.runtime.sendMessage({
  action: 'fetchWikipedia',
  term: selectedText,
  language: currentLanguage
}, (response) => {
  if (response.success) {
    displayWikipediaSummary(response.data);
  } else {
    // Fall back to search
    chrome.runtime.sendMessage({
      action: 'searchWikipedia',
      term: selectedText,
      language: currentLanguage
    }, (searchResponse) => {
      if (searchResponse.success && searchResponse.result) {
        // Retry with matched title
      }
    });
  }
});

​
Rate Limits

Wikipedia’s REST API has generous rate limits for reasonable use:
  • 200 requests/second for anonymous users
  • No authentication required
  • Consider implementing client-side caching for repeated lookups

Build docs developers (and LLMs) love

Get started for freeTalk to us