วิธีการสร้างส่วนขยาย Chrome อย่างง่าย
การสร้างส่วนขยาย Chrome เป็นกระบวนการที่ค่อนข้างตรงไปตรงมา เมื่อเสร็จแล้วคุณจะสามารถใช้งานบนคอมพิวเตอร์ของคุณเพื่อปรับปรุงการทำงานของเบราว์เซอร์
มีองค์ประกอบพื้นฐานบางอย่างที่เบราว์เซอร์ต้องการก่อนที่ส่วนขยายจะสามารถทำงานได้อย่างสมบูรณ์ เราจะดำเนินการทั้งหมดข้างล่างนี้รวมถึงวิธีการใช้งานส่วนขยายที่กำหนดเองของคุณให้ทำงานใน Chrome โดยไม่จำเป็นต้องอัปโหลดหรือแชร์กับบุคคลอื่น
การสร้างส่วนขยาย Chrome ที่ซับซ้อนเป็นกระบวนการที่มีรายละเอียดมากกว่าสิ่งที่คุณเห็นด้านล่าง แต่ กระบวนการทั่วไปเหมือนกัน อ่านต่อเพื่อเรียนรู้วิธีสร้างส่วนขยายของ Chrome ที่คุณสามารถเริ่มใช้งานได้ในวันนี้
เคล็ดลับ: เพื่อดูว่าส่วนขยายของคุณยอดเยี่ยมแค่ไหนโปรดดู ส่วนขยาย Chrome ที่น่าทึ่งเหล่านี้.
วิธีสร้างส่วนขยาย Chrome
การใช้คู่มือนี้คุณจะสร้างส่วนขยาย Chrome อย่างง่ายที่แสดงรายการเว็บไซต์โปรดบางรายการของคุณ มันปรับแต่งได้อย่างเต็มที่และง่ายต่อการอัปเดตจริงๆ
<รูป class = "lazy aligncenter">
นี่คือสิ่งที่ต้องทำ:
สร้างโฟลเดอร์ที่จะเก็บไฟล์ทั้งหมดที่เป็นส่วนเสริม
สร้างไฟล์ฐานที่ส่วนขยายนี้ต้องการ: 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>
<รูป class = "lazy aligncenter">
โปรดแก้ไขลิงก์ และลิงก์ข้อความหรือหากคุณต้องการทำให้ส่วนขยายของ Chrome เป็นไปอย่างที่เราเป็นอยู่เพียงทำทุกอย่างให้เหมือนเดิม
In_content_1 all: [300x250] / dfp: [640x360]->
เปิด manifest.jsonในตัวแก้ไขข้อความและคัดลอก / วางต่อไปนี้:
{
“ update_url”:“ https://clients2.google.com/service/update2/crx”,
“ manifest_version”: 2,
“ ชื่อ”:“ เว็บไซต์โปรด”,
“ คำอธิบาย”:“ เว็บไซต์โปรดทั้งหมดของฉัน”,
“ version”:“ 1.0”,
“ ไอคอน”: {
“ 16”:“ icon.png”,
“ 32”:“ icon.png”,
“ 48”:“ icon.png”,
“ 128”:“ ไอคอน png”
},
“ พื้นหลัง”: {
“ หน้า”:” พื้นหลัง html”
},
“ browser_action”: {
“ default_icon”: icon.png”,
“ default_title”:“ เว็บไซต์โปรด”,
“ default_popup”:“ popup.html”
}ฟรี }
พื้นที่ที่กินได้ของรหัสนี้ ได้แก่ name, descriptionและ default_title
เปิด styles.cssและวาง รหัสต่อไปนี้ นี่คือสิ่งที่ตกแต่งเมนูป๊อปอัพเพื่อให้ดูน่าสนใจและใช้งานง่ายยิ่งขึ้น
#myUL {
รายการ -style-type: none;
padding: 0;
margin: 0;
ความกว้าง: 300px;
}
#myUL เป็น {
เส้นขอบ: 1px solid #ddd;
ระยะขอบ: -1px;
พื้นหลังสี: # f6f6f6;
ช่องว่างภายใน: 12px;
การตกแต่งข้อความ: ไม่มี;
ขนาดตัวอักษร: 18px;
สี: ดำ;
แสดง : block;
font-family: 'Noto Sans', sans-serif;
}
<แข็งแกร่ง >#myUL li: hover: not (.header) {
สีพื้นหลัง: #eee;
}
<รูป class = "lazy aligncenter">
มีหลายอย่างที่คุณสามารถเปลี่ยนได้ในไฟล์ CSS ลองใช้ตัวเลือกเหล่านี้หลังจากสร้างส่วนขยาย Chrome ของคุณเพื่อปรับแต่งตามความต้องการของคุณ
สร้างไอคอนสำหรับส่วนขยายแล้วตั้งชื่อว่า icon.pngวางไว้ในโฟลเดอร์ส่วนขยาย Chrome ของคุณ ดังที่คุณเห็นในรหัสด้านบนคุณสามารถสร้างไอคอนแยกต่างหากสำหรับขนาดเหล่านี้: 16 × 16 พิกเซล, 32 × 32 และอื่น ๆ
เคล็ดลับ:Google มีข้อมูลเพิ่มเติม ในการสร้างส่วนขยายของ Chrome มีตัวอย่างและตัวเลือกขั้นสูงอื่น ๆ นอกเหนือจากขั้นตอนง่าย ๆ ที่เราแสดงไว้ที่นี่
วิธีเพิ่มส่วนขยายที่กำหนดเองไปยัง Chrome
ตอนนี้คุณได้สร้างส่วนขยายของ Chrome แล้ว ถึงเวลาที่จะเพิ่มลงในเบราว์เซอร์เพื่อให้คุณสามารถใช้ไฟล์ทั้งหมดที่คุณเพิ่งสร้างขึ้นได้ การติดตั้งส่วนขยายที่กำหนดเองเกี่ยวข้องกับกระบวนการที่แตกต่างจาก วิธีติดตั้งส่วนขยาย Chrome ปกติ.
จากเมนู Chrome ไปที่ เครื่องมือเพิ่มเติมส่วนขยายหรือพิมพ์ chrome: // extensions /ในแถบที่อยู่
เลือกปุ่มถัดจาก โหมดนักพัฒนาซอฟต์แวร์หากยังไม่ได้เลือก สิ่งนี้จะเปิดโหมดพิเศษที่ให้คุณนำเข้าส่วนขยาย Chrome ของคุณเอง<รูป class = "lazy aligncenter">
<รูป class = "lazy aligncenter">
การแก้ไขส่วนขยาย Chrome ของคุณ
เมื่อส่วนขยาย Chrome ของคุณสามารถใช้งานได้คุณสามารถทำการเปลี่ยนแปลงเพื่อให้เป็นของคุณเอง
ไฟล์ styles.css ควบคุมลักษณะที่ปรากฏของส่วนขยายดังนั้นคุณสามารถปรับรูปแบบรายการโดยรวมและเปลี่ยนสีหรือชนิดของแบบอักษร W3Schools เป็นหนึ่งในแหล่งข้อมูลที่ดีที่สุดในการเรียนรู้เกี่ยวกับสิ่งต่าง ๆ ทั้งหมดที่คุณสามารถทำได้ด้วย CSS
หากต้องการสลับลำดับเว็บไซต์ที่มีอยู่ในรายการหรือเพิ่มหรือมากกว่า เว็บไซต์หรือลบที่มีอยู่แก้ไขไฟล์ popup.html ตรวจสอบให้แน่ใจว่าได้ทำการแก้ไขให้เป็น URL และชื่อเท่านั้น ต้องใช้อักขระอื่นทั้งหมดเช่น
และ และไม่ควรเปลี่ยนแปลง สอน HTML บน W3Schools เป็นสถานที่ที่ดีในการเรียนรู้เพิ่มเติมเกี่ยวกับภาษานั้น
ส่วนขยาย Chrome วิธีการเพิ่มส่วนขยาย Chrome วิธีการเพิ่ม Chrome Extensions ทำอย่างไร
กระทู้ที่เกี่ยวข้อง:
