History

softchris f3dd2301ef 🌐 Update translations via Co-op Translator		4 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	4 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Browser Extension Project Part 3: Background Tasks နှင့် Performance ကိုလေ့လာပါ

journey
    title Your Performance Optimization Journey
    section Foundation
      Learn browser tools: 3: Student
      Understand profiling: 4: Student
      Identify bottlenecks: 4: Student
    section Extension Features
      Build color system: 4: Student
      Create background tasks: 5: Student
      Update icons dynamically: 5: Student
    section Optimization
      Monitor performance: 5: Student
      Debug issues: 4: Student
      Polish experience: 5: Student

တချို့ browser extension တွေက အလွန်လျင်မြန်ပြီး တုံ့ပြန်မှုကောင်းကောင်းရှိသလို၊ တချို့ကတော့ အလွန်နှေးကွေးနေတတ်တာကို သတိထားမိပါသလား။ အဓိကလျှို့ဝှက်ချက်ကတော့ နောက်ကွယ်မှာ ဖြစ်ပျက်နေတဲ့ အရာတွေမှာ ရှိပါတယ်။ အသုံးပြုသူတွေက extension interface ကိုနှိပ်နေချိန်မှာ၊ background process တွေက data fetching, icon updates, system resources စတာတွေကို တိတ်တိတ်ဆိတ်ဆိတ် စီမံခန့်ခွဲနေပါတယ်။

ဒီ browser extension စီးရီးရဲ့ နောက်ဆုံးသင်ခန်းစာမှာတော့ သင့် carbon footprint tracker ကို smoothly အလုပ်လုပ်အောင် ပြုလုပ်ပေးမှာဖြစ်ပါတယ်။ သင့် extension icon ကို dynamic updates တွေထည့်ပြီး performance issue တွေကို ပြဿနာဖြစ်မတိုင်မီ သတိထားမိနိုင်ဖို့ လေ့လာပါမယ်။ ဒါဟာ race car ကို tune လုပ်တဲ့အတိုင်းပါပဲ - optimization အနည်းငယ်က အားလုံးအလုပ်လုပ်ပုံကို အလွန်ကြီးမားတဲ့ အပြောင်းအလဲကို ဖြစ်စေတတ်ပါတယ်။

ဒီသင်ခန်းစာပြီးဆုံးချိန်မှာတော့ သင့်မှာ polished extension ရှိပြီး၊ web app ကောင်းတွေကို အလွန်ကောင်းတဲ့အဆင့်တင်ပေးတဲ့ performance principle တွေကို နားလည်သွားပါလိမ့်မယ်။ Browser optimization ရဲ့ ကမ္ဘာကို စတင်လေ့လာလိုက်ရအောင်။

Pre-Lecture Quiz

Pre-lecture quiz

Introduction

ယခင်သင်ခန်းစာတွေမှာတော့ သင့်အနေနဲ့ form တစ်ခုကို တည်ဆောက်ပြီး၊ API နဲ့ချိတ်ဆက်ပြီး၊ asynchronous data fetching ကို handle လုပ်ခဲ့ပါတယ်။ သင့် extension က အဆင့်ဆင့် တည်ဆောက်နေပြီဖြစ်ပါတယ်။

အခုတော့ အဆုံးသတ် touch တွေထည့်ဖို့လိုပါတယ် - carbon data အပေါ်မူတည်ပြီး extension icon ကို အရောင်ပြောင်းအောင်လုပ်တာလိုမျိုးပါ။ NASA က Apollo spacecraft ရဲ့ system တစ်ခုချင်းစီကို optimize လုပ်ဖို့လိုခဲ့တာကို သတိရပါတယ်။ wasted cycles သို့မဟုတ် memory မရှိအောင်လုပ်ဖို့လိုခဲ့ပါတယ်။ ဘဝတွေ performance အပေါ်မူတည်နေခဲ့ပါတယ်။ သို့သော် browser extension က အလွန်အရေးကြီးတာမဟုတ်ပေမယ့်၊ အဲဒီအခြေခံ principle တွေကတော့ အတူတူပါပဲ - efficient code က user experience ကို ပိုကောင်းစေပါတယ်။

mindmap
  root((Performance & Background Tasks))
    Browser Performance
      Rendering Pipeline
      Asset Optimization
      DOM Manipulation
      JavaScript Execution
    Profiling Tools
      Developer Tools
      Performance Tab
      Timeline Analysis
      Bottleneck Detection
    Extension Architecture
      Background Scripts
      Content Scripts
      Message Passing
      Icon Management
    Optimization Strategies
      Code Splitting
      Lazy Loading
      Caching
      Resource Compression
    Visual Feedback
      Dynamic Icons
      Color Coding
      Real-time Updates
      User Experience

Web Performance Basics

သင့် code က အလွန်ထိရောက်စွာ အလုပ်လုပ်တဲ့အခါ၊ လူတွေက အတိအကျ ခံစားနိုင်ပါတယ်။ Page တစ်ခုက ချက်ချင်း load ဖြစ်တာ၊ animation တစ်ခုက smooth ဖြစ်တာကို သတိထားမိတဲ့အချိန်ကို သတိရပါ။

Performance က speed အပေါ်ပဲမဟုတ်ပါဘူး - clunky ဖြစ်တာ၊ frustrating ဖြစ်တာမဟုတ်ဘဲ natural ဖြစ်တဲ့ web experience တွေကို ဖန်တီးပေးတာပါ။ Computing ရဲ့အစောပိုင်းကာလတွေမှာ Grace Hopper က nanosecond (အလျားတစ်ပေခန့်ရှိတဲ့ wire) ကို သူ့ရဲ့ desk ပေါ်မှာထားခဲ့ပါတယ်။ အဲဒါက light က တစ် billionth of a second အတွင်းသွားနိုင်တဲ့အကွာအဝေးကို ပြသဖို့ပါ။ Computing မှာ microsecond တစ်ခုချင်းစီက အရေးကြီးတဲ့အကြောင်းကို ရှင်းပြဖို့ပါ။ ဘာတွေ slow down ဖြစ်နေတယ်ဆိုတာကို ရှာဖွေဖို့ detective tools တွေကို လေ့လာကြရအောင်။

"Website performance က page load ဖြစ်တဲ့အမြန်နှုန်းနဲ့၊ code run ဖြစ်တဲ့အမြန်နှုန်းနှစ်ခုအပေါ်မူတည်ပါတယ်။" -- Zack Grossbart

Website တွေကို device အမျိုးမျိုး၊ user အမျိုးမျိုး၊ situation အမျိုးမျိုးမှာ အလွန်မြန်ဆန်အောင်လုပ်ဖို့နည်းလမ်းတွေက အလွန်ကျယ်ပြန့်ပါတယ်။ Standard web project သို့မဟုတ် browser extension တစ်ခုကို တည်ဆောက်တဲ့အခါ သတိထားစရာအချက်အချာတွေကို အောက်မှာဖော်ပြထားပါတယ်။

Site ကို optimize လုပ်ဖို့ ပထမဆုံးအဆင့်က အတိအကျ ဘာတွေဖြစ်နေတယ်ဆိုတာကို နားလည်ဖို့ပါ။ ကံကောင်းစွာ browser တွေမှာ powerful detective tools တွေ built-in ပါပြီးသားဖြစ်ပါတယ်။

flowchart LR
    A[HTML] --> B[Parse]
    B --> C[DOM Tree]
    D[CSS] --> E[Parse]
    E --> F[CSSOM]
    G[JavaScript] --> H[Execute]
    
    C --> I[Render Tree]
    F --> I
    H --> I
    
    I --> J[Layout]
    J --> K[Paint]
    K --> L[Composite]
    L --> M[Display]
    
    subgraph "Critical Rendering Path"
        N["1. Parse HTML"]
        O["2. Parse CSS"]
        P["3. Execute JS"]
        Q["4. Build Render Tree"]
        R["5. Layout Elements"]
        S["6. Paint Pixels"]
        T["7. Composite Layers"]
    end
    
    style M fill:#e8f5e8
    style I fill:#fff3e0
    style H fill:#ffebee

Edge မှာ Developer Tools ကိုဖွင့်ဖို့၊ အပေါ်ညာဘက်မှာရှိတဲ့ အဲဒီ dot သုံးခုကိုနှိပ်ပြီး More Tools > Developer Tools ကိုသွားပါ။ ဒါမှမဟုတ် keyboard shortcut ကိုသုံးပါ - Windows မှာ Ctrl + Shift + I သို့မဟုတ် Mac မှာ Option + Command + I ကိုနှိပ်ပါ။ အဲဒီမှာ Performance tab ကို click လုပ်ပါ - investigation လုပ်မယ့်နေရာက ဒီမှာပါ။

Performance detective toolkit:

Open Developer Tools (developer အနေနဲ့ အမြဲသုံးရမှာပါ!)
Head to the Performance tab - web app ရဲ့ fitness tracker လို့ထင်ပါ
Hit Record button ကိုနှိပ်ပြီး page ရဲ့အလုပ်လုပ်ပုံကိုကြည့်ပါ
Study result တွေကိုကြည့်ပြီး ဘာတွေ slow down ဖြစ်နေတယ်ဆိုတာရှာပါ

စမ်းကြည့်ရအောင်။ Website တစ်ခုကိုဖွင့်ပါ (Microsoft.com ကောင်းပါတယ်) 'Record' button ကိုနှိပ်ပါ။ အခုတော့ page ကို refresh လုပ်ပြီး profiler က ဖြစ်ပျက်နေတဲ့အရာတွေကို capture လုပ်တာကိုကြည့်ပါ။ Recording ကိုရပ်လိုက်တဲ့အခါ browser က site ကို 'scripts', 'renders', 'paints' လုပ်ပုံကို အကြမ်းဖျင်းဖော်ပြထားတဲ့ breakdown ကိုတွေ့ပါလိမ့်မယ်။ Rocket launch အတွင်း mission control က system တစ်ခုချင်းစီကို monitor လုပ်ပုံလိုမျိုးပါပဲ - ဘာတွေဖြစ်နေတယ်၊ ဘယ်အချိန်မှာဖြစ်တယ်ဆိုတာ real-time data ရပါတယ်။

✅ Microsoft Documentation မှာပိုမိုနက်နက်ရှိုင်းရှိုင်းလေ့လာနိုင်ပါတယ်

Pro tip: Browser cache ကို clear လုပ်ပြီး testing လုပ်ပါ။ First-time visitor တွေအတွက် site performance ကိုကြည့်ပါ - repeat visitor တွေထက် အလွန်ကွာခြားပါတယ်။

Profile timeline ရဲ့ element တွေကို select လုပ်ပြီး page load ဖြစ်နေချိန်မှာဖြစ်တဲ့ event တွေကို zoom in လုပ်ပါ။

Profile timeline ရဲ့ အပိုင်းတစ်ခုကို select လုပ်ပြီး summary pane မှာ page performance ရဲ့ snapshot ကိုကြည့်ပါ:

Event Log pane မှာ event တစ်ခုခု 15 ms ထက်ပိုကြာနေမလားဆိုတာစစ်ပါ:

✅ Profiler ကိုနားလည်ပါ! ဒီ site ရဲ့ developer tools ကိုဖွင့်ပြီး bottleneck တွေရှိမရှိကြည့်ပါ။ ဘာ asset က slowest-loading ဖြစ်နေလဲ? Fastest-loading asset ကဘာလဲ?

flowchart TD
    A[Open DevTools] --> B[Navigate to Performance Tab]
    B --> C[Click Record Button]
    C --> D[Perform Actions]
    D --> E[Stop Recording]
    E --> F{Analyze Results}
    
    F --> G[Check Timeline]
    F --> H[Review Network]
    F --> I[Examine Scripts]
    F --> J[Identify Paint Events]
    
    G --> K{Long Tasks?}
    H --> L{Large Assets?}
    I --> M{Render Blocking?}
    J --> N{Expensive Paints?}
    
    K -->|Yes| O[Optimize JavaScript]
    L -->|Yes| P[Compress Assets]
    M -->|Yes| Q[Add Async/Defer]
    N -->|Yes| R[Simplify Styles]
    
    O --> S[Test Again]
    P --> S
    Q --> S
    R --> S
    
    style A fill:#e1f5fe
    style F fill:#fff3e0
    style S fill:#e8f5e8

Profiling လုပ်တဲ့အခါ သတိထားစရာအချက်များ

Profiler ကို run လုပ်တာက စတင်ခြင်းသာဖြစ်ပါတယ် - အဓိက skill ကတော့ အဲဒီ colorful charts တွေက ဘာကိုပြောပြနေတယ်ဆိုတာကို နားလည်နိုင်ဖို့ပါ။ စိတ်မပူပါနဲ့၊ အဲဒီ charts တွေကိုဖတ်နိုင်ဖို့ အလွယ်တကူကျွမ်းကျင်သွားပါလိမ့်မယ်။ အတွေ့အကြုံရှိတဲ့ developer တွေက warning signs တွေကို ပြဿနာဖြစ်မတိုင်မီ သတိထားမိနိုင်ပါတယ်။

Performance troublemakers တွေ - web project တွေထဲမှာ အလွန်လွယ်ကူစွာဝင်ရောက်လာတတ်တဲ့ ပြဿနာတွေကို ပြောကြရအောင်။ Marie Curie က lab မှာ radiation level တွေကို သေချာစောင့်ကြည့်ခဲ့ရသလို၊ trouble brewing ဖြစ်နေတဲ့ pattern တွေကို သတိထားမိဖို့လိုပါတယ်။ အစောပိုင်းမှာပဲ အဲဒီတွေကိုဖမ်းမိနိုင်ရင် သင့်အတွက် (နဲ့ သင့် user တွေအတွက်) အလွန်အဆင်ပြေစေပါလိမ့်မယ်။

Asset sizes: Website တွေဟာ နှစ်အတော်ကြာလာတာနဲ့အမျှ "လေး"လာတာကိုတွေ့ရပါတယ်။ အဲဒီအလေးအနက်အများစုက images တွေကြောင့်ဖြစ်ပါတယ်။ ဒါဟာ digital suitcase တွေထဲမှာ ပိုပြီးအရာတွေထည့်နေတဲ့အတိုင်းပါပဲ။

✅ Internet Archive ကိုကြည့်ပြီး page size တွေဘယ်လိုကြီးလာတယ်ဆိုတာကိုလေ့လာပါ - အလွန်စိတ်ဝင်စားဖွယ်ကောင်းပါတယ်။

Assets ကို optimize လုပ်နည်း:

Compress images တွေ! WebP လို modern format တွေက file size တွေကို အလွန်လျှော့ချနိုင်ပါတယ်
Serve device တစ်ခုချင်းစီအတွက် image size မှန်ကန်တဲ့အရာကိုပေးပါ - phone တွေကို desktop image ใหญ่တွေမပို့ပါနဲ့
Minify CSS နဲ့ JavaScript - byte တစ်ခုချင်းစီက အရေးကြီးပါတယ်
Use lazy loading - user တွေ scroll လုပ်တဲ့အခါမှ images တွေ download ဖြစ်အောင်လုပ်ပါ

DOM traversals: Browser က သင့် code အပေါ်မူတည်ပြီး Document Object Model ကို တည်ဆောက်ရပါတယ်။ Page performance ကောင်းဖို့ tag တွေကို အနည်းဆုံးထားပြီး၊ page ကိုလိုအပ်တဲ့အရာတွေကိုသာ အသုံးပြုပါ။ Page တစ်ခုမှာသာလိုအပ်တဲ့ styles တွေကို main style sheet ထဲမှာမထည့်ပါနဲ့။

DOM optimization အတွက် key strategy:

Minimizes HTML element အရေအတွက်နဲ့ nesting level
Removes မလိုအပ်တဲ့ CSS rule တွေကိုဖယ်ရှားပြီး stylesheet တွေကို အကျိုးရှိအောင်စုစည်းပါ
Organizes CSS ကို page တစ်ခုချင်းစီအတွက်လိုအပ်တာသာ load ဖြစ်အောင်လုပ်ပါ
Structures HTML ကို semantic ဖြစ်အောင်ရေးပါ - browser parsing ကောင်းစေပါတယ်

JavaScript: JavaScript developer တစ်ဦးအနေနဲ့ 'render-blocking' script တွေကို သတိထားမိဖို့လိုပါတယ်။ DOM ကို traverse နဲ့ paint လုပ်မတိုင်မီ load ဖြစ်ရတဲ့ script တွေပါ။ Terrarium module မှာလုပ်သလို inline script တွေကို defer သုံးပါ။

Modern JavaScript optimization technique:

Uses defer attribute ကို script တွေ DOM parsing ပြီးမှ load ဖြစ်အောင်လုပ်ပါ
Implements code splitting - လိုအပ်တဲ့ JavaScript ကိုသာ load ဖြစ်အောင်လုပ်ပါ
Applies lazy loading - non-critical functionality အတွက်သာ
Minimizes heavy library နဲ့ framework တွေကို မလိုအပ်လျှင်မသုံးပါနဲ့

✅ Site Speed Test website မှာ site performance ကိုစစ်ဆေးတဲ့ common check တွေကိုလေ့လာပါ။

🔄 Pedagogical Check-in

Performance နားလည်မှု: Extension feature တွေတည်ဆောက်မတိုင်မီ သေချာစွာနားလည်ပါ:

✅ HTML က pixels ဖြစ်တဲ့ critical rendering path ကိုရှင်းပြနိုင်ပါ
✅ Web application တွေမှာ common performance bottleneck တွေကိုဖော်ထုတ်နိုင်ပါ
✅ Browser developer tools ကိုသုံးပြီး page performance ကို profile လုပ်နိုင်ပါ
✅ Asset size နဲ့ DOM complexity က speed ကိုဘယ်လိုသက်ရောက်တယ်ဆိုတာနားလည်ပါ

Quick Self-Test: Render-blocking JavaScript ရှိတဲ့အခါ ဘာဖြစ်မလဲ? အဖြေ: Browser က script ကို download နဲ့ execute လုပ်ပြီးမှ HTML parsing နဲ့ page rendering ကိုဆက်လုပ်နိုင်ပါတယ်

Real-World Performance Impact:

100ms delay: User တွေ slowdown ဖြစ်တာကိုသတိထားမိတတ်ပါတယ်
1 second delay: User တွေ focus ပျောက်တတ်ပါတယ်
3+ seconds: User 40% က page ကိုပျက်သွားတတ်ပါတယ်
Mobile networks: Performance ကပိုအရေးကြီးပါတယ်

Browser က သင့်ပေးတဲ့ asset တွေကို render လုပ်ပုံကို နားလည်ပြီးပြီဆိုရင်၊ extension ကိုပြီးစီးဖို့လိုအပ်တဲ့အရာတွေကိုကြည့်ရအောင်:

Color ကိုတွက်ချက်တဲ့ function တစ်ခုဖန်တီးပါ

အခုတော့ numerical data ကို အဓိပ္ပါယ်ရှိတဲ့ color တွေပြောင်းပေးတဲ့ function တစ်ခုကိုဖန်တီးပါမယ်။ Traffic light system လိုမျိုး - clean energy အတွက် green, high carbon intensity အတွက် red ဖြစ်ပါတယ်။

ဒီ function က API ကနေ CO2 data ကိုယူပြီး environmental impact ကိုဖော်ပြတဲ့အရောင်ကိုဆုံးဖြတ်ပေးပါမယ်။ Scientist တွေ ocean temperature ကနေ star formation အထိ complex data pattern တွေကို heat map တွေမှာ color-coding သုံးပြီး visualize လုပ်တဲ့နည်းနဲ့တူပါတယ်။ /src/index.js မှာ const variable တွေ setup လုပ်ပြီးတာနောက်မှာ ဒီ function ကိုထည့်ပါ:

flowchart LR
    A[CO2 Value] --> B[Find Closest Scale Point]
    B --> C[Get Scale Index]
    C --> D[Map to Color]
    D --> E[Send to Background]
    
    subgraph "Color Scale"
        F["0-150: Green (Clean)"]
        G["150-600: Yellow (Moderate)"]
        H["600-750: Orange (High)"]
        I["750+: Brown (Very High)"]
    end
    
    subgraph "Message Passing"
        J[Content Script]
        K[chrome.runtime.sendMessage]
        L[Background Script]
        M[Icon Update]
    end
    
    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style E fill:#fff3e0

function calculateColor(value) {
	// Define CO2 intensity scale (grams per kWh)
	const co2Scale = [0, 150, 600, 750, 800];
	// Corresponding colors from green (clean) to dark brown (high carbon)
	const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];

	// Find the closest scale value to our input
	const closestNum = co2Scale.sort((a, b) => {
		return Math.abs(a - value) - Math.abs(b - value);
	})[0];
	
	console.log(`${value} is closest to ${closestNum}`);
	
	// Find the index for color mapping
	const num = (element) => element > closestNum;
	const scaleIndex = co2Scale.findIndex(num);

	const closestColor = colors[scaleIndex];
	console.log(scaleIndex, closestColor);

	// Send color update message to background script
	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}

ဒီ function ရဲ့အဓိကအချက်အချာတွေ:

Sets up array နှစ်ခု - CO2 level အတွက် array တစ်ခု၊ color အတွက် array တစ်ခု (green = clean, brown = dirty!)
Finds actual CO2 value နဲ့အနီးဆုံး match ကို array sorting နဲ့ရှာပါ
Grabs matching color ကို findIndex() method နဲ့ယူပါ
Sends Chrome background script ကို message ပို့ပြီး color ကိုပေးပါ
Uses template literals (backticks) ကိုသုံးပြီး string formatting ကိုပိုသန့်ရှင်းစေပါ
Keeps const declaration တွေနဲ့ အားလုံးကိုစီမံထားပါ

chrome.runtime API က extension ရဲ့ nervous system လိုမျိုးပါ - behind-the-scenes communication နဲ့ task တွေကို handle လုပ်ပေးပါတယ်:

"chrome.runtime API ကို background page ကို retrieve လုပ်ဖို့၊ manifest ရဲ့ details တွေကို return လုပ်ဖို့၊ app သို့မဟုတ် extension lifecycle မှာဖြစ်တဲ့ event တွေကိုနားထောင်ပြီးတုံ့ပြန်ဖို့သုံးပါ။ URL တွေကို fully-qualified URL တွေပြောင်းဖို့လည်း API ကိုသုံးနိုင်ပါတယ်။"

Chrome Runtime API ရဲ့အကျိုးကျေးဇူး:

Lets extension ရဲ့ part တွေကိုအချင်းချင်းပြောနိုင်စေပါတယ်
Handles background work ကို user interface ကို freeze မဖြစ်အောင်လုပ်ပါတယ်
Manages extension ရဲ့ lifecycle event တွေကိုစီမံပါတယ်
Makes script တွေကြား message passing ကိုအလွန်လွယ်ကူစေပါတယ်

✅ Edge အတွက် browser extension တစ်ခုကို develop လုပ်နေတဲ့အခါ၊ chrome API ကိုသုံးနေရတာကို အံ့ဩနိုင်ပါတယ်။ Edge browser version အသစ်တွေက Chromium browser engine ပေါ်မှာ run ဖြစ်တဲ့အတွက် ဒီ tool တွေကိုအသုံးပြုနိုင်ပါတယ်။

architecture-beta
    group browser(logos:chrome)[Browser]
    
    service popup(logos:html5)[Popup UI] in browser
    service content(logos:javascript)[Content Script] in browser
    service background(database)[Background Script] in browser
    service api(logos:api)[External API] in browser
    
    popup:R -- L:content
    content:R -- L:background
    background:T -- B:api
    content:T -- B:api
    
    junction junctionCenter in browser
    popup:R -- L:junctionCenter
    junctionCenter:R -- L:background

Pro Tip: Browser extension ကို profile လုပ်ချင်ရင်၊ extension ထဲက dev tools ကိုဖွင့်ပါ၊ extension ကိုသီးသန့် browser instance အနေနဲ့ run ဖြစ်ပါတယ်။ Extension-specific performance metrics တွေကိုရနိုင်ပါတယ်။

Default icon color ကို set လုပ်ပါ

Real data ကို fetch လုပ်မတိုင်မီ၊ extension ရဲ့ starting point ကိုပေးပါ။ Broken-looking icon သို့မဟုတ် blank icon ကိုကြည့်ရတာကို မည်သူမျှမကြိုက်ပါဘူး။ Green color ကို default အနေနဲ့စတင်ပေးပါ၊ user တွေ extension ကို install လုပ်တဲ့အချိန်မှာ အလုပ်လုပ်နေတယ်ဆိုတာသိစေပါ။

init() function ထဲမှာ default green icon ကို setup လုပ်ပါ:

chrome.runtime.sendMessage({
	action: 'updateIcon',
	value: {
		color: 'green',
	},
});

ဒီ initialization ရဲ့အကျိုးကျေးဇူး:

Sets neutral green color ကို default state အနေနဲ့ထားပါတယ်
Provides extension load ဖြစ်တဲ့အချိန်မှာ immediate visual feedback ပေးပါတယ်
Establishes background
✅ Chrome Runtime API သည် extension architecture တွင် ဘယ်လိုအခန်းကဏ္ဍရှိသလဲ?
✅ အရောင်တွက်ချက်မှု algorithm သည် ဒေတာကို visual feedback သို့ ဘယ်လို mapping လုပ်သလဲ?

စွမ်းဆောင်ရည်အရေးယူမှုများ: သင့် extension သည် ယခုအခါအောက်ပါအချက်များကို ပြသနေပါသည်။

Message ပို့ပေးမှုထိရောက်မှု: script contexts များအကြား ဆက်သွယ်မှုကို သန့်ရှင်းစွာ ပြုလုပ်ခြင်း
Rendering အဆင့်မြှင့်တင်မှု: OffscreenCanvas သည် UI ပိတ်ဆို့မှုကို ကာကွယ်ပေးခြင်း
Real-time အပ်ဒိတ်များ: Live data အပေါ်မူတည်၍ icon များကို dynamic အနေဖြင့် ပြောင်းလဲခြင်း
Memory စီမံခန့်ခွဲမှု: အရင်းအမြစ်များကို သန့်ရှင်းစွာ ရှင်းလင်းခြင်းနှင့် စီမံခြင်း

သင့် extension ကို စမ်းသပ်ရန် အချိန်:

Build အားလုံးကို npm run build ဖြင့် ပြုလုပ်ပါ
Reload သင့် extension ကို browser တွင် ပြန်တင်ပါ (ဤအဆင့်ကို မမေ့ပါနှင့်)
Open သင့် extension ကို ဖွင့်ပြီး icon အရောင်ပြောင်းလဲမှုကို ကြည့်ပါ
Check သင့် extension သည် ကမ္ဘာတစ်ဝှမ်းမှ carbon data အပေါ် ဘယ်လို တုံ့ပြန်မှုရှိသည်ကို စစ်ဆေးပါ

ယခု သင်သည် အဝတ်လျှော်ရန် အချိန်ကောင်းမကောင်းကို တစ်ချက်ကြည့်ပြီး သိနိုင်ပါပြီ။ သင်သည် တကယ်အသုံးဝင်သော အရာတစ်ခုကို တည်ဆောက်ပြီး browser performance အကြောင်းကိုလည်း သင်ယူနိုင်ခဲ့ပါပြီ။

GitHub Copilot Agent Challenge 🚀

Agent mode ကို အသုံးပြု၍ အောက်ပါ challenge ကို ပြည့်စုံစွာ ပြုလုပ်ပါ:

ဖော်ပြချက်: Browser extension ၏ performance monitoring စွမ်းရည်များကို မြှင့်တင်ရန် extension ၏ အစိတ်အပိုင်းများ၏ load time များကို tracking ပြုလုပ်ပြီး ပြသနိုင်သော feature တစ်ခု ထည့်သွင်းပါ။

Prompt: Performance API ကို အသုံးပြု၍ CO2 data ကို API မှ fetch လုပ်ခြင်း၊ အရောင်တွက်ချက်ခြင်းနှင့် icon ကို update ပြုလုပ်ခြင်းတို့၏ အချိန်ကို တိုင်းတာပြီး browser console တွင် timestamps နှင့် duration metrics များဖြင့် ရလဒ်များကို ပြသနိုင်သော performanceTracker function တစ်ခု ဖန်တီးပါ။

Agent mode အကြောင်းကို ဒီမှာ သင်ယူပါ။

🚀 Challenge

ဤ detective mission သည် စိတ်ဝင်စားဖွယ် ဖြစ်ပါသည်။ နှစ်များစွာ ရှိနေသော open source websites (ဥပမာ Wikipedia, GitHub, Stack Overflow) များကို ရွေးချယ်ပြီး commit history ကို စူးစမ်းပါ။ သူတို့ performance အဆင့်မြှင့်တင်မှုများကို ဘယ်အချိန်တွင် ပြုလုပ်ခဲ့သည်ကို တွေ့နိုင်ပါသလဲ? ဘယ်လိုပြဿနာများသည် အမြဲတက်လာနေသလဲ?

သင့်စူးစမ်းမှုနည်းလမ်း:

Search commit messages တွင် "optimize," "performance," "faster" စသည်တို့ကို ရှာဖွေပါ
Look pattern များကို ရှာဖွေပါ - သူတို့သည် အမြဲတမ်း တူညီသောပြဿနာများကို ပြင်ဆင်နေပါသလား?
Identify websites များကို နှေးကွေးစေသော အကြောင်းရင်းများကို ရှာဖွေပါ
Share သင်တွေ့ရှိသောအရာများကို မျှဝေပါ - အခြား developer များသည် အမှန်တကယ်ဖြစ်ရပ်များမှ သင်ယူနိုင်ပါသည်

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

performance newsletter မှာ စာရင်းသွင်းရန် စဉ်းစားပါ

Browser များသည် web performance ကို ဘယ်လိုတိုင်းတာကြောင်းကို သူတို့၏ web tools တွင် performance tabs များကို ကြည့်ရှုခြင်းဖြင့် စူးစမ်းပါ။ သင်သည် အဓိကကွာခြားချက်များကို တွေ့ရှိနိုင်ပါသလား?

⚡ သင့်အနီးဆုံး ၅ မိနစ်အတွင်း ပြုလုပ်နိုင်သောအရာများ

Browser Task Manager (Chrome တွင် Shift+Esc) ကို ဖွင့်ပြီး extension resource usage ကို ကြည့်ပါ
DevTools Performance tab ကို အသုံးပြု၍ webpage performance ကို record ပြုလုပ်ပြီး analysis ပြုလုပ်ပါ
Browser ၏ Extensions page ကို စစ်ဆေးပြီး startup time ကို ထိခိုက်စေသော extensions များကို ကြည့်ပါ
Extension များကို ယာယီပိတ်ထားပြီး performance ကွာခြားချက်များကို စမ်းသပ်ပါ

🎯 သင့်အနာရီအတွင်း ပြုလုပ်နိုင်သောအရာများ

Post-lesson quiz ကို ပြီးစီးပြီး performance concepts ကို နားလည်ပါ
Browser extension အတွက် background script တစ်ခုကို တည်ဆောက်ပါ
Browser.alarms ကို အသုံးပြု၍ ထိရောက်သော background tasks များကို လေ့ကျင့်ပါ
Content scripts နှင့် background scripts အကြား message passing ကို လေ့ကျင့်ပါ
Extension ၏ resource usage ကို တိုင်းတာပြီး အဆင့်မြှင့်တင်ပါ

📅 သင့်တစ်ပတ်တာ Performance ခရီး

Background functionality ပါရှိသော high-performance browser extension တစ်ခုကို ပြီးစီးပါ
Service workers နှင့် modern extension architecture ကို ကျွမ်းကျင်ပါ
Data synchronization နှင့် caching strategies များကို ထိရောက်စွာ အကောင်အထည်ဖော်ပါ
Extension performance အတွက် debugging နည်းလမ်းများကို လေ့လာပါ
Functionality နှင့် resource efficiency နှစ်ခုစလုံးအတွက် extension ကို အဆင့်မြှင့်တင်ပါ
Extension performance scenarios များအတွက် စုံလင်သော စမ်းသပ်မှုများကို ဖန်တီးပါ

🌟 သင့်တစ်လတာ Optimization ကျွမ်းကျင်မှု

Optimal performance ပါရှိသော enterprise-grade browser extensions များကို တည်ဆောက်ပါ
Web Workers, Service Workers နှင့် modern web performance အကြောင်းကို သင်ယူပါ
Performance optimization အပေါ် အခြေခံသော open source projects များတွင် ပါဝင်ပါ
Browser internals နှင့် advanced debugging techniques များကို ကျွမ်းကျင်ပါ
Performance monitoring tools နှင့် best practices guides များကို ဖန်တီးပါ
Web applications များကို optimize ပြုလုပ်ပေးသော performance ကျွမ်းကျင်သူ ဖြစ်ပါ

🎯 Browser Extension Mastery Timeline

timeline
    title Complete Extension Development Progression
    
    section Performance Fundamentals (20 minutes)
        Browser Profiling: DevTools mastery
                         : Timeline analysis
                         : Bottleneck identification
                         : Critical rendering path
        
    section Background Tasks (25 minutes)
        Extension Architecture: Message passing
                              : Background scripts
                              : Runtime API usage
                              : Cross-context communication
        
    section Visual Feedback (30 minutes)
        Dynamic UI: Color calculation algorithms
                  : Canvas API integration
                  : Icon generation
                  : Real-time updates
        
    section Performance Optimization (35 minutes)
        Efficient Code: Async operations
                      : Memory management
                      : Resource cleanup
                      : Performance monitoring
        
    section Production Ready (45 minutes)
        Polish & Testing: Cross-browser compatibility
                        : Error handling
                        : User experience
                        : Performance validation
        
    section Advanced Features (1 week)
        Extension Ecosystem: Chrome Web Store
                           : User feedback
                           : Analytics integration
                           : Update management
        
    section Professional Development (2 weeks)
        Enterprise Extensions: Team collaboration
                             : Code reviews
                             : CI/CD pipelines
                             : Security audits
        
    section Expert Mastery (1 month)
        Platform Expertise: Advanced Chrome APIs
                          : Performance optimization
                          : Architecture patterns
                          : Open source contribution

🛠️ Extension Development Toolkit အပြည့်အစုံ

ဤ trilogy ကို ပြီးစီးပြီးနောက် သင်သည် အောက်ပါအရာများကို ကျွမ်းကျင်သွားပါပြီ။

Browser Architecture: Browser systems နှင့် extensions များ ဘယ်လိုပေါင်းစည်းရမည်ကို နက်နက်ရှိုင်းရှိုင်း နားလည်ခြင်း
Performance Profiling: Developer tools ကို အသုံးပြု၍ bottlenecks များကို ရှာဖွေပြီး ပြင်ဆင်နိုင်ခြင်း
Async Programming: Responsive, non-blocking operations အတွက် modern JavaScript patterns များ
API Integration: Authentication နှင့် error handling ပါရှိသော external data fetching
Visual Design: Dynamic UI updates နှင့် Canvas-based graphics generation
Message Passing: Extension architectures တွင် inter-script communication
User Experience: Loading states, error handling, နှင့် intuitive interactions
Production Skills: Testing, debugging, နှင့် real-world deployment အတွက် optimization

အမှန်တကယ်အသုံးဝင်သော Applications: Extension development skills များသည် အောက်ပါအရာများတွင် တိုက်ရိုက်အသုံးဝင်ပါသည်။

Progressive Web Apps: Architecture နှင့် performance patterns တူညီမှုများ
Electron Desktop Apps: Web technologies အသုံးပြုသော cross-platform applications
Mobile Hybrid Apps: Cordova/PhoneGap development
Enterprise Web Applications: Dashboard နှင့် productivity tools များ
Chrome DevTools Extensions: Developer tooling နှင့် debugging
Web API Integration: External services နှင့် ဆက်သွယ်သော application များ

Professional Impact: သင်သည် ယခုအခါ:

Build Concept မှ deployment အထိ production-ready browser extensions များကို တည်ဆောက်နိုင်ပါသည်
Optimize Industry-standard profiling tools များကို အသုံးပြု၍ web application performance ကို မြှင့်တင်နိုင်ပါသည်
Architect Scalable systems များကို proper separation of concerns ဖြင့် တည်ဆောက်နိုင်ပါသည်
Debug Async operations နှင့် cross-context communication များကို ပြင်ဆင်နိုင်ပါသည်
Contribute Open source extension projects နှင့် browser standards များတွင် ပါဝင်နိုင်ပါသည်

Next Level Opportunities:

Chrome Web Store Developer: သန်းပေါင်းများစွာသော user များအတွက် extensions များကို ထုတ်ဝေပါ
Web Performance Engineer: Optimization နှင့် user experience အပေါ် အထူးကျွမ်းကျင်သူ
Browser Platform Developer: Browser engine development တွင် ပါဝင်ပါ
Extension Framework Creator: အခြား developer များကို ကူညီပေးသော tools များကို ဖန်တီးပါ
Developer Relations: သင်ကြားခြင်းနှင့် content creation မှတစ်ဆင့် အသိပညာမျှဝေပါ

🌟 Achievement Unlocked: သင်သည် professional development practices နှင့် modern web standards ကို ပြသသော complete, functional browser extension တစ်ခုကို တည်ဆောက်ပြီးဖြစ်ပါပြီ!

Assignment

Analyze a site for performance

အကြောင်းကြားချက်:
ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု Co-op Translator ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။