บันทึกการเขียนหน้าเพิ่มแท็บให้ Google Chrome

ช่วงนี้น้องที่แลปขยันอัพบล็อกมาก เห็นแล้วก็รู้สึกว่าบล็อกเราควรต้องมีอัพเดทบ้าง คือก็คิดไว้ในช่วงที่ผ่านมาว่าจะเขียนอย่างน้อย 2-3 บล็อกเลยทีเดียว แต่ด้วยความขี้เกียจและติดเกม ก็เลยดองไว้อย่างงั้น จริงๆ อยากเขียนบล็อกยาวอยู่หรอก แต่การหาข้อมูลนี่มันช่างยากเย็น งั้นวันนี้มาอัพสั้นๆ ก่อนละกัน พอให้บล็อกได้มีการเคลื่อนไหวบ้าง 5555

เรื่องก็มีอยู่ว่ามีเด็กมาฝึกงานที่แลป ซึ่งน้องเค้าก็ได้รับมอบหมายให้เขียนโค้ดจำนวนนึงโดยที่เราก็มีโอกาสได้ช่วยดูอยู่บ้าง (แต่ก็ช่วยไรไม่ค่อยได้นักหรอกน้องเค้าเก่งเกินไป) ทีนี้พอน้องเปิด Chrome ขึ้นมาเวลาหาข้อมูลเราก็จะเห็นหน้าเปิดแท็บใหม่แปลกๆ แสดงตัวเลขวิ่งอยู่ แต่ก็พอเดาได้ในทันทีว่ามันคืออายุน้องเขาน่ะแหละ เห็นดังนั้นความกีคในตัวก็พุ่งพล่านคิดว่าทำไมเราถึงไม่มีมั่งวะเสียชื่อกีคหมด ก็เลยหาข้อมูลนู่นนี่นั่นและลงมือเขียนอย่างรวดเร็ว แต่ก็ไปติดตรงที่ยังไม่สามารถเขียน Chrome extension ด้วยตัวเองได้เนื่องด้วยความขี้เกียจที่ยังมีอยู่บ้าง ก็เลยลองหาดูว่ามีใครทำ extention ที่เราต้องการไว้บ้างมั้ยน้า สุดท้ายแล้วก็ทำเสร็จอย่างรวดเร็วและเกือบจะได้เขียนบล็อกภายในวันนั้นเลย แต่ความขี้เกียจก็เลื่อนมันมาจนถึงวันนี้ ฮ่าาา เกริ่นมายาวเกินละ เข้าเรื่องเลย!

จุดเริ่มต้น

หลังจากที่ได้แรงบันดาลใจมาจากน้องฝึกงานแล้วสิ่งที่เริ่มทำเลยก็คือหาก่อนว่าจะเขียนอะไรไปแทนที่หน้าที่ขึ้นมาตอนเปิดแท็บใหม่ (Newtab page) ใน Chrome ได้ยังไง ก็พบว่าต้องเขียน Chrome extension มา override แต่ที่เราอยากทำคือแบบเร่งด่วนเขียนแค่ HTML + CSS + JS เป็น single page แล้วเรียกมาเปิดแทนหน้า Newtab เลย พอหาไปหามาก็ไปเจอ extension ที่น่าสนใจและตรงความต้องการเข้าชื่อว่า NewTab-Redirect เขียนโดย @jimschubert (ลองไปส่องดูก็เหมือนว่าเค้าจะใช้ AngularJS เขียน extension นี้นะ เดี๋ยวไว้มีใจจะเรียนจะกลับมาศึกษาการเขียน Chrome extension ใหม่ 55) ซึ่งเจ้า extension นี้ก็สามารถที่จะ redirect หน้า Newtab ไปเป็นหน้าไหนก็ได้ของ Chrome หรือลิงค์หน้าเว็บต่างๆ หรือแม้กระทั้ง local files ก็ยังได้ (ถ้ามีใครนึกครึ้มอยากเปิดไฟล์ .pdf ทุกครั้งที่เริ่มแท็บใหม่ก็ลองดู) เห็นดังนี้แล้วก็เริ่มเขียนหน้าเว็บที่ต้องการเลย

เขียนเว็บหน้าเดียว

แรงบันดาลใจเริ่มแรกที่ได้มาจากน้องก็อยากจะทำเป็นหน้าบอกอายุเหมือนกัน แต่ก็จะซ้ำอะ ไม่ชอบซ้ำ ก็เลยคิดไปทั่วเช่น นับถอยหลังวันแต่งงานเอย วันที่จะมีแฟนเอย แต่คิดๆ ดูแล้วก็สลดจังวะ ต้องมาเห็นนาฬิกานับถอยหลังขู่ตัวเองทุกวันเงี้ยนะ.. เลยคิดใหม่ว่าปกติตัวเองเป็นคนลืมวันลืมคืน จำวันที่ไม่ได้ จำวันจำเดือนจำปีไม่ค่อยได้เพราะไม่ค่อยได้เขียนเหมือนสมัยเรียนแล้วอะไรประมาณนั้น ก็เลยเอาวะทำเป็นนาฬิกาละกัน วางโครงเสร็จเลือกตัวช่วยเสร็จก็ไปโหลดมาใช้แบบ local กันเลย เพราะทีแรกกะจะให้ใช้ได้ถึงแม้ไม่มีเนตด้วย มาถึงตรงนี้เลือกใช้ Bulma สำหรับ CSS แล้วก็ FontAwesome เจ้าประจำสำหรับไอคอนต่างๆ ก็เขียนๆ ไปพบว่าเขียน JS นี่มันก็เพลินดีนะ แต่เขียนนาฬิกาเองมันวุ่นวายจัง หลายบรรทัด รก ไม่สวย ก็เลยไปหาเพิ่มเจอ JS module น่าสนใจชื่อ Moment.js ซึ่งใช้ง่าย ง่ายจะบ้า ก็เลยโหลดมาอย่างรวดเร็ว ในที่นี้ก็ขอยกตัวอย่างการดึงวันและเวลา (ที่เราใช้จริง) จาก Moment.js มาใช้

var momentNow = moment();
    document.getElementById('date-part').innerHTML = momentNow.format('dddd').substring(0, 3).toLowerCase() + ' | ' + momentNow.format('DD MMM YYYY');
    document.getElementById('time-part').innerHTML = momentNow.format('HHmmss');

โค้ดข้างบนนี้ก็จะได้วันที่ในฟอร์แมต thu | 29 Jun 2017 กับเวลาในฟอร์แมต 214938 มาแปะใส่เข้าไปใน div ที่มีไอดี date-part กับ time-part.. ง่ายเนาะ

เก็บรายละเอียด

จริงๆ ก็จบแล้วแหละ โค้ดแค่สองบรรทัดก็ได้ตามที่ต้องการละ แต่มานึกดูมันก็ขาดอะไรบางอย่างที่หน้า Newtab ให้เรามา ใช่แล้ว Most visited pages หายไป ก็เลยจัดการใส่เองซะเลย เพราะก็รู้อยู่แล้วว่าเว็บที่เข้าบ่อยของเราเองมีอะไรบ้าง จริงๆ ก็เอามาจากที่ Newtab เก็บไว้ให้นั่นแหละ 55 ขั้นนี้ได้ FontAwesome ช่วยไว้เยอะ เพราะใช้ไอคอนหมดเลย ใช้เองจำเองได้สบายมาก โค้ดส่วนนี้ก็แปะไว้ใน HTML ตามนี้ ตำแหน่งและสีก็ไปจัดการใน CSS ตามต้องการ

<a href="https://facebook.com">
  <i class="fa fa-facebook-official fa-3x fa-fw" aria-hidden="true"></i>
</a>
<a href="https://twitter.com">
  <i class="fa fa-twitter fa-3x fa-fw" aria-hidden="true"></i>
</a>
<a href="https://youtube.com">
  <i class="fa fa-youtube-play fa-3x fa-fw" aria-hidden="true"></i>
</a>
<a href="https://github.com">
  <i class="fa fa-github fa-3x fa-fw" aria-hidden="true"></i>
</a>
<a href="https://bitbucket.com">
  <i class="fa fa-bitbucket fa-3x fa-fw" aria-hidden="true"></i>
</a>
<a href="https://outlook.com">
  <i class="fa fa-envelope-o fa-3x fa-fw" aria-hidden="true"></i>
</a>
<a href="https://inbox.google.com">
  <i class="fa fa-envelope fa-3x fa-fw" aria-hidden="true"></i>
</a>
<a href="https://mangatail.com">
  <i class="fa fa-book fa-3x fa-fw" aria-hidden="true"></i>
</a>

จัดการใช้จริง

เขียนเสร็จก็ต้องเอามาใช้อะเนอะ ก็จัดการตั้งค่าตามที่ NewTab-Redirect บอกเพื่อลิงค์ไปยังไฟล์ที่เขียนตะกี้ ก็จะทำให้เราได้หน้า Newtab อย่างที่ต้องการแบบนี้

เป็นอันเสร็จสิ้นกระบวนการ ซึ่งโปรเจ็คต์สั้นนี้เราก็เก็บไว้บน Github repo ด้วยถ้าสนใจก็ลองไปแงะแกะเกาดูได้

ทิ้งท้าย

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

อ้อ แล้วก็มารู้ทีหลังอีกเรื่องคือ ที่เห็นบนคอมน้องฝึกงานจริงๆ แล้วน้องเขาไม่ได้เขียนเอง แต่โหลด Chrome extension มา ชื่อว่า Motivation เอ้อวุ้ย ทำไมไม่หาที่มีให้โหลดให้ดีๆ ก่อน เผื่อไม่ต้องเขียนเอง แต่ก็ช่างมันเห๊อะ 55555

ทิ้งท้ายอีกนิด จนถึงตอนนี้ใช้จริงมาได้ประมาณสองอาทิตย์ แต่เราก็ยังจำวันไม่ค่อยได้อยู่ดีอะ แค่เปิดดูได้เร็วขึ้น 5555555