Bài viết này sẽ hướng dẫn chi tiết từng bước để bạn có thể tạo ra một extension Chrome cơ bản.
Chúng ta sẽ cùng nhau tạo một extension đơn giản hiển thị câu danh ngôn truyền động lực bằng tiếng Việt.
Xây Dựng Extension "Quote today”
Bước 1: Tạo Thư Mục Dự Án
Trên máy tính của bạn, hãy tạo một thư mục mới và đặt tên cho nó, ví dụ: quote-today. Tất cả các tệp của extension sẽ nằm trong thư mục này.
mkdir quote-today && cd quote-today
Bước 2: Tạo manifest.json
Trong thư mục quote-today, tạo một tệp mới và đặt tên là manifest.json. Mở tệp này bằng trình soạn thảo văn bản và dán nội dung sau vào:
{ "manifest_version": 3, "name": "Danh Ngôn Truyền Động Lực", "version": "1.0", "description": "Hiển thị câu danh ngôn truyền động lực bằng tiếng Việt mỗi khi bạn nhấn vào extension", "icons": { "16": "images/icon16.png", "48": "images/icon32.png", "128": "images/icon128.png" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png" } }, "permissions": []
}
Giải thích các trường trong manifest.json:
"manifest_version": 3: Chỉ định phiên bản của định dạng tệp kê khai. Hiện tại, Manifest V3 là phiên bản mới nhất và được khuyến nghị."name": Tên của extension sẽ hiển thị trên Cửa hàng Chrome trực tuyến và trong trình duyệt."version": Phiên bản của extension (ví dụ: "1.0", "1.0.1")."description": Mô tả ngắn gọn về chức năng của extension."icons": Khai báo các biểu tượng cho extension ở các kích thước khác nhau. Trình duyệt sẽ sử dụng các biểu tượng này ở nhiều nơi (ví dụ: trang quản lý tiện ích, Cửa hàng Chrome)."action": Xác định hành vi của biểu tượng extension trên thanh công cụ."default_popup": "popup.html": Chỉ định tệp HTML sẽ được hiển thị khi người dùng nhấp vào biểu tượng extension."default_icon": Các biểu tượng sẽ được sử dụng cho thanh công cụ.
Bước 3: Tạo giao diện người dùng popup.html
Tiếp theo, trong cùng thư mục quote-today, tạo một tệp mới tên là popup.html. Đây sẽ là nội dung hiển thị khi bạn nhấp vào biểu tượng extension. Dán mã HTML sau vào tệp:
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>Danh Ngôn Truyền Động Lực</title> <style> body { width: 400px; min-height: 250px; font-family: 'Roboto', Arial, sans-serif; padding: 15px; display: flex; flex-direction: column; justify-content: center; background-color: #f7f9fc; color: #333; } .container { text-align: center; background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .quote { font-size: 18px; line-height: 1.6; margin-bottom: 15px; font-style: italic; } .author { font-weight: bold; font-size: 16px; color: #2c6aa0; } button { margin-top: 20px; padding: 10px 20px; background-color: #4285f4; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; transition: background-color 0.3s; } button:hover { background-color: #3367d6; } .quote-mark { font-size: 28px; color: #ddd; } </style>
</head>
<body> <div class="container"> <div class="quote-mark">"</div> <div class="quote" id="quote-text"></div> <div class="author" id="quote-author"></div> <div class="quote-mark">"</div> <button id="new-quote">Danh Ngôn Mới</button> </div> <script src="popup.js"></script>
</body>
</html>
Bạn có thể tùy chỉnh nội dung và CSS trong tệp này theo ý muốn.
Bước 4: Bổ xung xử lý logic cho tiện ích
Tạo tệp popup.js và liên kết nó trong popup.html bằng thẻ <script src="popup.js"></script>.
document.addEventListener('DOMContentLoaded', function() { // Mảng chứa các câu danh ngôn và tác giả const quotes = [ { text: "Thành công không phải là chìa khóa mở cánh cửa hạnh phúc. Hạnh phúc là chìa khóa mở cánh cửa thành công. Nếu bạn yêu thích điều bạn đang làm, bạn sẽ thành công.", author: "Albert Schweitzer" }, { text: "Hãy là sự thay đổi mà bạn muốn thấy trên thế giới.", author: "Mahatma Gandhi" }, { text: "Đừng đánh giá mỗi ngày qua vụ mùa bạn gặt được, mà hãy đánh giá qua những hạt giống bạn đã gieo.", author: "Robert Louis Stevenson" }, { text: "Chỉ khi bạn dám thất bại nhiều lần thì bạn mới có thể thành công.", author: "Malcolm X" }, { text: "Tôi không thất bại. Tôi chỉ tìm thấy 10.000 cách không hoạt động.", author: "Thomas Edison" }, { text: "Nếu bạn không thể bay thì hãy chạy, nếu bạn không thể chạy thì hãy đi, nếu bạn không thể đi thì hãy bò, nhưng bất cứ điều gì bạn làm, bạn phải tiếp tục tiến về phía trước.", author: "Martin Luther King Jr." }, { text: "Cuộc sống không phải là chờ đợi những cơn bão đi qua, mà là học cách nhảy múa dưới mưa.", author: "Vivian Greene" }, { text: "Học hỏi từ ngày hôm qua, sống cho ngày hôm nay, hy vọng cho ngày mai.", author: "Albert Einstein" }, { text: "Kẻ nào nghĩ rằng họ quá nhỏ bé không thể tạo nên sự khác biệt, chưa bao giờ ngủ cùng một con muỗi.", author: "Dalai Lama" }, { text: "Niềm tin vào bản thân là bí mật đầu tiên của thành công.", author: "Ralph Waldo Emerson" }, { text: "Thời gian và sức khỏe là hai tài sản quý giá mà chúng ta không nhận ra cho đến khi chúng đã mất đi.", author: "Denis Waitley" }, { text: "Có hai cách để sống cuộc đời của bạn. Một là nghĩ rằng không có gì là phép màu. Cách còn lại là nghĩ rằng mọi thứ đều là phép màu.", author: "Albert Einstein" }, { text: "Đừng để hôm qua chiếm quá nhiều thời gian của hôm nay.", author: "Will Rogers" }, { text: "Điều duy nhất cản trở chúng ta chính là giới hạn từ chính bản thân mình.", author: "Muhammad Ali" }, { text: "Tôi không quan tâm bạn giàu hay nghèo. Tôi muốn biết liệu bạn có dám mơ ước thực hiện những ước mơ trong tim mình hay không.", author: "Oriah Mountain Dreamer" }, { text: "Người bi quan thấy khó khăn trong mọi cơ hội; người lạc quan thấy cơ hội trong mọi khó khăn.", author: "Winston Churchill" }, { text: "Hãy sống như thể bạn sẽ chết ngày mai. Hãy học như thể bạn sẽ sống mãi mãi.", author: "Gandhi" }, { text: "Tôi đã học được rằng lòng can đảm không phải là sự vắng mặt của nỗi sợ hãi, mà là chiến thắng trước nó.", author: "Nelson Mandela" }, { text: "Một người có thể thành công ở bất cứ điều gì mà người đó nhiệt tình theo đuổi.", author: "Benjamin Franklin" }, { text: "Trí tuệ không phải là sản phẩm của việc học hành, mà là của nỗ lực suốt đời để có được nó.", author: "Albert Einstein" }, { text: "Thước đo của cuộc sống không phải thời gian của nó, mà là cách bạn sử dụng nó.", author: "Richard Bach" }, { text: "Hãy đi đến nơi không có con đường và để lại dấu chân của bạn.", author: "Ralph Waldo Emerson" }, { text: "Nếu bạn muốn thay đổi thế giới, hãy bắt đầu bằng việc dọn giường của mình mỗi ngày.", author: "William H. McRaven" }, { text: "Không phải vì mọi thứ khó khăn mà chúng ta không dám làm, mà chính vì chúng ta không dám làm nên mọi thứ trở nên khó khăn.", author: "Seneca" } ]; // Lấy các phần tử DOM const quoteTextElement = document.getElementById('quote-text'); const quoteAuthorElement = document.getElementById('quote-author'); const newQuoteButton = document.getElementById('new-quote'); // Hàm hiển thị danh ngôn ngẫu nhiên function displayRandomQuote() { const randomIndex = Math.floor(Math.random() * quotes.length); const quote = quotes[randomIndex]; quoteTextElement.textContent = quote.text; quoteAuthorElement.textContent = "- " + quote.author; } // Hiển thị một danh ngôn khi mở popup displayRandomQuote(); // Thêm sự kiện click cho nút "Danh Ngôn Mới" newQuoteButton.addEventListener('click', displayRandomQuote);
});
Bước 5: Chuẩn Bị Biểu Tượng (Icons)
-
Trong thư mục
quote-today, tạo một thư mục con tên làimages. -
Bạn cần chuẩn bị một vài biểu tượng với các kích thước khác nhau.
icon16.png(16x16 pixels)icon48.png(48x48 pixels)icon128.png(128x128 pixels)
Có thể lựa chọn tài về từ https://www.flaticon.com
Lúc này, cấu trúc thư mục của bạn sẽ trông như sau:
quote-today/
├── manifest.json
├── popup.html
├── popup.js
└── images/ ├── icon16.png ├── icon48.png └── icon128.png
Cài đặt Extension
Giờ là lúc xem thành quả của bạn!
- Mở Trình duyệt Chrome.
- Truy cập trang quản lý tiện ích: Gõ
chrome://extensionsvào thanh địa chỉ và nhấn Enter.
- Bật "Chế độ nhà phát triển" (Developer mode): Tìm công tắc này ở góc trên bên phải của trang và bật nó lên.
- Tải tiện ích đã giải nén: Sau khi bật Chế độ nhà phát triển, bạn sẽ thấy các nút mới xuất hiện. Nhấp vào nút "Tải tiện ích đã giải nén" (Load unpacked).
- Chọn thư mục dự án: Trong hộp thoại mở ra, duyệt đến thư mục
quote-todaymà bạn đã tạo và chọn nó.
- Kiểm tra: Nếu không có lỗi gì, extension Quote today của bạn sẽ xuất hiện trong danh sách các tiện ích.
Bạn cũng sẽ thấy biểu tượng của nó trên thanh công cụ của Chrome.
Bạn đã xây dựng thành công extension Chrome đầu tiên của mình. Đây chỉ là khởi đầu, bạn có thể mở rộng nó với nhiều tính năng hơn:
- Viết mã JavaScript để thêm các nút bấm, tương tác, hoặc lấy thông tin từ người dùng.
- Tìm hiểu về Content Scripts: Đây là các tệp JavaScript có thể chạy trực tiếp trên các trang web mà người dùng truy cập, cho phép bạn đọc hoặc thay đổi nội dung của chúng.
- Khám phá Background Scripts (Service Workers trong Manifest V3): Đây là các tập lệnh chạy ngầm, quản lý các tác vụ nền và sự kiện của trình duyệt ngay cả khi popup không mở.
- Sử dụng các Chrome API khác: Chrome cung cấp rất nhiều API mạnh mẽ để bạn tương tác với tab, dấu trang, lịch sử, thông báo, lưu trữ dữ liệu, và nhiều hơn nữa.
- Tham khảo tài liệu chính thức: Trang Chrome for Developers (Extensions) là nguồn tài liệu tốt nhất để bạn tìm hiểu sâu hơn.
Lời Kết
Việc xây dựng extension Chrome là một hành trình thú vị và đầy sáng tạo. Bắt đầu từ những bước cơ bản này, bạn có thể dần dần tạo ra những công cụ mạnh mẽ, cá nhân hóa trải nghiệm duyệt web của mình và thậm chí chia sẻ chúng với cộng đồng. Đừng ngần ngại thử nghiệm và khám phá!
Nếu hứng thú sao không thử bắt đầu tìm hiểu và tạo riêng cho bản thân một vài tiện ích nhỉ! Một số ứng dụng Extension đơn giản hữu ích bạn có thể lựa chọn để thực hành:
- Image Downloader (Tải ảnh hàng loạt): Cho phép người dùng tải xuống tất cả hình ảnh trên một trang web chỉ với một cú click.
- Clipboard History: Lưu lại lịch sử các đoạn văn bản bạn đã copy. Khi cần, bạn chỉ cần mở pop-up của extension lên và chọn lại đoạn văn bản muốn paste. Project này giới thiệu về việc sử dụng Background Script và lưu trữ dữ liệu nhỏ (sử dụng
chrome.storage.local). - Simple Website Blocker: Cho phép người dùng thêm các URL vào danh sách đen để chặn truy cập.
- Todo List: Cho phép người dùng thêm, xóa và đánh dấu hoàn thành các mục việc cần làm ngay trong trình duyệt.
- Pomodoro Timer: Một bộ đếm thời gian đơn giản trong pop-up hoặc badge của extension để giúp người dùng áp dụng kỹ thuật Pomodoro. Tham khảo: https://github.com/hasonsk/extension-porodomo
- Hoặc thâm chí nhung các mô hình ML, DL thì sao nhỉ?
Source code: https://github.com/hasonsk/quote-today