21 KiB

Raw Blame History

โครงการส่วนขยายเบราว์เซอร์ ตอนที่ 1: ทุกสิ่งเกี่ยวกับเบราว์เซอร์

ภาพสเก็ตช์โดย Wassim Chegham

แบบทดสอบก่อนเรียน

บทนำ

ส่วนขยายเบราว์เซอร์ช่วยเพิ่มฟังก์ชันการทำงานเพิ่มเติมให้กับเบราว์เซอร์ แต่ก่อนที่คุณจะสร้างส่วนขยาย คุณควรเรียนรู้เกี่ยวกับวิธีการทำงานของเบราว์เซอร์เสียก่อน

เกี่ยวกับเบราว์เซอร์

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

แต่เบราว์เซอร์คืออะไร? มันคือซอฟต์แวร์ที่ช่วยให้ผู้ใช้งานสามารถเข้าถึงเนื้อหาจากเซิร์ฟเวอร์และแสดงผลบนหน้าเว็บได้

✅ เรื่องราวเล็กน้อย: เบราว์เซอร์ตัวแรกมีชื่อว่า 'WorldWideWeb' และถูกสร้างขึ้นโดย Sir Timothy Berners-Lee ในปี 1990

เบราว์เซอร์ยุคแรกบางตัว โดย Karen McGrane

เมื่อผู้ใช้เชื่อมต่ออินเทอร์เน็ตโดยใช้ที่อยู่ URL (Uniform Resource Locator) ซึ่งมักจะใช้โปรโตคอล Hypertext Transfer Protocol ผ่านที่อยู่ http หรือ https เบราว์เซอร์จะสื่อสารกับเว็บเซิร์ฟเวอร์และดึงหน้าเว็บมาแสดงผล

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

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

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

เว็บไซต์ที่มีประโยชน์มากที่คุณควรบุ๊กมาร์กไว้ในเบราว์เซอร์ที่คุณชอบใช้คือ caniuse.com เมื่อคุณสร้างหน้าเว็บ การใช้รายการเทคโนโลยีที่รองรับของ caniuse จะช่วยให้คุณสนับสนุนผู้ใช้ได้ดีที่สุด

✅ คุณจะทราบได้อย่างไรว่าผู้ใช้เว็บไซต์ของคุณนิยมใช้เบราว์เซอร์ใดมากที่สุด? ตรวจสอบการวิเคราะห์ของคุณ - คุณสามารถติดตั้งแพ็กเกจการวิเคราะห์ต่าง ๆ เป็นส่วนหนึ่งของกระบวนการพัฒนาเว็บของคุณ และมันจะแสดงให้คุณเห็นว่าเบราว์เซอร์ใดที่ได้รับความนิยมมากที่สุด

ส่วนขยายเบราว์เซอร์

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

การพัฒนาส่วนขยายเบราว์เซอร์ก็สนุกเช่นกัน โดยทั่วไปแล้วมันจะจัดการงานจำนวนจำกัดที่สามารถทำได้ดี

✅ ส่วนขยายเบราว์เซอร์ที่คุณชื่นชอบคืออะไร? มันทำงานอะไรบ้าง?

การติดตั้งส่วนขยาย

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

หมายเหตุ: อย่าลืมเปิดโหมดนักพัฒนาและอนุญาตให้ติดตั้งส่วนขยายจากร้านค้าอื่น

โดยสรุป กระบวนการจะเป็นดังนี้:

สร้างส่วนขยายของคุณโดยใช้ npm run build
ไปที่หน้าเพจส่วนขยายในเบราว์เซอร์โดยใช้ปุ่ม "การตั้งค่าและอื่น ๆ" (ไอคอน ...) ที่มุมขวาบน
หากเป็นการติดตั้งใหม่ ให้เลือก load unpacked เพื่ออัปโหลดส่วนขยายใหม่จากโฟลเดอร์ที่สร้าง (ในกรณีของเราคือ /dist)
หรือคลิก reload หากคุณกำลังโหลดส่วนขยายที่ติดตั้งไว้แล้ว

✅ คำแนะนำเหล่านี้ใช้กับส่วนขยายที่คุณสร้างเอง; หากต้องการติดตั้งส่วนขยายที่เผยแพร่ในร้านค้าส่วนขยายเบราว์เซอร์ที่เกี่ยวข้อง คุณควรไปที่ ร้านค้า และติดตั้งส่วนขยายที่คุณต้องการ

เริ่มต้น

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

สิ่งที่คุณต้องมี:

คีย์ API; ป้อนอีเมลของคุณในช่องบนหน้านี้และคุณจะได้รับคีย์
รหัสภูมิภาค ที่สอดคล้องกับ Electricity Map (ในบอสตัน ตัวอย่างเช่น ฉันใช้ 'US-NEISO')
โค้ดเริ่มต้น ดาวน์โหลดโฟลเดอร์ start; คุณจะต้องเติมโค้ดในโฟลเดอร์นี้
NPM - NPM เป็นเครื่องมือจัดการแพ็กเกจ; ติดตั้งมันในเครื่องของคุณและแพ็กเกจที่ระบุในไฟล์ package.json ของคุณจะถูกติดตั้งเพื่อใช้งานกับทรัพยากรเว็บของคุณ

✅ เรียนรู้เพิ่มเติมเกี่ยวกับการจัดการแพ็กเกจใน โมดูลการเรียนรู้ที่ยอดเยี่ยมนี้

ใช้เวลาสักครู่เพื่อดูโครงสร้างโค้ด:

✅ เมื่อคุณมีคีย์ API และรหัสภูมิภาคพร้อมแล้ว ให้บันทึกไว้ในโน้ตสำหรับใช้งานในอนาคต

สร้าง HTML สำหรับส่วนขยาย

ส่วนขยายนี้มีสองมุมมอง หนึ่งสำหรับรวบรวมคีย์ API และรหัสภูมิภาค:

และอีกหนึ่งสำหรับแสดงการใช้คาร์บอนของภูมิภาค:

เริ่มต้นด้วยการสร้าง HTML สำหรับฟอร์มและจัดแต่งด้วย CSS

ในโฟลเดอร์ /dist คุณจะสร้างฟอร์มและพื้นที่แสดงผล ในไฟล์ index.html เติมพื้นที่ฟอร์มที่กำหนดไว้:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

นี่คือฟอร์มที่ข้อมูลที่บันทึกไว้ของคุณจะถูกป้อนและบันทึกลงใน local storage

ถัดไป สร้างพื้นที่แสดงผล; ใต้แท็กฟอร์มสุดท้าย ให้เพิ่ม divs บางส่วน:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

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

npm install

คำสั่งนี้จะใช้ npm ซึ่งเป็น Node Package Manager เพื่อติดตั้ง webpack สำหรับกระบวนการสร้างส่วนขยายของคุณ Webpack เป็นตัวรวมที่จัดการการคอมไพล์โค้ด คุณสามารถดูผลลัพธ์ของกระบวนการนี้ได้โดยดูใน /dist/main.js - คุณจะเห็นว่าโค้ดถูกรวมไว้แล้ว

สำหรับตอนนี้ ส่วนขยายควรสร้างได้ และหากคุณปรับใช้ใน Edge เป็นส่วนขยาย คุณจะเห็นฟอร์มที่แสดงผลอย่างเรียบร้อย

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

🚀 ความท้าทาย

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

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

ในบทเรียนนี้ คุณได้เรียนรู้เล็กน้อยเกี่ยวกับประวัติของเบราว์เซอร์ ใช้โอกาสนี้เรียนรู้เกี่ยวกับวิธีที่ผู้คิดค้น World Wide Web มองเห็นการใช้งานของมันโดยอ่านเพิ่มเติมเกี่ยวกับประวัติศาสตร์ของมัน เว็บไซต์ที่มีประโยชน์บางแห่งได้แก่:

ประวัติของเบราว์เซอร์

ประวัติของเว็บ

บทสัมภาษณ์กับ Tim Berners-Lee

งานที่ได้รับมอบหมาย

ปรับแต่งส่วนขยายของคุณ

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้

21 KiB Raw Blame History