วิธีทำ-chrome-extension

วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store

วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store



วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store
Google Chrome Extension คือส่วนเสริมเพิ่มความสามารถที่เฉพาะเจาะจงสำหรับโปรแกรมเว็บเบราว์เซอร์ยอดนิยมของ Google อย่าง Chrome เราสามารถพัฒนา extension หรือส่วนเสริมนี้สำหรับใช้งานเอง หรืออัพโหลดขึ้น Chrome web store สำหรับจำหน่ายหรือแจกจ่ายฟรี



ในขั้นตอนของการพัฒนา chrome extension นั้น จะแยกเป็น 2 ส่วนหลัก ๆ คือ

  • 1. Unpack Extension จะเป็นส่วนเสริมที่เราซึ่งเป็นผู้พัฒนาจะสามารถเปิดใช้งานได้บนเครื่องได้ทันที โดยไม่ได้อัพโหลดขึ้นไปเผยแพร่ใน Chrome web store
  • 2. Pack Extension จะเป็นส่วนเสริมที่อัพโหลดขึ้นไปเผยแพร่บน Chrome web store และคนอื่นสามารถติดตั้งใช้งาน extension ที่เราพัฒนาได้ในทุก ๆ เครื่องคอมพิวเตอร์ที่ใช้ Chrome browser


เริ่มต้นสร้าง Google Chrome Extension

  • 1. สร้างโฟลเด้อ chrome_hello_extension
    จะเป็นโฟลเด้อสำหรับเก็บข้อมูลทั้งหมดของ extension ตัวอย่างเช่น ไฟล์ .json, javascript และไฟล์รูปภาพ เป็นต้น


    โครงสร้างภายในโฟลเด้อจะประกอบไปด้วยไฟล์ .json .js และ icon รูปภาพ
    วิธีทำ-chrome-extension


  • 2. สร้างไฟล์ manifest.json
    manifest.json จะทำหน้าที่ในการกำหนดค่าพื้นฐาน ร้องขอ permission ตำแหน่งของไอคอนที่จะให้แสดง เรียกได้ว่าเป็นการกำหนดรายละเอียดต่าง ๆ ของส่วนเสริมที่เราจะพัฒนา


    ตัวอย่างไฟล์ manifest.json


  • 3. สร้างไฟล์ background.js
    จะเห็นว่าในไฟล์ manifest.json เราได้กำหนดให้มีการเรียกใช้งานไฟล์ background.js เพราะฉะนั้นเราจำเป็นจะต้องสร้างไฟล์ javascript เพื่อมารองรับการเขียนโค๊ดการทำงานหลักของ extension


    ตัวอย่างไฟล์ baackground.js

    จากโค๊ดตัวอย่างด้านบนจะเป็นการกำหนดให้เปิดหน้าต่างเบราว์เซอร์ขนาด 400x600px ทันทีเมื่อมีการเปิดใช้งาน extension


  • 4. สร้างรูปไอคอนสำหรับ Extension
    จะสังเกตุว่าในไฟล์ manifest.json เราได้กำหนดไอคอนไว้ 2 ขนาดคือ 16×16 และ 128×128

    ให้สร้างไฟล์ .png ทั้ง 2 ขนาดและวางไฟล์ในโฟลเด้อ chrome_hello_extension เพียงเท่านี้ส่วนเสริมของเราก็พร้อมติดตั้งและใช้งานใน Google Chrome Browser แล้วครับ


การติดตั้งและใช้งาน

  • ติดตั้งแบบ Unpacked Extension ( ใช้งานบนเครื่อง )
    เปิด Google Chrome Browser และพิมพ์ chrome://extensions/ มองหาคำว่า Developer Mode ให้ติ๊กถูก จะปรากฏปุ่มเมนูชื่อว่า Load Unpacked Extension ให้คลิกและเลือกไปที่โฟลเด้อ chrome_hello_extension ที่เราได้สร้างไว้ในขั้นตอนก่อนหน้านี้ ถ้าไม่มีอะไรผิดพลาดส่วนเสริมของเราก็จะถูกติดตั้งเรียบร้อยแล้วให้รองทดสอบโดยการกดปุ่ม Launch


    วิธีทำ-chrome-extension

  • ติดตั้งแบบ Pack Extension ( อัพโหลดขึ้น Chrome web store )
    เหมือนกันครับไปที่ chrome://extensions/ มองหาคำว่า Developer Mode ติ๊กถูก แต่คราวนี้ให้เลือกไปที่ Pack Extension จะปรากฏ popup ขึ้นมาให้เราใส่ข้อมูล 2 ช่อง คือ
    Extension Root Directory ให้เราเลือกไปที่โฟลเด้อส่วนเสริมที่เราสร้างไว้คือ chrome_hello_extension
    Private Key File สำหรับการสร้างส่วนเสริมครั้งแรกให้เราละไว้ ไม่ต้องเลือกอะไร


    วิธีทำ-chrome-extension


    หลังจากที่เราเลือกโฟลเด้อของส่วนเสริมเรียบร้อยแล้วให้กดปุ่ม Pack Extension ถ้าไม่มีอะไรผิดพลาด โปรแกรม chrome จะทำการ generate ไฟล์ 2 ไฟล์ให้เราคือ chrome_hello_extension.pem และ chrome_hello_extension.crx เพียงเท่านี้ extension ของเราก็พร้อมที่จะอัพโหลดขึ้น chrome web store แล้ว


การอัพโหลดขึ้น Chrome web store

วิธีการอัพโหลดขึ้น chrome web store ก็ไม่มีอะไรยุ่งยากครับ ให้เราทำการ rename ไฟล์ chrome_hello_extension.pem เปลี่ยนชื่อเป็น key.pem และนำไปวางไว้ในโฟลเด้อหลักชั้นแรกของส่วนเสริม จากนั้นให้ทำการ zip โฟลเด้อ และไปที่หน้าเว็บไซต์สำหรับอัพโหลดคือ https://chrome.google.com/webstore/developer/dashboard
ส่วนไฟล์ .crx ไม่ต้องอัพโหลดขึ้นไปนะครับ


วิธีทำ-chrome-extension


หลังจากอัพโหลดเสร็จแล้ว จำเป็นจะต้องกรอกข้อมูลต่าง ๆ เช่น รายละเอียดคุณสมบัติของแอพ รูปภาพประกอบ ไอคอน ลิงค์วิธีการใช้งานใน youtube เป็นแอพฟรีหรือไม่ อนุญาติในประเทศอะไรบ้าง หลักการเดียวกันกับการอัพโหลดแอพพลิเคชั่นขึ้นไปบน Google Play Store ไม่ได้มีขั้นตอนยุ่งยากอะไร เพียงแต่ต้องกรอกข้อมูลเยอะพอสมควร หาก extension ผ่านการตรวจสอบเรียบร้อยแล้ว ก็จะสามารถใช้งานได้ทันที ใช้ระยะเวลาในการตรวจสอบประมาณ 24 ชั่วโมง

กระทู้ใกล้เคียง

เว็บไซต์นี้ ทำจากอะไร วิธีดูว่าเว็บไซต์ ทำจากภาษา ... เว็บไซต์นี้ ทำจากอะไร วิธีดูว่าเว็บไซต์ ทำจากภาษา ปลั๊กอิน เฟรมเวิร์ค อะไร เว็บไซต์นี้ ทำจากอะไร วิธีดูว่าเว็บไซต์ ทำจากภาษา ปลั๊กอิน เฟรมเวิร์ค อะ...
วิธีทำ URL redirect โดยใช้ .htaccess และคำสั่งอื่น... วิธีทำ URL redirect โดยใช้ .htaccess และคำสั่งอื่น ๆ วิธีทำ URL redirect โดยใช้ .htaccess และคำสั่งอื่น ๆ โดยปกติเราจะสามารถเข้าชมเว็บไซต์ได้โดย...
วิธีติดตั้ง Facebook messenger plugin สำหรับเว็บไซ... วิธีติดตั้ง Facebook messenger plugin สำหรับเว็บไซต์ วิธีติดตั้ง facebook messenger plugin สำหรับเว็บไซต์ facebook messenger plugin สำหรับเว็บไซ...
ระบบ Machine Learning แนวคิดพื้นฐานการทำ Website ใ... ระบบ Machine Learning แนวคิดพื้นฐานการทำ Website ให้คิดเองได้ ระบบ Machine Learning แนวคิดพื้นฐานการทำ Website ให้คิดเองได้ Machine Learning ในท...