ခရုဘွိုင်း​လေး extension ​လေ့လာရ​အောင်

By Isaac Talb - 3 months ago

ခရုဘွိုင်း​လေး Chrome Extension

Hello World Extension အ​ခြေခံ​လေ့လာခြင်း

Reference ယူလို့ရနိုင်တဲ့ Repo

cuteboylay-extension-alt-hello-ext Repo ကို GitHub တွင် သွားရောက်ကြည့်ရှုနိုင်ပါတယ်။

ကြိုက်နှစ်သက်တယ်ဆိုရင် Repo ကို Star လုပ်ပြီး support လုပ်လို့ရနိုင်ပါတယ်။

Chrome Extension တည်ဆောက်ခြင်း အဆင့်ဆင့်

  1. ဖိုင်များဖန်တီးခြင်း:

    manifest.json ဖိုင်ကို ဖန်တီးပြီး အောက်ပါကုဒ်များထည့်ပါ။

    // manifest.json
{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html", // Popup file
    "default_icon": "hello_extensions.png" // Toolbar icon
  }
}
  2. HTML ဖိုင် ဖန်တီးခြင်း:

    hello.html ဖိုင်တွင် အောက်ပါကုဒ်ထည့်ပါ။

    <!-- hello.html -->
<html>
  <body>
    <h1>Hello Extensions</h1> // Main content
  </body>
</html>
  3. Extension ကို Chrome တွင် တင်ခြင်း:

    1. Chrome Browser တွင် chrome://extensions ကိုဖွင့်ပါ။
    2. Developer Mode ကိုဖွင့်ပါ။
    3. Load Unpacked ကိုနှိပ်ပြီး extension ဖိုင်များပါဝင်သော folder ကိုရွေးချယ်ပါ။

  4. Extension ကို Reload လုပ်ခြင်း:

    manifest.json ဖိုင်တွင် အမည်ကို "Hello Extensions of the World!" ဟု ပြောင်းလဲပြီး Save လုပ်ပါ။ ပြီးလျှင် Extensions စာမျက်နှာတွင် refresh ခလုတ်ကိုနှိပ်ပါ။

  5. Console Logs စစ်ဆေးခြင်း:

    hello.html ဖိုင်တွင် အောက်ပါ script tag ထည့်ပါ။

    <!-- hello.html -->
<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script> // Link to popup.js
  </body>
</html>

    ပြီးလျှင် popup.js ဖိုင်တွင် အောက်ပါကုဒ်ထည့်ပါ။

    // popup.js
console.log("This is a popup!"); // Logs a message to the console

ဒါဆိုရင် ခရုဘွိုင်း​လေး extension ရပါပြီ။

Chrome Extension တည်ဆောက်ခြင်းအတွက် အခြေခံအဆင့်များကို လေ့လာပြီးပါပြီ။

  • Image

Swipe left to right to view images.


← Back to Blog Lists



Contact Us