วิธีการสร้างส่วนขยายของ Chrome ตั้งแต่เริ่มต้น

หากคุณต้องการ เพิ่มหรือแก้ไขฟังก์ชั่นบางอย่าง ใน Google Chrome คุณต้องใช้ส่วนขยาย แม้ว่าคุณสามารถดาวน์โหลดส่วนขยายจาก Chrome Web Store แต่บางครั้งคุณต้องการฟังก์ชั่นเฉพาะที่คุณไม่สามารถหาได้ในส่วนขยายใด ๆ ที่มีอยู่.

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

ในต่อไปนี้ฉันจะแสดงให้คุณเห็น วิธีที่ง่ายที่สุดในการสร้างส่วนขยาย. หากคุณมีความรู้ด้านการพัฒนาเว็บไซต์ (HTML, CSS และ JS) คุณจะรู้สึกเหมือนอยู่บ้าน ถ้าไม่ก่อนดูช่องเหล่านี้เพื่อ เรียนรู้พื้นฐานของการพัฒนาเว็บ, จากนั้นดำเนินการต่อด้านล่าง.

ข้อกำหนดเบื้องต้น

คุณต้องมีข้อกำหนดต่อไปนี้ให้สมบูรณ์ก่อนที่จะเริ่มด้วยบทช่วยสอนนี้.

1. คุณต้องคุ้นเคย HTML, CSS และ JavaScript. [ตรวจสอบแหล่งข้อมูล]
2. คุณต้องมี โปรแกรมแก้ไขรหัส เพื่อเขียนส่วนขยาย [เปรียบเทียบบรรณาธิการ]
3. (ไม่บังคับ) หากคุณต้องการกระจายส่วนขยายของคุณไปยังผู้ใช้รายอื่นคุณต้องมี บัญชีนักพัฒนาซอฟต์แวร์ ที่ Chrome เว็บสโตร์ [สร้างบัญชี]

บันทึก: Google ขอให้คุณจ่ายค่าธรรมเนียมเล็กน้อยในการสร้างบัญชีนักพัฒนาซอฟต์แวร์ที่ Chrome เว็บสโตร์.

สร้างส่วนขยาย

ในบทช่วยสอนนี้ฉันจะแบ่งปันกระบวนการสร้าง ส่วนขยายที่ต้องทำ สำหรับ Google Chrome มันจะเป็นยูทิลิตี้ (ดังที่แสดงด้านล่าง) เพื่อแสดงส่วนประกอบที่จำเป็นและความสามารถที่มีให้กับส่วนขยาย.

1. รับเทมเพลต

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

Extensionizr เป็นเครื่องกำเนิดไอน้ำสำเร็จรูปที่ดีที่สุด สำหรับส่วนขยายของโครเมี่ยม ช่วยให้คุณเลือกประเภทส่วนขยายที่กำหนดอย่างใดอย่างหนึ่ง - การทำงานของเบราว์เซอร์ (การกระทำสำหรับทุกหน้าหรือเบราว์เซอร์), การกระทำหน้า (การกระทำสำหรับหน้าปัจจุบัน) หรือ ส่วนขยายที่ซ่อนอยู่ (การกระทำพื้นหลังที่มักจะซ่อนอยู่ในส่วนต่อประสานด้านหน้า).

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

เมื่อคุณเลือกตัวเลือกสำหรับสร้างส่วนขยายตัวอย่างของคุณเสร็จแล้วให้กดปุ่ม “ดาวน์โหลดได้!” ปุ่มใน Extensionizr ในที่สุด, แตกไฟล์เก็บถาวร (.zip) ไปยังไดเรกทอรี และเปิดโปรแกรมแก้ไขรหัสของคุณเพื่อเริ่มเขียนส่วนขยาย.

2. รหัสส่วนขยาย

หลังจากที่คุณดาวน์โหลดและแยกแม่แบบแล้วคุณจะเห็นโครงสร้างไดเรกทอรีดังที่แสดงในภาพด้านล่าง เทมเพลตมีการจัดระเบียบอย่างเรียบร้อยและคุณต้องรู้ว่าไฟล์ที่สำคัญที่สุดคือ “manifest.json“.

มาทำความรู้จักกับไฟล์และโฟลเดอร์อื่น ๆ ในไดเรกทอรีนี้ด้วย:

1. _locales: มันถูกใช้เพื่อ ข้อมูลภาษาของร้านค้า สำหรับแอพที่พูดได้หลายภาษา.
2. CSS: มันทำหน้าที่จัดเก็บห้องสมุดส่วนหน้าของบุคคลที่สามเช่น Bootstrap 4.
3. ไอคอน: มันถูกออกแบบมาให้มีไอคอนสำหรับส่วนขยายของคุณในขนาดที่แตกต่างกัน.
4. js: มันมีประโยชน์ในการบันทึก ห้องสมุดส่วนหลังของบุคคลที่สาม เช่น jQuery 3.
5. src: มันเก็บรหัสจริงที่คุณจะเขียนสำหรับส่วนขยายของคุณ.

manifest.json

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

ตัวอย่างเช่นในโค้ดด้านล่างคุณจะสังเกตเห็นว่าฉันเปลี่ยนชื่อคำอธิบายและ homepage_url พร้อมกับ default_title ภายใต้ browser_action ยิ่งกว่านั้นฉัน ที่เพิ่ม “การเก็บรักษา” ภายใต้สิทธิ์ ตามที่เราต้องการในการจัดเก็บข้อมูลในส่วนขยายของเรา.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "แอพที่ต้องทำง่าย ๆ สำหรับทุกคน", "homepage_url": " https://go.aksingh.net/todoizr "," ไอคอน ": " 16 ":" icons / icon16.png "," 48 ":" ไอคอน / icon48.png "," 128 ":" ไอคอน / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" ไอคอน / icon19.png "," default_title ":" Todoizr - สิ่งที่ต้องทำ "," default_popup ":" src / browser_action / browser_action.html "," การอนุญาต ": [" ที่เก็บข้อมูล "] 

src \ browser_action

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

บันทึก: คุณสามารถเริ่มต้นด้วยรหัสโดยการโคลนที่เก็บนี้.

รหัสเริ่มต้นจากแม่แบบ

แม้ว่าไดเรกทอรีนี้จะมีเพียงไฟล์ HTML ที่มีรหัสทั้งหมด แต่ฉันได้ตัดสินใจแบ่งออกเป็นสามไฟล์แยกกันเพื่อความชัดเจนที่ดีขึ้น ที่กล่าวว่าไฟล์ HTML ชื่อ “browser_action.html” ตอนนี้มีรหัสต่อไปนี้:

นอกจากนี้ไฟล์สไตล์มีชื่อว่า “browser_action.css” มีเนื้อหาด้านล่างในขณะที่ไฟล์ JavaScript ชื่อ “browser_action.js” ว่างเปล่าตอนนี้.

 #mainPopup padding: 10px; ความสูง: 200px; ความกว้าง: 400px; ครอบครัวแบบอักษร: Helvetica, Ubuntu, Arial, sans-serif;  h1 ขนาดตัวอักษร: 2em;  

ออกแบบส่วนต่อประสานของป๊อปอัพ

หลังจากตั้งค่าโครงการเริ่มต้นให้ออกแบบอินเตอร์เฟสของป๊อปอัปก่อน ฉันมี ตั้งค่าส่วนต่อประสานด้วยวิธีการที่เรียบง่าย, แสดงชื่อที่ด้านบนตามด้วยฟอร์มเพื่อเพิ่มไอเท็มสิ่งที่ต้องทำและพื้นที่ด้านล่างเพื่อดูไอเท็มที่เพิ่ม มันเป็นแรงบันดาลใจจากการออกแบบที่เรียบง่ายของ “แบบฟอร์ม 5“.

ในรหัสด้านล่างฉันได้เพิ่มสอง divs หนึ่งสำหรับการแสดงแบบฟอร์มเพื่อเพิ่มไอเท็มสิ่งที่ต้องทำและอีกอันหนึ่งสำหรับการแสดงรายการไอเท็มสิ่งที่ต้องทำที่เพิ่มไว้แล้ว ที่กล่าวว่ารหัสใหม่สำหรับ “browser_action.html” มีดังนี้:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

และสไตล์ไฟล์ “browser_action.css” ตอนนี้มีรหัสต่อไปนี้:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; ความกว้าง: 300px; ครอบครัวแบบอักษร: Helvetica, Ubuntu, Arial, sans-serif;  / * ฟอร์มไอเท็มสิ่งที่ต้องทำ * / .form-style-5 margin: auto; การขยาย: 0px 20px;  .form-style-5: ลูกคนแรก พื้นหลัง: ไม่มี;  .form-style-5 h1 color: # 308ce3; ขนาดตัวอักษร: 20px; จัดข้อความ: ศูนย์;  .form-style-5 input [type = "text"] width: auto; ลอย: ซ้าย; ขอบล่าง: unset;  .form-style-5 input [type = "button"] พื้นหลัง: # 308ce3; ความกว้าง: อัตโนมัติ ลอย: ขวา; การขยาย: 7px; เส้นขอบ: ไม่มี; รัศมีเส้นขอบ: 4px; ขนาดตัวอักษร: 14px;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * รายการสิ่งที่ต้องทำ * / .form-style-5: last-child height: inherit; ระยะขอบล่าง: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

สุดท้ายไฟล์สไตล์ของบุคคลที่สาม “form_style_5.css” มีเนื้อหาด้านล่าง มันถูกนำมาจากเว็บไซต์เพื่อสร้างแรงบันดาลใจในการออกแบบส่วนขยายของเรา.

 / * รูปแบบสไตล์ 5 โดย Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 ความกว้างสูงสุด: 500px; การขยาย: 10px 20px; พื้นหลัง: # f4f7f8; กำไร: อัตโนมัติ 10px; การขยาย: 20px; พื้นหลัง: # f4f7f8; รัศมี - ชายแดน: 8px; font-family: จอร์เจีย, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; ระยะขอบล่าง: 10px;  .form-style-5 label display: block; ระยะขอบล่าง: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"], .form-style ใส่ -5 [type = "email"], .form-style-5 input [type = "number"], .form-style-5 input [type = "search"], .form-style-5 input [type = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 เลือก font-family: Georgia, "Times New Roman", Times , serif; พื้นหลัง: rgba (255,255,255, .1); เส้นขอบ: ไม่มี; รัศมีเส้นขอบ: 4px; ขนาดตัวอักษร: 16px; กำไรขั้นต้น: 0; ร่าง: 0; การขยาย: 7px; ความกว้าง: 100%; ขนาดกล่อง: ชายแดนกล่อง; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; สีพื้นหลัง: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) ภาพประกอบ; box-shadow: 0 1px 0 rgba (0,0,0,0.03) ภาพประกอบ; ระยะขอบล่าง: 30px;  .form-style-5 input [type = "text"]: focus, .form-style-5 input [type = "date"]: โฟกัส, .form-style-5 input [type = "datetime"]: โฟกัส, .form-style-5 อินพุต [type = "email"]: โฟกัส, .form-style-5 อินพุต [type = "number"]: โฟกัส, .form-style-5 อินพุต [type = "ค้นหา"] : โฟกัส, .form-style-5 input [type = "time"]: โฟกัส, .form-style-5 input [type = "url"]: focus, .form-style-5 textarea: focus, .form- เลือก style-5: focus background: # d2d9dd;  .form-style-5 เลือก -webkit-ลักษณะ: menulist-button; ความสูง: 35px;  .form-style-5 .number background: # 1abc9c; สี: #fff; ความสูง: 30px; ความกว้าง: 30px; จอแสดงผล: บล็อกแบบอินไลน์; ขนาดตัวอักษร: 0.8em; ระยะขอบ - ขวา: 4px; line-height: 30px; จัดข้อความ: ศูนย์; ข้อความเงา: 0 1px 0 rgba (255,255,255,0.2); รัศมีเส้นขอบ: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] ตำแหน่ง: ญาติ; จอแสดงผล: บล็อก; การขยาย: 19px 39px 18px 39px; สี: #FFF; กำไรขั้นต้น: 0 อัตโนมัติ; พื้นหลัง: # 1abc9c; ขนาดตัวอักษร: 18px; จัดข้อความ: ศูนย์; แบบอักษร: ปกติ; ความกว้าง: 100%; เส้นขอบ: 1px solid # 16a085; ความกว้างชายแดน: 1px 1px 3px; ระยะขอบล่าง: 10px;  .form-style-5 input [type = "submit"]: โฮเวอร์, .form-style-5 อินพุต [type = "ปุ่ม"]: โฮเวอร์ พื้นหลัง: # 109177;  

เขียนตรรกะของป๊อปอัพ

เมื่อเราทำส่วนหน้าของส่วนขยายเสร็จแล้วให้เราเขียนตรรกะสำหรับการทำงานของมัน เราต้องการส่วนขยายของเราเพื่อให้สามารถ เพิ่มไอเท็มสิ่งที่ต้องทำและแสดง ในหน้าต่างป๊อปอัป ดังนั้นเราจะเพิ่มปุ่มฟังคลิกปุ่มเพื่อเพิ่มข้อความที่ป้อนเป็นรายการที่ต้องทำและผู้ฟังโหลดหน้าเพื่อแสดงรายการเหล่านั้น.

ในรหัสด้านล่างเราจะใช้สองฟังก์ชัน - sync.get () และ sync.set (), ซึ่งเป็นส่วนหนึ่งของ “chrome.storage“. เราต้องการอันที่สองเพื่อบันทึกไอเท็มสิ่งที่ต้องทำในที่เก็บและอันแรกที่จะเรียกพวกมันและแสดงมัน.

ที่กล่าวว่าด้านล่างเป็นรหัสสุดท้ายของ “browser_action.js” ไฟล์. ดังที่คุณเห็นด้านล่างรหัสมีความเห็นสูงเพื่อช่วยให้คุณเข้าใจวัตถุประสงค์.

 ฟังก์ชั่น loadItems () / * ก่อนได้รับ () ข้อมูลจากการจัดเก็บ * / chrome.storage.sync.get (['todo'], ฟังก์ชั่น (ผล) var todo = [] ถ้า (ผลลัพธ์ && result.todo && result.todo.trim ()! == ") / * แยกวิเคราะห์และรับอาร์เรย์ตามที่ถูกบันทึกเป็นสตริง * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) สำหรับ (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. โหลดส่วนขยาย

หลังจากที่คุณเขียนส่วนขยายเสร็จแล้วก็ถึงเวลาทดสอบคุณลักษณะของ Google Chrome ที่เสนอให้โหลดส่วนขยายที่ไม่ใช่สโตร์ แต่ก่อนอื่นคุณต้อง เปิดใช้งานโหมดผู้พัฒนา ในเบราว์เซอร์ของคุณ: คลิก ตัวเลือก ปุ่ม > เลือก “เครื่องมือเพิ่มเติม” > ส่วนขยาย, แล้วสลับ “โหมดนักพัฒนา“.

ตอนนี้คุณจะเห็นปุ่มเพิ่มเติมในแถบค้นหา คลิกที่นี่ “โหลดออกจากกล่อง” ปุ่ม. มันจะขอไดเรกทอรี - เรียกดูและเลือกไดเรกทอรีของส่วนขยายของคุณและมันจะโหลดส่วนขยาย หากคุณแก้ไขหรืออัปเดตรหัสของส่วนขยายคุณสามารถคลิกที่ ปุ่มโหลดซ้ำเพื่อโหลดการเปลี่ยนแปลงล่าสุด.

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

กระจายส่วนขยาย

แม้ว่ามันจะเป็น ง่ายต่อการอัพโหลดส่วนขยาย ไปที่ Chrome เว็บสโตร์กระบวนการนี้ยาวเกินกว่าจะครอบคลุมรายละเอียดทั้งหมด ในระยะสั้นคุณสร้างบัญชีนักพัฒนาซอฟต์แวร์แพคเกจส่วนขยายของคุณแล้วส่งพร้อมกับรายละเอียดเนื้อหาของมัน (เช่นชื่อไอคอนภาพหน้าจอ ฯลฯ ); ตามที่ระบุไว้ในคำแนะนำทีละขั้นตอน.

อะไรต่อไป อ่านและรหัส

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

ที่กล่าวว่าด้านล่างเป็นบางส่วนของฉัน แหล่งข้อมูล go-to ที่ชื่นชอบ สำหรับการเรียนรู้เพื่อพัฒนาส่วนขยายสำหรับ Google Chrome และเบราว์เซอร์ที่ใช้โครเมียมอื่น ๆ :

1. ความสามารถส่วนประกอบและคุณสมบัติทั้งหมดของส่วนขยาย.
2. ตัวอย่างส่วนขยายโดยทีมงานที่อยู่เบื้องหลัง Google Chrome.

หากคุณได้ผ่านแหล่งข้อมูลเหล่านี้และพร้อมสำหรับความท้าทายลองเพิ่มคุณสมบัติด้านล่างในส่วนขยายที่คุณเพิ่งพัฒนาเสร็จ:

1. ตัวเลือกในการลบรายการสิ่งที่ต้องทำที่บันทึกไว้.
2. คุณสมบัติที่จะแสดงการแจ้งเตือนเมื่อเพิ่มรายการเสร็จแล้ว.

นั่นคือทั้งหมดที่เกี่ยวกับการพัฒนาส่วนขยายแรกของคุณสำหรับเบราว์เซอร์ที่ได้รับความนิยมสูงสุด. คุณสร้างส่วนขยายใด? คุณประสบปัญหาหรือไม่? โปรดแจ้งให้เราทราบเรื่องราวของคุณโดยเขียนความคิดเห็นด้านล่างหรือส่งข้อความถึงฉันที่ @aksinghnet.

สุดท้าย แต่ไม่ใช่อย่างน้อยโปรดทราบว่าคุณสามารถลองใช้ Todoizr (ส่วนขยายที่เราสร้าง) ที่ Chrome Web Store และตรวจสอบรหัสที่สมบูรณ์ในที่เก็บนี้.