[Chrome Extension] Part 1: Cách viết một extension chrome cơ bản

Chrome Extension là một công cụ rất mạnh giúp bạn mở rộng khả năng của trình duyệt, tự động hóa công việc và xây dựng các tiện ích nhỏ phục vụ cá nhân hoặc nội bộ công ty. Trong bài viết này, chúng ta sẽ tìm hiểu về các thành phần cơ bản của 1 Chrome Extension và viết một extension cơ bản Scroll To Top.

Chrome Extension là gì?

Chrome Extension là một tiện ích mở rộng cho trình duyệt Google Chrome, cho phép bạn thay đổi / đọc nội dung trang web; thêm nút bấm, popup; tự động hoá thao tác; gọi API, lưu local storage thông qua một số API JavaScript và hiển thị trên Chrome. Extension thường được viết bằng: JavaScript, HTML, CSS.

Cấu trúc thư mục Chrome Extension cơ bản

Một Chrome Extension tối thiểu sẽ có cấu trúc như sau:

scroll-to-top-extension/
├── manifest.json // file cấu hình bắt
├── scroll-to-top.js // xử lý logic

Khai báo manifest.json (Manifest V3)

Chrome hiện sử dụng Manifest Version 3.

{
  "manifest_version": 3,
  "name": "Scroll To Top Button",
  "version": "1.0",
  "description": "Hiển thị nút cuộn lên đầu trang",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scroll-to-top.js"]
    }
  ]
}

• content_scripts: inject JS vào trang web
• <all_urls>: chạy trên mọi website

Tạo nút và inject vào trang web

File content.js

(function () {
  // Tránh inject trùng
  if (document.getElementById('scroll-to-top-btn')) return;

  const button = document.createElement('button');
  button.id = 'scroll-to-top-btn';
  button.innerText = '⬆';
  button.style.display = 'none';

  // Style nút
  Object.assign(button.style, {
    position: 'fixed',
    bottom: '24px',
    right: '24px',
    width: '48px',
    height: '48px',
    borderRadius: '50%',
    border: 'none',
    cursor: 'pointer',
    fontSize: '20px',
    backgroundColor: '#2563eb',
    color: '#fff',
    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
    zIndex: '9999'
  });

  window.addEventListener('scroll', () => {
    button.style.display = window.scrollY > 300 ? 'block' : 'none';
  });

  // Click → scroll to top
  button.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });

  document.body.appendChild(button);
})();

Load Extension vào Chrome

• Mở Google Chrome
• Truy cập chrome://extensions
• Bật chế độ dành cho nhà phát triển

• Chọn đóng gói tiện ích -> chọn folder chứa extension đã viết

• Chọn tải tiện ích đã giải nén -> chọn folder chứa extension đã viết

• Chờ extension tải lên 👉 Mở bất kỳ trang web dài nào → nút xuất hiện 🎉

Bạn có thể phát triển Extension theo hướng nào?

• Tự động dịch nội dung
• Tool hỗ trợ dev
• Auto fill form
• Extension nội bộ cho công ty
• Tích hợp API bên thứ ba

Tổng kết

Chrome Extension là một mảnh ghép cực kỳ hữu ích cho developer. Chỉ cần nắm vững Manifest, js, HTML, CSS là bạn đã có thể xây dựng những tiện ích rất “xịn” cho riêng mình