Bir Uzantı Projesinin Anatomisi
Manifest V3 tarayıcı uzantısını oluşturan standart dosya ve klasörleri, ayrıca her birinin görevini tanıyın.
Bir Uzantı Projesinin Anatomisi, CoddyKit'te ücretsiz bir Browser Extensions Development (Chrome & Edge) dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Browser Extensions Development (Chrome & Edge) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Extensions Are Just Web Files
An extension is just a bundle of HTML, CSS, JavaScript, and a config file, which the browser loads in a special, extra-capable context.
The manifest.json Heart
Every extension needs a manifest.json at its root — it declares name, version, permissions, and scripts. Without it, the browser ignores the folder.
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0"
}A Typical Folder Structure
Layout is flexible, but a clean folder structure stays maintainable: manifest at root, plus popup, background, content, and icons folders.
The Background Service Worker
In Manifest V3, background logic runs as a service worker. It handles events even with no UI open, but unloads when idle to save memory.
{
"background": {
"service_worker": "background.js"
}
}The Popup Action
The action defines the toolbar button and the popup it opens — itself just a tiny HTML page. The config below shows both fields.
{
"action": {
"default_popup": "popup/popup.html",
"default_title": "Open My Extension"
}
}Content Scripts
Content scripts run inside web pages so your extension can read and modify the DOM. You scope them with URL match patterns.
{
"content_scripts": [{
"matches": ["https://*.example.com/*"],
"js": ["content/main.js"]
}]
}Icons in Multiple Sizes
Provide your icon in several sizes — browsers show it in different places at different resolutions, so it stays crisp everywhere.
{
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}Declaring Permissions
The permissions array lists the browser APIs you need, like storage or tabs. Request only what you actually use.
{
"permissions": ["storage", "activeTab"]
}Web-Accessible Resources
If a web page must load a file packaged in your extension, list it under web_accessible_resources — otherwise the browser blocks access.
{
"web_accessible_resources": [{
"resources": ["images/logo.png"],
"matches": ["https://*.example.com/*"]
}]
}How Pieces Communicate
Popup, content scripts, and service worker live in separate contexts, so they talk via the messaging API, not shared variables.
chrome.runtime.sendMessage({ type: 'PING' })Keeping It Organized
As it grows, group related files into folders and keep manifest.json lean. A predictable layout makes debugging and store review easier.
Quick Check
Check what you remember about extension structure.
Recap
You toured the building blocks: manifest.json declares all, a service worker runs background, the action drives the popup, content scripts touch pages.
Sıkça Sorulan Sorular
“Bir Uzantı Projesinin Anatomisi” dersi ücretsiz mi?
Evet — “Bir Uzantı Projesinin Anatomisi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Browser Extensions Development (Chrome & Edge) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Browser Extensions Development (Chrome & Edge) kursu toplamda 4 dersten oluşur.
“Bir Uzantı Projesinin Anatomisi” dersinde ne öğreneceğim?
Manifest V3 tarayıcı uzantısını oluşturan standart dosya ve klasörleri, ayrıca her birinin görevini tanıyın. Browser Extensions Development (Chrome & Edge) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Browser Extensions Development (Chrome & Edge) öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Browser Extensions Development (Chrome & Edge), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Bir Uzantı Projesinin Anatomisi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Browser Extensions Development (Chrome & Edge) dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Browser Extensions Development (Chrome & Edge) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tarayıcı Uzantıları Nedir
- Geliştirme Ortamını Kurma
- İlk 'Hello World' Uzantınız
- Bir Uzantı Projesinin Anatomisi