Créer une interface contextuelle interactive
Développez des interfaces contextuelles dynamiques et adaptatives avec HTML, CSS et JavaScript afin d’offrir des interactions rapides aux utilisateurs.
Créer une interface contextuelle interactive est une leçon Browser Extensions Development (Chrome & Edge) gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Browser Extensions Development (Chrome & Edge), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
What are Extension Popups?
Browser extensions often need a small user interface to interact with. This is where popup pages come in!
- A popup is a small window that appears when you click your extension's icon in the browser toolbar.
- It's perfect for quick actions, displaying information, or simple settings.
- Popups are temporary: they close automatically when you click outside them or switch tabs.
Declaring Your Popup UI
To tell your browser extension which HTML file to use as its popup, you specify it in your manifest.json file.
You use the "action" key, and then "default_popup" points to your HTML file.
{
"manifest_version": 3,
"name": "My Popup Extension",
"version": "1.0",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
}
}Popup's HTML Structure
Your popup is essentially a miniature web page. It uses standard HTML to define its structure and content.
Create a file named popup.html (or whatever you set in manifest.json) and add your HTML.
<!DOCTYPE html>
<html>
<head>
<title>My Popup</title>
</head>
<body>
<h1>Hello from Popup!</h1>
<p>This is your extension's user interface.</p>
</body>
</html>Styling Your Popup with CSS
Just like any web page, you can use CSS to style your popup. Link a CSS file in your popup.html's <head> section.
Keep popup styles concise for a small, focused UI.
/* popup.css */
body {
font-family: sans-serif;
width: 200px; /* Keep popups small */
padding: 10px;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 1.2em;
}Adding Interactivity with JavaScript
To make your popup dynamic and responsive, you'll need JavaScript. Link your script file in your popup.html, usually before the closing </body> tag.
This script runs every time the popup is opened.
// popup.js
document.addEventListener('DOMContentLoaded', () => {
console.log('Popup script loaded!');
// Your interactive code goes here
});Understanding Popup Script Execution
When a user clicks your extension icon, the browser loads and executes your popup.html and its linked JavaScript.
- Each time the popup opens, the script runs from scratch.
- It has access to standard web APIs (DOM, fetch) and specific browser extension APIs (
chrome.*). - When the popup closes, its JavaScript context is destroyed.
Example: Simple Click Counter
Let's create a basic popup that counts how many times a button is clicked.
For this to work, your popup.html needs a <span id="count"> and a <button id="increment">.
// popup.js
let count = 0;
document.addEventListener('DOMContentLoaded', () => {
const countDisplay = document.getElementById('count');
const incrementButton = document.getElementById('increment');
countDisplay.textContent = count;
incrementButton.addEventListener('click', () => {
count++;
countDisplay.textContent = count;
});
});Accessing Browser Extension APIs
Popup scripts can directly use many chrome.* APIs to interact with the browser, tabs, and extension itself.
For example, you can get information about your extension using chrome.runtime.getManifest().
// popup.js
document.addEventListener('DOMContentLoaded', () => {
const manifest = chrome.runtime.getManifest();
const versionElement = document.getElementById('version');
if (versionElement) {
versionElement.textContent = `v${manifest.version}`;
}
console.log('Extension Name:', manifest.name);
});Popup Best Practices
Since popups are temporary, it's crucial to keep them lightweight and performant.
- Keep it small: A popup should have a clear, single purpose.
- Fast loading: Avoid heavy images or complex computations.
- Responsive design: Ensure it looks good on various screen sizes.
- Minimize network requests: Fetch data efficiently or pre-fetch in the background script if possible.
Popup Knowledge Check
Let's test your understanding of extension popups.
Recap: Interactive Popups
Great job! You've learned the fundamentals of creating interactive popup UIs for your browser extensions.
- Popups are small, temporary UIs linked in
manifest.jsonvia"action". - They use standard HTML, CSS, and JavaScript.
- Popup scripts run when the popup opens and are destroyed when it closes.
- They can access browser extension APIs for dynamic interactions.
Next, you'll explore how to build more persistent configuration UIs with Options Pages!
Questions Fréquemment Posées
La leçon « Créer une interface contextuelle interactive » est-elle gratuite ?
Oui — le texte complet de « Créer une interface contextuelle interactive » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Browser Extensions Development (Chrome & Edge), passe à CoddyKit PRO. Le cours Browser Extensions Development (Chrome & Edge) comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Créer une interface contextuelle interactive » ?
Développez des interfaces contextuelles dynamiques et adaptatives avec HTML, CSS et JavaScript afin d’offrir des interactions rapides aux utilisateurs. Tu pratiques Browser Extensions Development (Chrome & Edge) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Browser Extensions Development (Chrome & Edge) ?
Aucune expérience préalable n'est requise. Browser Extensions Development (Chrome & Edge) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Créer une interface contextuelle interactive » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Browser Extensions Development (Chrome & Edge) ?
Oui. Chaque leçon Browser Extensions Development (Chrome & Edge) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Créer une interface contextuelle interactive
- Créer une page d’options
- Communication entre les composants de l’interface
- Thèmes avec CSS et prise en charge du mode sombre