Skip to main content

​
Prerequisites

Knowledge Tooltip is built with vanilla JavaScript and requires no build tools or dependencies. All you need is:
  • A Chromium-based browser (Chrome, Edge, Brave, Opera, or Vivaldi)
  • A text editor or IDE
  • Git for version control
This extension uses Manifest V3, Chrome’s latest extension platform. It works on all modern Chromium browsers.

​
Installation

1

Clone the repository

Clone the Knowledge Tooltip repository to your local machine:
git clone https://github.com/ibralassaf/knowledge-tooltip.git
cd knowledge-tooltip
2

Open Chrome Extensions

Navigate to your browser’s extensions page:
  • Chrome: chrome://extensions/
  • Edge: edge://extensions/
  • Brave: brave://extensions/
You can also access this through the browser menu: More Tools → Extensions
3

Enable Developer Mode

Toggle the Developer mode switch in the top right corner of the extensions page.
Developer mode allows you to load unpacked extensions and see detailed error messages.
4

Load the Extension

Click the Load unpacked button and select the project folder you cloned.The extension icon should appear in your browser toolbar.
5

Test the Extension

Navigate to any webpage, highlight some text, and click the floating Knowledge Tooltip button.Try different tabs (Summary, Define, Facts) to verify everything works correctly.

​
Development Workflow

​
Making Changes

Edit any file in the project using your preferred text editor. The extension files are:
  • manifest.json - Extension configuration
  • background.js - Service worker for API calls
  • content.js - Content script (UI and events)
  • popup.html / popup.js - Settings popup
  • styles.css - All extension styles

​
Reloading the Extension

After making changes, you need to reload the extension:
1

Go to Extensions Page

Open chrome://extensions/ (or your browser’s equivalent)
2

Click Reload

Find the Knowledge Tooltip extension and click the circular reload icon.
Keyboard shortcut: You can also use Ctrl+R (Windows/Linux) or Cmd+R (Mac) while focused on the extensions page.
3

Refresh Test Pages

For content.js and styles.css changes, you also need to refresh any open webpages where you’re testing the extension.

​
What Requires Reloading

File ChangedReload ExtensionRefresh Webpage
manifest.jsonYesYes
background.jsYesNo
content.jsYesYes
styles.cssYesYes
popup.html / popup.jsYesNo
The popup UI can be tested by closing and reopening it without reloading the extension, but it’s best practice to reload after changes.

​
Debugging

​
Content Script Debugging

To debug content.js:
  1. Open any webpage
  2. Right-click and select Inspect (or press F12)
  3. Go to the Console tab
  4. Look for messages from content.js
  5. Use the Sources tab to set breakpoints

​
Background Script Debugging

To debug background.js:
  1. Go to chrome://extensions/
  2. Find Knowledge Tooltip
  3. Click Inspect views: service worker
  4. A DevTools window will open for the background script
Service workers may become inactive after periods of inactivity. Click the link again to wake it up and view console logs.
To debug popup.js:
  1. Click the extension icon to open the popup
  2. Right-click inside the popup
  3. Select Inspect
  4. DevTools will open for the popup

​
Testing APIs

​
Wikipedia, Wiktionary, Wikidata

These APIs require no authentication and work immediately:
  • Test with common terms: “Albert Einstein”, “philosophy”, “Paris”
  • Test with Arabic terms: “مصر”, “علم”
  • Check both English and Arabic language modes

​
OpenAI API (AI and Translate tabs)

The AI and Translate features require an OpenAI API key:
  1. Get an API key from platform.openai.com
  2. Click the extension icon
  3. Click Add API key
  4. Enter your key and click Save
  5. Test the AI and Translate tabs
API keys are stored locally in chrome.storage.local and never synced across devices. Keep your keys secure and never commit them to version control.

​
Common Issues

​
Extension Not Appearing

  • Ensure Developer mode is enabled
  • Check that you selected the correct folder (containing manifest.json)
  • Look for errors on the extensions page

​
Changes Not Taking Effect

  • Make sure you reloaded the extension
  • Refresh the webpage where you’re testing
  • Check the console for JavaScript errors

​
CORS Errors

  • All API calls should go through background.js
  • The host_permissions in manifest.json must include the API domain
  • Content scripts cannot make direct API calls due to CORS restrictions

​
Next Steps

Project Structure

Learn about the codebase organization and architecture

Contribution Guidelines

Read the guidelines for contributing code

Build docs developers (and LLMs) love

Get started for freeTalk to us