Chrome Web Apps Setting UI

Chrome Web Apps

หน้าของ Web Apps ใน Google Chrome ยังเปลี่ยนหน้าตาไปเรื่อย ผมใช้ dev channel อัพเดตทีก็จะเปลี่ยนที แต่ก่อนจะเป็น Pin Tap เล็กๆ ไม่มี Address bar จากนั้นปรับมาเป็น panel tap เหมือนเก่า แล้วก็เป็น Pin Tab+Address bar ลองหาดูจากโพสเก่าๆที่เขียนเกี่ยวกับ Chrome Web Apps

ตัวล่าสุด V.8.0.552.5 dev รวมไว้หมดเลย อยากได้อันไหนตั้งเอง เพิ่ม Full Screen มาอีกอัน คิดว่ามันก็ยังต้องปรับเปลี่ยนไปเรื่อยๆอีกอยู่ดี แต่ผมชอบอันนี้นะ

แก้ปัญหาไอคอน Web Apps ใน Chrome หายไป

ไอคอน web apps หายไป

Google Chrome Dev. ตัวล่าสุด 6.0.490.1 dev หลังจากอัพเดตแล้วพบว่า web apps ของเราที่เคยทำไว้ ไอคอนหายหมด เหลือตัวเดียวคือ Chrome Web Store ที่มาพร้อมกับโปรแกรม ดูใน discussion board ก็พบว่ามีคนอื่นก็เจอปัญหานี้เหมือนกัน วิธีแก้ปัญหาของคนอื่นที่แนะนำไว้ เช่น reinstall ทั้ง web apps และ Chrome ใหม่ พบว่าไม่เกิดอะไรขึ้นปัญหาเดิมยังอยู่ เลยลองถอยกลับไปใช้ Chrome beta ปรากฏว่า ไอคอนกลับมาให้เห็นอีกครั้ง เสียดายหน้า web apps ของเวอร์ชั่น dev มันเพิ่ม address bar เข้ามาด้วย เดี๋ยวต้องรอดูว่าคนอื่นจะมีวิธีไหนอีก ถ้าใช้ได้ค่อยกับไปใช้ Chrome dev. อีกครั้ง

if you install Google Chrome Beta channel the icons should become visible again.

วิธีทำ Chrome Web Apps แบบ crx file

Google Chrome Web Apps

ช่วงนี้ยังสนุกอยู่กับ Chrome web apps เลยเขียนต่อเนื่องกันมา ใครยังไม่ได้อ่านตอนเก่าๆไปอ่านได้ที่ ตอนที่ 1, ตอนที่ 2 พอเขียนเกี่ยวกับเรื่องนี้พบว่า โปรแกรมที่เป็น web-base มันมีเยอะมาก ครอบคุมการใช้งานเกือบหมด อาจจจะบางอันที่ต้องการประสิทธิภาพสูงหน่อยที่โปรแกรมบนเว็บ อาจจะไม่เพียงพอ โปรแกรมบนเว็บ พวกทำงานบนกลุ่มเมฆ มันมาแน่นอน อีกอย่างก็คือรู้สึกว่า Google ฉลาดที่จะรวมมันไว้ที่ Web App Store เกมที่อยู่บนเว็บแบบเจ๋งๆก็มีเยอะ ตัวอย่างเช่น Star Wars Lego เป็นเกม 3D ที่เล่นได้เพลินดี เข้าสู่ขั้นตอนการทำ Chrome web apps เลยดีกว่า

ขั้นตอนการทำ Chrome web apps

ตัวอย่างนี้ผมทดลองสร้าง web app ชื่อ Office ซึ่งใช้เรียกการใช้งาน Online Office ของ Microsoft

  1. เตรียมไฟล์เหล่านี้ไว้ในโฟล์เดอร์เดียวกัน(ตั้งชื่อตามต้องการ ผมตั้งชื่อว่า Office_app) ได้แก่ รูปไอคอนของ web apps อย่างน้อยสองอัน(ได้มากกว่าหนึ่ง) คือ 24×24 px และ 128×128 px กับไฟล์ manifest.json ดาวน์โหลดตัวอย่าง
  2. อธิบาย โค้ด manifest.json
    [code lang="js"]
    {
       "app": {
          "launch": {
             "web_url": "https://office.live.com/"  /* ส่วนนี้คือ URL ของ app */
          },
          "urls": [ "*://office.live.com/", "*://office.microsoft.com/en-us/web-apps/redir/XT101857758.aspx"] /* ส่วนนี้คือ URL ที่เมื่อเรียกใช้ให้เรียก app ที่อยู่ด้านบนมาใช้ ใส่ได้หลายอัน */
       },
       "icons": {
          "128": "128.png",
          "24": "24.png"
       }, // รูป 128 px จะเป็น icons ที่อยู่ใน new tab และ 24 px จะเป็นไอคอนเล็กบน tab ของ app ที่เรียกใช้งาน
       "name": "Office", // ชื่อ app
       "version": "1" //เวอร์ชั่น app
    }
    // ถ้าจะก๊อบโค้ดนี้ไปใช้ ควรลบคอมเม้นออก เอาโค้ดในไฟล์ที่แนบมาดีกว่า
    [/code]
  3. ที่จริงเพียง 3 ไฟล์นี้ก็แจกให้คนอื่นติดตั้งได้แล้ว ด้วยวิธีการ unpack ไปดูวิธีที่ติดตั้งที่นี้ แต่ความตั้งใจของเราคือสร้างแบบ crx file ที่สามารถ drag & drop เข้า Chrome ได้เลย
  4. เมื่อไฟล์พร้อมแล้ว เข้าไปที่ Extension >> Pack extension
    Pack extension

    Extension root directory : browse ไปที่ตำแน่งที่อยู่ของโฟล์เดอร์ Office_app ที่เก็บไฟล์ 3 ตัวที่สร้างไว้
    Private key file : ในครั้งแรกที่สร้าง web app ให้ว่างไว้
    แล้วก็คลิกโอเค

  5. เสร็จแล้วเราจะได้ 2 ไฟล์ Office_app.crx กับ Office_app.pem
    Office_app.crx เป็นไฟล์ที่พร้อมติดตั้ง หรือจะแชร์ให้คนอื่นได้แล้ว
    Office_app.pem เป็นไฟล์จะใช้ใส่ช่อง Private key file ตามข้อ 4 เมื่อจะ Pack Extension ใหม่หลังจากมีการอัพเดต web app นั้น ซึ่งเมื่อเอาไฟล์ .crx ใหม่ที่ได้ ไปติดตั้งจะเป็นการอัพเดต web app เดิม ถ้าไม่ใส่ Private key เมื่อนำไปติดตั้ง Chrome จะฟ้องว่ามีโปรแกรมนี้อยู่แล้ว ต้องถอนออกก่อน ลงทับไม่ได้
  6. ดูตัวอย่างที่ผมลองทำไว้ มีทั้งที่ทำเอง และเอาของคนอื่นมาโมดิไฟ รวม Chrome Web Apps พร้อมติดตั้ง

ปล. ไฟล์ .crx ใช้ โปรแกรม unzip เปิดดูได้

อ้างอิง : Google Chrome Extension-Creating a package

Exit mobile version