วิธีสร้างส่วนขยาย Chrome อย่างง่าย

การสร้างส่วนขยายของ Chrome เป็นกระบวนการที่ค่อนข้างตรงไปตรงมา เมื่อเสร็จแล้ว คุณจะใช้บนคอมพิวเตอร์เพื่อปรับปรุงวิธีการทำงานของเบราว์เซอร์ได้

มีองค์ประกอบพื้นฐานบางอย่างที่เบราว์เซอร์ต้องการก่อนที่ส่วนขยายจะสามารถทำงานได้อย่างสมบูรณ์ เราจะอธิบายทั้งหมดด้านล่างนี้ รวมถึงวิธีทำให้ส่วนขยายที่กำหนดเองของคุณทำงานใน Chrome ได้โดยไม่ต้องอัปโหลดหรือแชร์กับผู้อื่น

การสร้างส่วนขยาย Chrome ที่ซับซ้อนเป็นกระบวนการที่มีรายละเอียดมากกว่าที่คุณเห็นด้านล่าง แต่กระบวนการทั่วไปก็เหมือนกัน อ่านต่อเพื่อเรียนรู้วิธีสร้างส่วนขยาย Chrome ที่คุณเริ่มใช้งานได้ตั้งแต่วันนี้

เคล็ดลับ :หากต้องการดูว่าส่วนขยายของคุณยอดเยี่ยมเพียงใด ให้ลองดูส่วนขยาย Chrome ที่น่าทึ่งเหล่านี้

วิธีการสร้างส่วนขยายของ Chrome

เมื่อใช้คู่มือนี้ คุณจะสร้างส่วนขยาย Chrome แบบง่ายๆ ที่แสดงเว็บไซต์โปรดบางส่วนของคุณ ปรับแต่งได้อย่างเต็มที่และอัปเดตได้ง่ายมาก

สิ่งที่ต้องทำ:

สร้างโฟลเดอร์ที่จะเก็บไฟล์ทั้งหมดที่ประกอบเป็นนามสกุล
สร้างไฟล์พื้นฐานที่ส่วนขยายนี้ต้องการ:manifest.json , popup.html , background.html , styles.css .
เปิด popup.html ในเท็กซ์เอดิเตอร์ แล้ววางสิ่งต่อไปนี้ทั้งหมดลงในนั้น อย่าลืมบันทึกเมื่อคุณทำเสร็จแล้ว

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

แก้ไขลิงก์และข้อความลิงก์ได้ตามสบาย หรือหากคุณต้องการให้ส่วนขยาย Chrome เป็นอย่างที่เราเป็น ก็แค่ทำให้ทุกอย่างเหมือนเดิม

เปิด manifest.json ในเท็กซ์เอดิเตอร์และคัดลอก/วางสิ่งต่อไปนี้:

{
“update_url”:“https://clients2.google.com/service/update2/crx”,

“manifest_version”:2,
“ชื่อ”:“เว็บไซต์โปรด”,
“description”:“เว็บไซต์โปรดทั้งหมดของฉัน”,
“รุ่น”:“1.0”,
“ไอคอน”:{
“16”:“icon.png”,
“32”:“icon.png”,
“48”:“icon.png”,
“128”:“icon.png”
},

“พื้นหลัง”:{
“หน้า”:”background.html”
},

    “browser_action” :{
        “default_icon” :“icon.png”,
        “default_title” :“ไซต์โปรด”
        “default_popup”:“popup.html”
    }
}

พื้นที่กินของรหัสนี้รวมถึง ชื่อ , คำอธิบาย และ default_title .

เปิด styles.css และวางรหัสต่อไปนี้ นี่คือสิ่งที่ตกแต่งเมนูป๊อปอัปให้ดูน่าสนใจยิ่งขึ้นและใช้งานง่ายขึ้น

#myUL {
list-style-type:none;
   ช่องว่างภายใน:0;
   ระยะขอบ:0;
   width:300px;
}

#myUL li a {
  เส้นขอบ:1px ทึบ #ddd;
  ขอบบน:-1px;
  สีพื้นหลัง:#f6f6f6;
  ช่องว่างภายใน:12px;
  การตกแต่งข้อความ:ไม่มี;
  ขนาดตัวอักษร:18px;
  สี:สีดำ;
  แสดง:บล็อก;
  แบบอักษรตระกูล:'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
background-color:#eee;
}

มีหลายสิ่งที่คุณเปลี่ยนแปลงได้ในไฟล์ CSS ลองใช้ตัวเลือกเหล่านี้หลังจากสร้างส่วนขยาย Chrome เพื่อปรับแต่งตามที่คุณต้องการ

สร้างไอคอนสำหรับส่วนขยายและตั้งชื่อเป็น icon.png . วางไว้ในโฟลเดอร์ส่วนขยายของ Chrome ดังที่คุณเห็นในโค้ดด้านบน คุณสามารถสร้างไอคอนแยกต่างหากสำหรับขนาดเหล่านั้น:16×16 พิกเซล, 32×32 และอื่นๆ

เคล็ดลับ: Google มีข้อมูลเพิ่มเติมเกี่ยวกับการสร้างส่วนขยายของ Chrome มีตัวอย่างอื่นๆ และตัวเลือกขั้นสูงที่นอกเหนือไปจากขั้นตอนง่ายๆ ที่เราได้แสดงไว้ที่นี่

วิธีเพิ่มส่วนขยายที่กำหนดเองใน Chrome

เมื่อคุณได้สร้างส่วนขยายของ Chrome แล้ว ก็ถึงเวลาเพิ่มลงในเบราว์เซอร์เพื่อให้คุณสามารถใช้ไฟล์ทั้งหมดที่คุณเพิ่งสร้างขึ้นได้อย่างแท้จริง การติดตั้งส่วนขยายที่กำหนดเองมีขั้นตอนที่แตกต่างจากวิธีติดตั้งส่วนขยาย Chrome ปกติ

จากเมนู Chrome ไปที่ เครื่องมือเพิ่มเติม > ส่วนขยาย . หรือพิมพ์ chrome://extensions/ ในแถบที่อยู่
เลือกปุ่มข้าง โหมดนักพัฒนาซอฟต์แวร์ ถ้ายังไม่ได้เลือก การดำเนินการนี้จะเปิดโหมดพิเศษที่ให้คุณนำเข้าส่วนขยาย Chrome ของคุณเองได้

ใช้ โหลดที่แกะกล่อง ที่ด้านบนของหน้านั้นเพื่อเลือกโฟลเดอร์ที่คุณทำระหว่างขั้นตอนที่ 1 ด้านบน

ยอมรับข้อความแจ้งใดๆ หากคุณเห็น ไม่เช่นนั้น ส่วนขยาย Chrome ที่สร้างขึ้นเองของคุณจะแสดงพร้อมกับส่วนขยายอื่นๆ ที่คุณมีที่มุมบนขวาของเบราว์เซอร์

การแก้ไขส่วนขยาย Chrome ของคุณ

ตอนนี้ส่วนขยาย Chrome ของคุณใช้งานได้แล้ว คุณสามารถทำการเปลี่ยนแปลงเพื่อสร้างส่วนขยายของคุณเองได้

ไฟล์ styles.css ควบคุมลักษณะที่ปรากฏของส่วนขยาย คุณจึงสามารถปรับสไตล์รายการโดยรวมและเปลี่ยนสีหรือประเภทฟอนต์ได้ W3Schools เป็นหนึ่งในแหล่งข้อมูลที่ดีที่สุดในการเรียนรู้สิ่งต่าง ๆ ทั้งหมดที่คุณสามารถทำได้ด้วย CSS

หากต้องการเปลี่ยนลำดับการแสดงรายชื่อเว็บไซต์ หรือเพิ่มหรือเพิ่มเว็บไซต์หรือลบเว็บไซต์ที่มีอยู่ ให้แก้ไขไฟล์ popup.html อย่าลืมเก็บการแก้ไขเฉพาะ URL และชื่อ ตัวละครอื่นๆ ทั้งหมด เช่น

และ จำเป็นและไม่ควรเปลี่ยนแปลง บทช่วยสอน HTML บน W3Schools เป็นที่ที่ดีในการเรียนรู้เพิ่มเติมเกี่ยวกับภาษานั้น