สุดยอด HTML, CSS, Javascript Practice: Chrome Extension

สำหรับผู้ที่เพิ่งเสร็จสิ้น Codecademy

เมื่อคุณศึกษาการเขียนโปรแกรมวิธีที่มีประสิทธิภาพที่สุดในการศึกษาด้วยตนเองคือการพัฒนาผลิตภัณฑ์ วิธีนี้เร็วกว่าการเรียนหลักสูตรการเขียนโปรแกรมใด ๆ เพื่อพัฒนาทักษะการเขียนโปรแกรมของคุณ

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

ดังนั้นฉันจึงพยายามโน้มน้าวใจนักเรียนเช่นนี้

มันจะสนุกถ้าคุณเริ่มเรียนรู้ด้านเซิร์ฟเวอร์และเปิดแอปพลิเคชันบางอย่าง ได้โปรดอย่ายอมแพ้

แต่นักเรียนหลายคนหยุดเรียนรู้การเขียนโปรแกรมขณะที่อยู่ในระยะ HTML และ CSS

(อาจเริ่มต้นด้วย HTML ไม่ใช่ความคิดที่ดีในการสนับสนุนให้ผู้คนศึกษาการเขียนโปรแกรม)

วันหนึ่งฉันเปิดเบราว์เซอร์ Chrome เพื่อเริ่มทำงาน จากนั้นฉันก็รู้ว่าฉันใช้แอพพลิเคชั่นที่ดีที่สุดที่คุณสามารถสร้างได้โดยใช้ HTML, CSS และ Javascript เท่านั้น

โมเมนตัม

โดยย่อหากคุณติดตั้งส่วนขยายนี้บน Chrome ทุกครั้งที่คุณเปิดแท็บใหม่จะมีข้อความทักทายเหนือภาพสุดเจ๋ง จำนวนการดาวน์โหลดหลายล้านครั้งแล้ว หากคุณไม่ได้ใช้สิ่งนี้ฉันขอแนะนำให้คุณติดตั้ง บางทีคุณอาจจะพบกับแอปพลิเคชันนี้เพียง 2 ถึง 3 วินาทีต่อแท็บใหม่ แต่คุณสามารถผ่อนคลายได้ในช่วงเวลาสั้น ๆ

มาลองเลียนแบบแอปพลิเคชั่นนี้กันเถอะ!

ขั้นตอนที่ 1: สิ่งที่ต้องเตรียม

  • HTML
  • CSS
  • จาวาสคริ
  • รูปสวย: จาก unsplash
  • manifest.json (โหลดจาก Chrome)

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

มาทำให้มันง่าย

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

ค้นหารูปภาพ

หากคุณไปที่เว็บไซต์ Unsplash คุณสามารถค้นหาภาพสวย ๆ มากมายได้ฟรี

ตั้งแต่ฉันอยู่ที่นอร์เวย์ฉันตัดสินใจใช้ภาพนี้
ขอบคุณ Vidar Nordli-Mathisen (การรับรู้ความสามารถของพวกเขาเป็นสิ่งสำคัญเสมอ)

ภาพถ่ายโดย Vidar Nordli-Mathisen บน Unsplash

ทำโครงการ

เรียบง่ายเรียบง่ายเรียบง่าย

ไฟล์ HTML หนึ่งไฟล์ CSS หนึ่งไฟล์ Javascript หนึ่งไฟล์และไฟล์ Manifest หนึ่งไฟล์

นั่นคือทั้งหมดที่เราต้องการ

โอเคนี่เป็นเวอร์ชั่นแรก

นี่คือหน้าเว็บแบบง่าย ตอนนี้จะโหลดจาก Chrome คุณต้องเพิ่มไฟล์ manifest.json ต่อไปนี้

“ chrome_url_overrides” เป็นคุณสมบัติที่สำคัญที่สุดในแอปพลิเคชันนี้

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

ไปแล้วเราเพิ่งเสร็จโครงการแรกของเรา

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

แต่มาทำให้ดีกว่านี้

ขั้นตอนที่ 2: สิ่งที่จะเพิ่ม

  • เวลาปัจจุบัน
  • ฟังก์ชั่นการเปลี่ยนชื่อ
  • ฟังก์ชั่นการเปลี่ยนรูปภาพ

ในการรวมคุณสมบัติใหม่ทั้งสามนี้ฉันเปลี่ยนไฟล์ HTML ด้านล่าง

ควรเปลี่ยน CSS ด้วย

จากนั้นหน้าใหม่จะเป็นดังนี้

โอ้ฉันคิดว่ามันเป็นโมเมนตัม :)

อัปเดต manifest.json

ตอนนี้เราจะเพิ่มคุณสมบัติสองอย่าง

ก่อนอื่นเราจะเพิ่มแบบฟอร์มการป้อนข้อมูลลงในแอปพลิเคชันนี้เพื่อให้ผู้คนสามารถใส่ชื่อของพวกเขาได้ เราจะเพิ่มแบบฟอร์มนี้ภายใต้ข้อความ“ Hello, Jungwon Seo”

นี่มันน่าเกลียดเอาเถอะ

รูปแบบใหม่สำหรับแท็กอินพุต

โอเคดีกว่ามาก

จากนี้ไปเราต้องคิดเกี่ยวกับวิธีเก็บข้อมูลนี้

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

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

นอกจากนี้เนื่องจากฉันยังคงต้องการใช้ jQuery ให้เพิ่มเข้าไป

ฉันพยายามเพิ่ม jQuery CDN แต่ ...

ไม่ต้องกังวลเราแค่ต้องเพิ่มที่พักอีกหนึ่งรายการใน manifest.json

ดีตอนนี้เราพร้อมที่จะโค้ดในไฟล์ script.js

สิ่งที่ฉันต้องการทำก่อนคือ:

  1. ทำให้ผู้ใช้พิมพ์ชื่อของพวกเขา
  2. จัดเก็บลงในคุกกี้ (ใช้รหัสที่ได้รับความนิยมสูงสุดเท่านั้น)
  3. จางหายไปจากแบบฟอร์มการป้อนข้อมูลและจางหายไปในข้อความอวยพร

ตอนนี้เป็นครั้งแรกที่เราต้องคิดเหมือนนักพัฒนาที่แท้จริง

กรณีที่ 1: เมื่อคุณเปิดเป็นครั้งแรก
กรณีที่ 2: เมื่อคุณเปิดมันหลังจากคุณพิมพ์ชื่อของคุณ

เราจำเป็นต้องตัดสินใจว่าควรมองเห็นอะไรและไม่ควรทำ

กรณีที่ 1:
เวลา: เวลาปัจจุบัน
ข้อความทักทาย: คุณชื่ออะไร
รูปแบบการป้อนข้อมูล: มองเห็นได้

กรณีที่ 2:
เวลา: เวลาปัจจุบัน
ข้อความทักทาย: สวัสดี !
แบบฟอร์มการป้อนข้อมูล: มองไม่เห็น

และวิธีในการแยกความแตกต่างระหว่างสองกรณีนี้คือการตรวจสอบว่าคุกกี้มีรหัส "ชื่อผู้ใช้" หรือไม่

ด้วยฟังก์ชั่นอัปเดตเวลา script.js ใหม่จะเป็นดังนี้

ก่อนพิมพ์ชื่อหลังจากพิมพ์ชื่อ

โอเคดูเหมือนว่าจะใช้งานได้

แน่นอนมีบางสิ่งที่เรายังต้องปรับปรุงเช่นผลการเปลี่ยนแปลง

แต่ฉันจะมอบให้คุณ

ตอนนี้มีอะไรอีกบ้าง?

เราจำเป็นต้องเพิ่มฟังก์ชั่นที่อนุญาตให้ผู้ใช้เปลี่ยนรูปภาพ

Unsplash API

คุณสามารถลงทะเบียนแอพของคุณและรับโทเค็นได้จากหน้านี้

ในการใช้ Unsplash API คุณต้องลงทะเบียนแอปพลิเคชันของคุณในหน้านักพัฒนาซอฟต์แวร์ของพวกเขา

ด้วยการคลิก Application แอปพลิเคชันใหม่ ’คุณสามารถลงทะเบียนของคุณได้

สำหรับผลิตภัณฑ์ตัวอย่างคุณจะได้รับอนุญาตให้ใช้งานได้ถึง 50 คำขอต่อชั่วโมง และนั่นก็เพียงพอแล้วสำหรับเรา

เพียงกรอกแบบฟอร์มด้านล่างตามที่คุณต้องการ

พิมพ์ชื่อใด ๆ

หากคุณสร้างแอปพลิเคชันคุณจะเห็นส่วน "คีย์" จากเว็บไซต์ที่ถูกเปลี่ยนเส้นทาง

ฉันได้ลบแอปพลิเคชันนี้แล้วดังนั้นจึงไม่มีประเด็นให้ลองอีก

คุณต้องคัดลอก "รหัสการเข้าถึง" และกำหนดให้กับตัวแปรจาวาสคริปต์ของคุณ "ACCESS_KEY"

เราจะใช้ API การค้นหา

นี่คือสถานการณ์ ทุกคนมีความสนใจต่างกัน ดังนั้นฉันต้องการถามความสนใจก่อนจากนั้นฉันจะค้นหาภาพนั้นโดยใช้ Unsplash API หลังจากนั้นฉันจะอัปเดตภาพทุก ๆ 12 ชั่วโมง (คำหลักเดียวกันรูปภาพแตกต่างกัน)

ดังนั้นฟังก์ชั่น AJAX จะเป็นดังนี้

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

จากนั้นตามที่คุณคาดหวังเราต้องเป็นนักพัฒนาซอฟต์แวร์อีกครั้ง

กรณีที่ 1–1: ครั้งแรกมาก
กรณีที่ 1-2: ตามชื่อ
กรณีที่ 2: หลังจากที่คุณพิมพ์ความสนใจ
กรณีที่ 3: 12 ชั่วโมงต่อมา

ตกลงมาตัดสินใจกันทีละคน

ในกรณีที่ 1–1 เราแค่ต้องซ่อนส่วนที่เกี่ยวข้องกับภาพทั้งหมด ข้าม.

ในกรณีที่ 1-2 เพียงแสดงแบบฟอร์มการป้อนข้อมูลเพื่อความสนใจ

ในกรณีที่ 2 โทร AJAX และบันทึกข้อมูลภาพ

ในกรณีที่ 3 ให้ตั้งเวลาหมดอายุเป็น 12 ชั่วโมงและหากคุกกี้ว่างเปล่าให้โทรขอ AJAX อีกครั้ง

คำสำคัญ: ลอนดอน

ใช่มันใช้งานได้

ขั้นตอนที่ 3: สัมผัสสุดท้าย

ไม่จำเป็นต้องให้เครดิตช่างภาพ แต่ทำไมถึงไม่ใช่?

เราสามารถเขียนโค้ดอีกสองสามบรรทัดและให้เครดิตชื่อและหน้าของช่างภาพที่ด้านซ้ายบน

เพื่อให้เราสามารถใช้ข้อมูลของช่างภาพเมื่อคุณตรวจสอบคุกกี้เป็นครั้งแรก

อีกอย่างถ้ามีใครต้องการเปลี่ยนความสนใจของพวกเขาล่ะ

มาเพิ่มฟังก์ชันการทำงานที่ช่วยให้ผู้คนพิมพ์ความสนใจของพวกเขาอีกครั้ง

ก่อนที่คุณจะคลิกปุ่ม

ไปแล้ว หากคุณคลิกปุ่ม“ เลือกความสนใจใหม่” มันจะเปิดขึ้นมาเพื่อเปิดแบบฟอร์มการป้อนข้อมูลที่คุณพิมพ์ความสนใจของคุณก่อน

หลังจากที่คุณคลิกปุ่ม

ขั้นตอนที่ 4: สร้างผลิตภัณฑ์ของคุณเอง

ฉันแค่อยากให้คุณได้สัมผัสกับกระบวนการตั้งแต่ต้นจนจบ ถึงกระนั้นคุณต้องพัฒนาสิ่งนี้ด้วยตัวเองเพื่อดูดซับทักษะที่คุณได้เรียนรู้

จะต้องมีฟังก์ชั่นบางอย่างที่คุณคิดว่ามันจะเป็นการดีที่จะรวมเช่นวิธีการเลือกภาพแบบสุ่ม หรือคุณอาจคิดว่ารหัสบางอย่างของฉันไม่มีประสิทธิภาพ คุณสามารถปรับปรุงเวอร์ชันของผลิตภัณฑ์เดียวกันด้วยรหัสที่ดีขึ้น

ขอให้โชคดีและอย่ายอมแพ้!

เวอร์ชันสมบูรณ์สามารถพบได้ที่นี่: https://github.com/thejungwon/MyChromeExtension

เรื่องราวนี้จัดพิมพ์ใน Noteworthy ที่มีผู้อ่านมากกว่า 10,000 คนเข้ามาทุกวันเพื่อเรียนรู้เกี่ยวกับผู้คนและแนวคิดในการปรับแต่งผลิตภัณฑ์ที่เราชื่นชอบ

ติดตามสิ่งพิมพ์ของเราเพื่อดูเรื่องราวเพิ่มเติมเกี่ยวกับผลิตภัณฑ์และการออกแบบโดยทีมงานวารสาร