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

“ในชีวิตปัจจุบันของเรา เรากระตือรือร้นที่จะใช้แอปโซเชียลมีเดียและเครื่องมือค้นหาของ Google เพื่อความบันเทิงและการค้นหาของเรามากขึ้น เช่น ค้นคว้าหัวข้อการศึกษาบางหัวข้อผ่านเครื่องมือค้นหา “Google” และรับความรู้ทั่วไปเช่นกัน ในการใช้เสิร์ชเอ็นจิ้นของ Google เพื่อค้นหาบางสิ่ง เราต้องมีเบราว์เซอร์บางตัวติดตั้งอยู่บนโทรศัพท์มือถือ แล็ปท็อป หรือคอมพิวเตอร์ส่วนบุคคลของเรา หนึ่งในเบราว์เซอร์ที่มีการใช้งานและมีประสิทธิภาพมากที่สุดแห่งศตวรรษปัจจุบันคือเบราว์เซอร์ “Google Chrome” ซึ่งมีฟังก์ชันการทำงานที่ดีมากมายพร้อมกับประโยชน์ของส่วนขยาย “ส่วนขยาย” เป็นปลั๊กอินที่พบในเบราว์เซอร์ใดๆ เพื่อจำกัดหรืออนุญาตเว็บไซต์และฟังก์ชันต่างๆ ส่วนขยายเหล่านี้มักจะไม่ได้สร้างขึ้นมา คุณต้องเพิ่มส่วนขยายแต่ละรายการในเบราว์เซอร์ของคุณแยกกันเมื่อจำเป็น หากคุณเป็นผู้เชี่ยวชาญเพียงเล็กน้อยในด้านเทคโนโลยี คุณอาจรู้จักการใช้ไฟล์ Manifest JSON เพื่อสร้างและเพิ่มส่วนขยายในไม่กี่ขั้นตอน ดังนั้น บทความนี้จะครอบคลุมขั้นตอนทั้งหมดในการสร้างส่วนขยายใหม่บนเบราว์เซอร์ Google Chrome

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

เพิ่มโฟลเดอร์ส่วนขยาย

เปิดเครื่องมือ Visual Studio Code ของคุณอย่างรวดเร็วจากแอปของระบบ Windows ของคุณ อาจใช้เวลาถึง 1 นาทีในการเปิด Visual Studio Code อย่างถูกต้องและเปิดใช้งานสำหรับการใช้งานของเรา หลังจากที่เปิดตัวอย่างถูกต้องและพร้อมสำหรับการใช้งานแล้ว เราได้เพิ่มโฟลเดอร์ 'ส่วนขยาย' ที่สร้างไว้แล้วในรายการเมนู 'ไฟล์' ที่แถบงานด้านบนที่แสดงด้านล่าง หลังจากสร้างโฟลเดอร์ 'ส่วนขยาย' เราได้เพิ่มโฟลเดอร์อื่นชื่อ 'รูปภาพ' ในนั้นซึ่งมีรูปภาพที่จะใช้เป็นไอคอนสำหรับส่วนขยายบนเบราว์เซอร์ นอกจากนั้น เราได้เพิ่มไฟล์ “manifest.json” หนึ่งไฟล์และไฟล์จาวาสคริปต์หนึ่งไฟล์ชื่อ “script.js” เพื่อสร้างส่วนขยายใหม่และเพิ่มลงในเบราว์เซอร์ เริ่มจากไฟล์ manifest.json โดยดับเบิลคลิกเพื่อเริ่มทำงานใน JSON เพื่อสร้างและใช้ส่วนขยายเพื่อเปลี่ยนพื้นหลังของ “Google”

สร้างไฟล์มานิเฟสต์

ภายในไฟล์ manifest.json คุณควรเพิ่มโค้ด 'JSON' ที่แสดงด้านล่าง รหัสนี้เป็นสคริปต์การกำหนดค่าจริงเพื่อสร้างและเพิ่มส่วนขยายในเบราว์เซอร์ Google Chrome ของเรา รหัส JSON นี้เริ่มต้นด้วยการเริ่มต้นสำหรับเวอร์ชันรายการตัวแปรเป็น “2” และชื่อของส่วนขยายที่จะสร้าง เช่น “เปลี่ยนพื้นหลัง” หลังจากนี้ เราได้เพิ่มคำอธิบายสั้นๆ สำหรับส่วนขยายของเราภายในตัวแปร 'คำอธิบาย'

นอกจากนั้น เราได้เพิ่มเวอร์ชันของส่วนขยายเป็น “1.0” หลังจากสร้างการกำหนดค่าพื้นฐานทั้งหมดสำหรับ 'ส่วนขยาย' แล้ว เราจำเป็นต้องเพิ่มพาธไปยังไอคอนรูปภาพเพื่อใช้เป็นไอคอนสำหรับส่วนขยาย ตัวแปร “เบราว์เซอร์” ถูกกำหนดให้ตั้งค่าไอคอนส่วนขยายสำหรับทาสก์บาร์ด้านบนของเบราว์เซอร์ Google Chrome กล่าวคือ ซึ่งส่วนขยายทั้งหมดจะแสดงขึ้นหลังจากเปิดใช้งานสำหรับใช้ในอนาคตสำหรับบางไซต์หรือบางไซต์ หลังจากนี้ เราได้เพิ่มพาธไปยังไฟล์รูปภาพสามไฟล์ที่มีขนาดต่างกัน เพื่อให้เบราว์เซอร์สามารถใช้ไฟล์ที่แตกต่างกันในแต่ละครั้ง

นอกจากนั้น ตัวแปร “page_action” ยังถูกใช้เพื่อแสดงรูปภาพที่จะแสดงหลังจากคลิกที่ไอคอน “ส่วนขยาย” จากทาสก์บาร์ด้านบนของ Google Chrome มีการใช้ตัวแปร “Default_icon” ร่วมกับค่าพาธที่แตกต่างกันสามค่าสำหรับรูปภาพที่จะใช้เป็นไอคอนในการโหลดซ้ำแต่ละครั้ง มีการใช้ไฟล์รูปภาพที่แตกต่างกันสามไฟล์เพื่อจุดประสงค์นี้ ตัวแปร content_scripts ตัวสุดท้ายรับตัวแปรใหม่ทั้งหมด 2 ตัว ได้แก่ ค่าที่ตรงกันและ CSS ตัวแปร 'matches' มีเส้นทางไปยังเว็บไซต์ที่จะแก้ไขหลังจากสร้างการใช้ส่วนขยายใหม่นี้ นอกจากนั้น ตัวแปร “CSS” ยังมีชื่อไฟล์ CSS ที่จะใช้สำหรับการจัดสไตล์ของ Google.com หลังจากสมัครส่วนขยาย เช่น การจัดสไตล์ Google.com หลังจากโหลดซ้ำในการเปิดใช้งานส่วนขยายแต่ละครั้ง ตอนนี้โค้ดนี้สมบูรณ์และพร้อมใช้งานแล้ว เพียงบันทึกอย่างรวดเร็วและย้ายไปที่ไฟล์ 'main.css'

ภายในไฟล์ CSS ของ main.css เราได้เพิ่มสไตล์สำหรับส่วนขยายไฟล์ manifest ของเราที่จะสร้าง การจัดสไตล์จะใช้โดยใช้แท็ก 'body' ของ html เช่น ใช้กับพื้นที่ 'body' แบบเต็มของไฟล์ Manifest เราได้ตั้งค่าพื้นหลังใหม่สำหรับ Google.com โดยใช้ “URL” ของไฟล์รูปภาพจากเครื่องมือค้นหา ตอนนี้ บันทึกรหัสของคุณก่อนสิ่งอื่นใด

หลังจากกรอกรหัสที่จำเป็น เช่น ไฟล์ manifest.json และ main.css เราต้องเปิดยูทิลิตี้ส่วนขยายบนเบราว์เซอร์ Google Chrome ผ่าน URL chrome://extensions” ในแท็บใหม่ พื้นที่ยูทิลิตี้ส่วนขยายเปิดขึ้น จากโหมดนักพัฒนาซอฟต์แวร์ คุณต้องโหลดโฟลเดอร์ 'ส่วนขยาย' ที่คลายการแพ็กจากระบบในพื้นที่ของคุณเพื่อทำให้เป็นส่วนขยายโดยใช้ปุ่ม 'load unpackaged' ที่แสดงในภาพด้านล่าง ส่วนขยายนี้ได้รับการเพิ่มลงในเบราว์เซอร์ Chrome อย่างมีประสิทธิภาพดังที่แสดงไว้ ลบข้อผิดพลาดเพื่อให้ทำงานได้อย่างสมบูรณ์

จากไอคอน 'ส่วนขยาย' ให้เลือกส่วนขยาย 'เปลี่ยนพื้นหลัง' เพื่อแสดงบนแถบงาน เช่น ส่วนขยายไอคอน 'C'

หลังจากโหลด Google.com ซ้ำ พื้นหลังของเว็บไซต์ได้รับการอัปเดตโดยใช้ส่วนขยายนี้

บทสรุป

เริ่มต้นจากการอธิบายการใช้เบราว์เซอร์ในระบบ Windows เราได้พูดถึงความสำคัญของส่วนขยายในเบราว์เซอร์ต่างๆ ด้วย หลังจากคำอธิบายสั้นๆ เกี่ยวกับส่วนขยาย เราได้อธิบายวิธีการใช้ไฟล์ Manifest JSON เพื่อสร้างส่วนขยายสำหรับเบราว์เซอร์ Google Chrome และวิธีใช้เพื่อเปลี่ยนพื้นหลังสำหรับเครื่องมือค้นหา 'Google.com' หลังจากโหลดส่วนขยายบน Google chrome เราได้ใช้งานบน Google.com เพื่อเปลี่ยนพื้นหลัง