วิธีสร้างส่วนขยาย Chrome ของคุณเอง

เผยแพร่แล้ว: 2022-06-03

จะเกิดอะไรขึ้นถ้าคุณได้รับประโยชน์สูงสุดจากการท่องเว็บ เรียนรู้วิธีสร้างส่วนขยาย Google Chrome ของคุณเอง

คุณเคยไม่พอใจกับฟังก์ชันที่เว็บเบราว์เซอร์ของคุณมีให้หรือไม่? แม้ว่าคุณจะใช้เวลาหลายชั่วโมงในการสำรวจ Google Online Store แต่ก็ไม่ได้ง่ายเหมือนการกด "ดาวน์โหลด" เสมอไป เพื่อปรับปรุงประสบการณ์การท่องเว็บของคุณ

นี่คือที่มาของส่วนเสริมของเบราว์เซอร์ ในบทช่วยสอนนี้ เราจะมาดูวิธีสร้างส่วนขยาย DIY Google Chrome ของคุณเองตั้งแต่ต้นจนจบ

ส่วนขยายของ Google Chrome คืออะไร?

หน้าแรกของส่วนขยาย Google Chrome

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

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

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

ส่วนขยาย Google Chrome ของเราจะมีฟังก์ชันอะไรบ้าง?

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

คุณจะค้นพบวิธีการ

  • พัฒนาส่วนขยายของ Google Chrome
  • ใช้ส่วนขยายของ Chrome แทรกโค้ดที่กำหนดเองลงในหน้าเว็บ
  • จำลองการคลิกโดยการสร้างตัวฟังเหตุการณ์
  • สร้างตัวเลขสุ่ม
  • ใช้อาร์เรย์และตัวแปร

ทำส่วนขยาย DIY Chrome ของคุณเอง

Google ได้ทำให้การพัฒนาส่วนขยาย Chrome ของคุณเองเป็นเรื่องง่ายจนน่าตกใจ คุณจึงพร้อมใช้งานได้ทันที คำแนะนำด้านล่างจะใช้เวลาเพียง 10 ถึง 15 นาทีในการดำเนินการ แต่เราขอเชิญคุณให้ทดลองกับโค้ดของคุณเองเช่นกัน

ขั้นตอนที่ 1: สร้างไฟล์

สร้างไฟล์

เมื่อคุณไม่ต้องการแบ่งปันส่วนขยายของคุณ คุณสามารถเก็บไว้ในระบบท้องถิ่นของคุณ ในการสร้างส่วนขยาย เราต้องการไฟล์สี่ไฟล์: หน้า HTML, ไฟล์ CSS, ไฟล์ JavaScript และไฟล์ JSON

Index.html, style.css, script.js และ manifest.json เป็นชื่อที่เราตั้งให้กับไฟล์ของเรา ไฟล์ Manifest ต้องมีชื่อนี้เพื่อให้ทำงานได้อย่างถูกต้อง แต่ไฟล์อื่นๆ สามารถมีชื่ออะไรก็ได้ที่คุณเลือก ตราบใดที่คุณแก้ไขโค้ดของคุณตามนั้น

ไฟล์เหล่านี้ควรอยู่ในโฟลเดอร์รูทเดียวกัน

ขั้นตอนที่ 2: สร้างไฟล์มานิเฟสต์

ส่วนขยายของ Google Chrome ทุกรายการมีไฟล์รายการ มันแจ้ง Chrome เกี่ยวกับส่วนขยายในขณะที่ยังใช้การตั้งค่าพื้นฐานบางอย่าง ชื่อ หมายเลขเวอร์ชัน คำอธิบาย และเวอร์ชันรายการต้องรวมอยู่ในไฟล์นี้ เรายังให้การอนุญาตและการดำเนินการที่โหลด index.html เป็นป๊อปอัปของส่วนขยาย

 { "name": "MakeUseOf.com Automated Search", "version": "1.0.0", "description": "A search tool to find interesting articles", "manifest_version": 3, "author": "Samuel Garbett", "permissions": ["storage", "declarativeContent", "activeTab", "scripting"], "host_permissions": [""], "action":{ "default_popup": "index.html", "default_title": "MUO Auto Search" } }

ขั้นตอนที่ 3: สร้าง HTML และ CSS

ก่อนที่เราจะเริ่มต้นเขียนโค้ดสคริปต์ของเรา ก่อนอื่นเราต้องออกแบบส่วนต่อประสานผู้ใช้ (UI) อย่างง่ายโดยใช้ HTML และ CSS คุณสามารถใช้ไลบรารี CSS เช่น Bootstrap เพื่อหลีกเลี่ยงการเขียนของคุณเอง แต่ส่วนเสริมของเราต้องการกฎเพียงไม่กี่ข้อ

แท็ก HTML, head และ body ทั้งหมดมีอยู่ในไฟล์ index.html ของเรา แท็ก head มีชื่อหน้าและลิงก์ไปยังสไตล์ชีตของเรา ในขณะที่เนื้อหามีแท็ก h1 ลิงก์ไปยัง MakeUseOf.com และปุ่มอื่นที่จะใช้เป็นทริกเกอร์สำหรับสคริปต์ ไฟล์ script.js รวมอยู่ในแท็กสคริปต์ที่ท้ายเอกสาร

 <html> <head> <title>MUO Auto Search</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>MUO Auto Search</h1> <a href="https://www.makeuseof.com/" target="_blank"><button>Go to MakeUseOf.com</button></a> <button>Start Random Search</button> </body> <script src="script.js"></script> </html>

ไฟล์ CSS ของเรานั้นง่ายกว่าไฟล์ HTML ของเราด้วยซ้ำ เนื่องจากมันเปลี่ยนรูปแบบขององค์ประกอบห้าอย่างเท่านั้น เรามีแนวทางสำหรับ html และแท็ก body รวมทั้งแท็ก h1 และทั้งสองปุ่ม

 html { width: 400px; } body { font-family: Helvetica, sans-serif; } h1 { text-align: center; } #buttonOne { border-radius: 0px; width: 100%; padding: 10px 0px; } #buttonTwo { border-radius: 0px; width: 100%; padding: 10px 0px; margin-top: 10px; }

ขั้นตอนที่ 4: สร้าง JavaScript

ขั้นตอนสุดท้ายในขั้นตอนนี้คือการสร้างไฟล์ script.js ของเรา

ฟังก์ชัน insertScript() ในไฟล์นี้ใช้เพื่อแทรกฟังก์ชันอื่น ( autoSearch() ) ลงในหน้าปัจจุบัน ซึ่งช่วยให้เราสามารถแก้ไขหน้าและใช้ตัวเลือกการค้นหาที่มีอยู่บนเว็บไซต์ MakeUseOf.com

ตามด้วยฟังเหตุการณ์ที่รอจนกระทั่งกดปุ่มเริ่มการค้นหาแบบสุ่มก่อนที่จะเรียกใช้ฟังก์ชันที่กล่าวถึงก่อนหน้านี้

วิธีค้นหา อัตโนมัติ () นั้นซับซ้อนกว่าเล็กน้อย เริ่มต้นด้วยอาร์เรย์ที่ประกอบด้วยหมวดหมู่ของเว็บไซต์ MUO 20 หมวดหมู่ ทำให้เราได้ตัวอย่างที่เหมาะสมสำหรับการค้นหาแบบสุ่ม หลังจากนั้น เราใช้ฟังก์ชัน Math.random() เพื่อสร้างจำนวนเต็มสุ่มระหว่าง 0 ถึง 19 เพื่อเลือกองค์ประกอบจากอาร์เรย์ของเรา

ตอนนี้เราต้องเลียนแบบการคลิกปุ่มเพื่อเปิดช่องค้นหา MUO ด้วยคำค้นหาของเรา ขั้นแรกเราใช้คอนโซลนักพัฒนาซอฟต์แวร์ของ Chrome เพื่อรับรหัสของปุ่มค้นหา จากนั้นเราจะเพิ่มลงในโค้ด JavaScript ของเราโดยใช้เมธอด click()

 // This method incorporates our autoSearch functionality into the page's code function insertScript() { // This chooses the operation's focused tab and invokes the autoSearch function chrome.tabs.query({active: true, currentWindow: true}, tabs => { chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch}) }) // This closes the extension pop-up window that allows you to pick the website search bar window.close(); } // This is an event listener that detects when our "Start Random Search" button is clicked document.getElementById('buttonTwo').addEventListener('click', insertScript) // This code chooses a topic at random from an array and function autoSearch() { // This is an array in which we will store our search keywords const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac", "Linux", "Android", "Apple", "Internet", "Security", "Programming", "Entertainment", "Productivity", "Career", "Creative", "Gaming", "Social Media", "Smart Home", "DIY", "Review"]; // This creates a number between 0 and 19 at random let selectorNumber = Math.floor(Math.random() * 20); // The random number is used to choose an element from the array let selection = searchTerms[selectorNumber]; // This mimics clicking on the MUO website search button document.getElementById("js-search").click(); // This variables the MUO website search bar var searchBar = document.getElementById("js-search-input"); // This enters our arbitrary search query into the search field searchBar.value = searchBar.value + selection; // The process is completed by activating the online form document.getElementById("searchform2").submit(); }

ขั้นตอนที่ 5: การอัปโหลดไฟล์ไปยัง Chrome:/extensions

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

กำลังอัปโหลดไฟล์ไปยัง Chrome

เปิด Google Chrome ไปที่ chrome:/extensions และตรวจดูให้แน่ใจว่าตัวเลื่อนโหมดนักพัฒนาซอฟต์แวร์ที่มุมบนขวาเปิดอยู่

เปิด Google Chrome

คลิก Load Unpacked ที่มุมซ้ายบน จากนั้นเลือกโฟลเดอร์ที่มีไฟล์นามสกุลของคุณ แล้วคลิก Select Folder

คลิกโหลดแกะกล่อง

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

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

การสร้างส่วนขยายของ Google Chrome

โพสต์นี้เพียงสัมผัสพื้นผิวของฟังก์ชันที่คุณอาจรวมเข้ากับส่วนขยาย Google Chrome ของคุณเอง เมื่อคุณเข้าใจพื้นฐานแล้ว ก็คุ้มค่าที่จะสละเวลาทดลองกับแนวคิดของคุณเอง

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