أول إضافة 'Hello World' لك
أنشئ إضافة بسيطة تعرض عبارة 'Hello World'، مع تغطية ملف البيان والبنية الأساسية وتحميلها في المتصفح
أول إضافة 'Hello World' لك درس مجاني في Browser Extensions Development (Chrome & Edge) على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Browser Extensions Development (Chrome & Edge)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Browser Extensions Development (Chrome & Edge) 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Your First Extension: Hello World
Time to build your first extension — a classic Hello World popup that greets you when you click its toolbar icon. The core Manifest V3 shape.
Core Extension Components
Every extension needs a few key files: manifest.json (the blueprint), popup.html (the popup content), and an icon. We'll build them step by step.
Manifest.json: The Blueprint
The manifest.json is the most important file — JSON metadata like name, version, and permissions, in the structure Manifest V3 expects.
Essential Manifest Fields
Start your manifest with three required fields: manifest_version 3, a name, and a version. The snippet below shows the minimal shape.
{ "manifest_version": 3,
"name": "Hello World Extension",
"version": "1.0"
}Adding Description & Icons
Add a description and an icons map so users understand and recognize your extension. Provide several sizes like 16, 48, and 128 pixels.
{ "manifest_version": 3,
"name": "Hello World Extension",
"version": "1.0",
"description": "A simple 'Hello World' extension for CoddyKit.",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}Defining the Popup with 'action'
The action field defines the toolbar button: default_popup points to your popup HTML, and default_icon sets the toolbar image.
{ "manifest_version": 3,
"name": "Hello World Extension",
"version": "1.0",
"description": "A simple 'Hello World' extension for CoddyKit.",
"icons": { "16": "icon16.png" },
"action": {
"default_popup": "popup.html",
"default_icon": { "16": "icon16.png" }
}
}Creating popup.html
Create popup.html — a plain HTML file holding your Hello World message. Keep it small and light, since it shows in a tiny popup window.
<!DOCTYPE html>
<html>
<head>
<title>Hello World Popup</title>
<style>
body { font-family: sans-serif; padding: 15px; width: 150px; }
h1 { font-size: 1.2em; color: #333; margin: 0; }
</style>
</head>
<body>
<h1>Hello, CoddyKit!</h1>
</body>
</html>Your Extension's Folder Structure
Your folder should now hold manifest.json, popup.html, and the icons, all directly inside — a clean layout the browser can load correctly.
Loading Your Extension (Chrome)
Load it in Chrome or Edge: open chrome://extensions, flip on Developer mode, click Load unpacked, and pick your folder. It joins the list!
Test Your New Extension!
Spot your extension's icon in the toolbar and click it — a popup appears reading "Hello, CoddyKit!" from your popup.html. First extension done!
Quick Check: Manifest V3
Which field is absolutely essential to declare the manifest format version in manifest.json for a Manifest V3 extension?
Recap: Your First Extension
You built and loaded a real extension: a manifest with key fields, an action popup, a popup.html, all run via Developer mode. Keep tinkering!
الأسئلة الشائعة
هل درس «أول إضافة 'Hello World' لك» مجاني؟
نعم — نص درس «أول إضافة 'Hello World' لك» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Browser Extensions Development (Chrome & Edge)، انتقل إلى CoddyKit PRO. تتضمن دورة Browser Extensions Development (Chrome & Edge) 4 دروس في المجموع.
ماذا ستتعلم في «أول إضافة 'Hello World' لك»؟
أنشئ إضافة بسيطة تعرض عبارة 'Hello World'، مع تغطية ملف البيان والبنية الأساسية وتحميلها في المتصفح تتمرن على Browser Extensions Development (Chrome & Edge) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Browser Extensions Development (Chrome & Edge)؟
لا تُشترط خبرة سابقة. Browser Extensions Development (Chrome & Edge) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «أول إضافة 'Hello World' لك»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Browser Extensions Development (Chrome & Edge) هذا؟
نعم. كل درس في Browser Extensions Development (Chrome & Edge) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما هي إضافات المتصفح؟
- إعداد بيئة التطوير
- أول إضافة 'Hello World' لك
- تشريح مشروع الإضافة