เริ่มต้นใช้งาน

ส่วนขยายประกอบด้วยองค์ประกอบที่แตกต่างกันแต่สอดคล้องกัน คอมโพเนนต์อาจประกอบด้วยสคริปต์พื้นหลัง สคริปต์เนื้อหา หน้าตัวเลือก องค์ประกอบของ UI และไฟล์ตรรกะต่างๆ คอมโพเนนต์ของส่วนขยายสร้างขึ้นด้วยเทคโนโลยีการพัฒนาเว็บ ได้แก่ HTML, CSS และ JavaScript คอมโพเนนต์ของส่วนขยายจะขึ้นอยู่กับฟังก์ชันการทำงานของส่วนขยายและอาจไม่จำเป็นต้องใช้ทุกตัวเลือก

บทแนะนำนี้จะสร้างส่วนขยายที่ให้ผู้ใช้เปลี่ยนสีพื้นหลังของหน้าใดก็ได้ใน developer.chrome.com โดยจะใช้คอมโพเนนต์หลักหลายอย่างเพื่อสาธิตความสัมพันธ์

หากต้องการเริ่มต้น ให้สร้างไดเรกทอรีใหม่เพื่อเก็บไฟล์ส่วนขยาย

ดูส่วนขยายที่เสร็จสมบูรณ์แล้วได้ที่นี่

สร้างไฟล์ Manifest

ส่วนขยายจะเริ่มจากไฟล์ Manifest สร้างไฟล์ชื่อ manifest.json แล้วใส่โค้ดต่อไปนี้

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}

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

  1. เปิดหน้าการจัดการส่วนขยายโดยไปที่ chrome://extensions
    • นอกจากนี้ คุณยังเปิดหน้าการจัดการส่วนขยายได้โดยคลิกเมนู Chrome จากนั้นวางเมาส์เหนือเครื่องมือเพิ่มเติม แล้วเลือกส่วนขยาย
  2. เปิดใช้โหมดนักพัฒนาซอฟต์แวร์โดยคลิกสวิตช์เปิด/ปิดข้างโหมดนักพัฒนาซอฟต์แวร์
  3. คลิกปุ่มยกเลิกการโหลด และเลือกไดเรกทอรีของส่วนขยาย

โหลดส่วนขยาย

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

เพิ่มวิธีการ

แม้ว่าจะติดตั้งส่วนขยายนี้แล้ว แต่ก็ไม่มีวิธีการใดๆ แนะนำสคริปต์พื้นหลัง โดยการสร้างไฟล์ชื่อ background.js และวางไว้ในไดเรกทอรีของส่วนขยาย

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

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

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

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

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
});

ต้องลงทะเบียน API ส่วนใหญ่ รวมถึง storage API ในช่อง "permissions" ในไฟล์ Manifest เพื่อให้ส่วนขยายใช้งานได้

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

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

ตรวจสอบมุมมอง

คลิกที่ลิงก์เพื่อดูบันทึกคอนโซลของสคริปต์พื้นหลัง "The color is green."

แนะนำอินเทอร์เฟซผู้ใช้

ส่วนขยายอาจมีอินเทอร์เฟซผู้ใช้หลายรูปแบบ แต่รูปแบบนี้จะใช้ป๊อปอัป สร้างและเพิ่มไฟล์ชื่อ popup.html ในไดเรกทอรี ส่วนขยายนี้ใช้ปุ่มเพื่อเปลี่ยนสีพื้นหลัง

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

ไฟล์นี้ต้องได้รับการกำหนดเป็นป๊อปอัปในไฟล์ Manifest ในส่วน page_action เช่นเดียวกับสคริปต์พื้นหลัง

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

การกำหนดไอคอนแถบเครื่องมือจะรวมอยู่ใน page_action ในช่อง default_icons ด้วย ดาวน์โหลดโฟลเดอร์รูปภาพที่นี่ แตกไฟล์ แล้ววางไว้ในไดเรกทอรีของส่วนขยาย อัปเดตไฟล์ Manifest เพื่อให้ส่วนขยายทราบวิธีใช้รูปภาพ

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "manifest_version": 2
}

ส่วนขยายจะแสดงรูปภาพในหน้าการจัดการส่วนขยาย คำเตือนเกี่ยวกับสิทธิ์ และไอคอน Fav ด้วย รูปภาพเหล่านี้จะระบุไว้ในไฟล์ Manifest ในส่วน icons

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

หากมีการโหลดส่วนขยายอีกครั้งในขั้นตอนนี้ ส่วนขยายจะมีไอคอนสีเทา แต่จะไม่มีความแตกต่างของฟังก์ชันการทำงาน เนื่องจากมีการประกาศ page_action ในไฟล์ Manifest ส่วนขยายจึงจะบอกเบราว์เซอร์ว่าผู้ใช้โต้ตอบกับ popup.html ได้เมื่อใด

เพิ่มกฎที่ประกาศลงในสคริปต์เบื้องหลังด้วย declarativeContent API ภายในเหตุการณ์ Listener runtime.onInstalled

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

ส่วนขยายจะต้องมีสิทธิ์เข้าถึง declarativeContent API ในไฟล์ Manifest

{
  "name": "Getting Started Example",
...
  "permissions": ["declarativeContent", "storage"],
...
}

ป๊อปอัป

ตอนนี้เบราว์เซอร์จะแสดงไอคอนการทำงานแบบหน้าสีในแถบเครื่องมือของเบราว์เซอร์เมื่อผู้ใช้ไปยัง URL ที่มี "developer.chrome.com" เมื่อไอคอนเป็นแบบสีเต็ม ผู้ใช้สามารถคลิกไอคอนเพื่อดู popup.html ได้

ขั้นตอนสุดท้ายสำหรับ UI แบบป๊อปอัปคือการเพิ่มสีให้กับปุ่ม สร้างและเพิ่มไฟล์ชื่อ popup.js ด้วยรหัสต่อไปนี้ในไดเรกทอรีส่วนขยาย

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

โค้ดนี้จะดึงปุ่มจาก popup.html และขอค่าสีจากพื้นที่เก็บข้อมูล จากนั้นจะใช้สีเป็นพื้นหลังของปุ่ม ใส่แท็กสคริปต์ไปยัง popup.js ใน popup.html

<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

โหลดส่วนขยายซ้ำเพื่อดูปุ่มสีเขียว

ตรรกะของเลเยอร์

ตอนนี้ส่วนขยายทราบแล้วว่าผู้ใช้ควรพร้อมใส่ป๊อปอัปได้ใน developer.chrome.com และจะแสดงปุ่มสี แต่ต้องใช้ตรรกะในการโต้ตอบของผู้ใช้เพิ่มเติม อัปเดต popup.js ให้รวมโค้ดต่อไปนี้

let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

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

ไฟล์ Manifest จะต้องมีสิทธิ์ activeTab เพื่ออนุญาตให้ส่วนขยายเข้าถึง tabs API ได้ชั่วคราว การทำเช่นนี้จะทำให้ส่วนขยายสามารถเรียกใช้ tabs.executeScript

{
  "name": "Getting Started Example",
...
  "permissions": ["activeTab", "declarativeContent", "storage"],
...
}

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

ให้ตัวเลือกแก่ผู้ใช้

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

เริ่มต้นด้วยการสร้างไฟล์ในไดเรกทอรีชื่อ options.html และใส่โค้ดต่อไปนี้

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv">
    </div>
    <div>
      <p>Choose a different background color!</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

จากนั้นลงทะเบียนหน้าตัวเลือกในไฟล์ Manifest

{
  "name": "Getting Started Example",
  ...
  "options_page": "options.html",
  ...
  "manifest_version": 2
}

โหลดส่วนขยายซ้ำและคลิกรายละเอียด

ตรวจสอบมุมมอง

เลื่อนลงในหน้ารายละเอียดและเลือกตัวเลือกส่วนขยายเพื่อดูหน้าตัวเลือก แม้ว่าตอนนี้หน้าตัวเลือกจะไม่แสดงก็ตาม

ตัวเลือกส่วนขยาย

ขั้นตอนสุดท้ายคือการเพิ่มตรรกะตัวเลือก สร้างไฟล์ชื่อ options.js ในไดเรกทอรีส่วนขยายด้วยรหัสต่อไปนี้

let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function() {
      chrome.storage.sync.set({color: item}, function() {
        console.log('color is ' + item);
      })
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);

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

ดำเนินการขั้นตอนถัดไป

ยินดีด้วย ขณะนี้ไดเรกทอรีจะมีส่วนขยาย Chrome ที่ใช้งานได้อย่างสมบูรณ์ แม้ว่าจะเรียบง่าย

ขั้นตอนถัดไปคือ

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