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

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

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

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

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

วิธีสร้างส่วนขยายของ 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>

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

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

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

“manifest_version”: 2,
“name”: “Favorite Sites”,
“description”: “ทุกเว็บไซต์โปรดของฉัน”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

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

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “เว็บไซต์โปรด”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

พื้นที่ที่กินได้ของรหัสนี้ประกอบด้วยnameคำอธิบาย(description)และdefault_title

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

#myUL {
รายการสไตล์ประเภท: ไม่มี; (list-style-type: none;)
   ช่องว่างภายใน: 0; (   padding: 0;)
   ระยะขอบ: 0; (   margin: 0;)
   ความกว้าง: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  ขอบบน: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  ช่องว่างภายใน: 12px; (  padding: 12px;)
  ตกแต่งข้อความ: ไม่มี; (  text-decoration: none;)
  ขนาดตัวอักษร: 18px; (  font-size: 18px;)
  สีดำ; (  color: black;)
  แสดง: บล็อก; (  display: block;)
  ตระกูลแบบอักษร: 'Noto Sans', sans-serif; (  font-family: ‘Noto Sans’, sans-serif;)
}

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

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

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

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

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

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

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

  • ใช้ ปุ่ม Load unpackedที่ด้านบนของหน้านั้นเพื่อเลือกโฟลเดอร์ที่คุณทำระหว่างขั้นตอนที่ 1(Step 1)ด้านบน

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

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

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

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

หากต้องการเปลี่ยนลำดับการแสดงรายชื่อเว็บไซต์ หรือเพิ่มหรือเพิ่มเว็บไซต์หรือลบเว็บไซต์ที่มีอยู่ ให้แก้ไขไฟล์ popup.html อย่าลืมเก็บการแก้ไขเฉพาะURLและชื่อ อักขระอื่นๆ ทั้งหมด เช่น<li>และ<html>จำเป็นและไม่ควรเปลี่ยนแปลง บทช่วย สอน HTML บน W3Schools(HTML Tutorial on W3Schools)เป็นที่ที่ดีในการเรียนรู้เพิ่มเติมเกี่ยวกับภาษานั้น



ณิชา รัตนเดชากร

About the author

ฉันเป็นนักพัฒนาเว็บที่มีประสบการณ์มากกว่า 10 ปีในการทำงานกับเบราว์เซอร์ Firefox และ Google Docs ฉันเป็นผู้เชี่ยวชาญในการสร้างแอปพลิเคชันออนไลน์ที่เรียบง่ายแต่ทรงพลัง และได้พัฒนาโซลูชันบนเว็บสำหรับทั้งธุรกิจขนาดเล็กและองค์กรขนาดใหญ่ ฐานลูกค้าของฉันประกอบด้วยชื่อที่ใหญ่ที่สุดในธุรกิจ เช่น FedEx, Coca Cola และ Macy's ทักษะของฉันในฐานะนักพัฒนาทำให้ฉันเป็นผู้สมัครในอุดมคติสำหรับโครงการใดๆ ที่จำเป็นต้องทำให้เสร็จอย่างรวดเร็วและมีประสิทธิภาพ - ตั้งแต่การพัฒนาเว็บไซต์ที่กำหนดเองไปจนถึงการสร้างแคมเปญการตลาดทางอีเมลที่มีประสิทธิภาพ


Related posts