Giới Thiệu
Trong bài viết này, tôi sẽ chia sẻ về quá trình tạo ra Chrome extension đầu tiên của mình với sự hỗ trợ từ Github Copilot. Khi học tiếng Nhật trên trang web Dungmori.com và ôn từ vựng trên Quizlet, tôi đã gặp phải khó khăn lớn khi phải sao chép từng từ một cách thủ công. Để giải quyết vấn đề này, tôi đã quyết định xây dựng một extension giúp tự động hóa quy trình sao chép từ vựng.
Thách Thức Ban Đầu
Khi gặp khó khăn trong việc chuyển từ vựng từ Dungmori sang Quizlet, tôi thường sử dụng cách tìm kiếm bộ từ vựng đã có sẵn trên Quizlet và thêm từ còn thiếu thủ công. Tuy nhiên, điều này tốn rất nhiều thời gian. Tôi phát hiện rằng Quizlet hỗ trợ việc nhập nhiều từ cùng lúc thông qua cú pháp đa dạng. Dungmori thì chỉ hiển thị từ mới bằng bảng HTML thông thường, nên tôi nghĩ rằng việc sử dụng JavaScript để chuyển đổi dữ liệu là khả thi.
Ý Tưởng Về Một Chrome Extension
Thay vì phải mở Devtools và thực hiện thao tác mỗi lần, tôi quyết định tìm hiểu về việc tạo một Chrome extension. Dù chưa từng làm điều này, chỉ với kiến thức về HTML, CSS và JavaScript, tôi tin rằng Github Copilot có thể hướng dẫn tôi trong quá trình này.
Bắt Đầu Với Github Copilot
Khi hỏi Copilot, tôi được hướng dẫn tạo file manifest.json để cấu hình cho extension của mình, cùng với các file như popup.html, popup.js và content.js. Việc cài đặt extension trên trình duyệt cũng rất đơn giản: chỉ cần bật chế độ Developer mode và chọn thư mục mình đã tạo.
Cấu Hình File manifest.json
json
{
"manifest_version": 2,
"name": "My First Chrome Extension",
"version": "1.0",
"description": "A simple Chrome extension",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
} Tạo Logic Trong File content.js
Tôi đã lên kế hoạch cho content.js để chuyển đổi dữ liệu từ bảng trong Dungmori thành chuỗi văn bản để có thể dễ dàng nhập vào Quizlet. Sau khi chạy thử, đoạn chuyển đổi này hoạt động ngay khi trang web được tải.
Tuy nhiên, sau khi nhận thấy việc tự động chạy không phải là cách tốt nhất, tôi đã hỏi Copilot để tìm ra cách trigger nó bằng nút bấm trong popup. Giải pháp là loại bỏ cấu hình content_scripts và sử dụng câu lệnh chrome.scripting.executeScript().
Trigger Nội Dung Bằng Nút Bấm
javascript
chrome.tabs.query({active: true, currentWindow: true},
function(tabs) {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
files: ['content.js']
}).then(() => {
console.log('Injected the content script.');
}).catch(err => console.error(err));
});Vấn Đề Về Clipboard
Sau khi thiết lập xong, tôi gặp phải vấn đề khi không thể sao chép văn bản vào clipboard như đã dự kiến. Copilot đã giúp tôi nhận ra nguyên nhân là do "Document is not focused". Để khắc phục, tôi cần gửi văn bản từ content.js sang popup.js bằng chrome.runtime.sendMessage.
Gửi Dữ Liệu Giữa Các File
javascript
// content.js
chrome.runtime.sendMessage({type: "copy", text: normalizedRows.join("\r\n")});
// popup.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.type === "copy") {
navigator.clipboard.writeText(request.text).then(function() {
console.log('Text copied to clipboard');
}).catch(function(err) {
console.error('Could not copy text: ', err);
});
}
});Kết Quả Cuối Cùng
Cuối cùng, sau những nỗ lực, tôi đã thành công trong việc sao chép từ vựng từ Dungmori vào clipboard chỉ với một nút bấm. Nhờ vào sự trợ giúp từ Copilot, tôi chỉ mất chưa đến một tiếng để tạo ra extension này mà không cần mở hàng triệu tab tìm kiếm trên Google.
Kết Luận
Đây không chỉ là một bài viết về công nghệ mà còn là một trải nghiệm thú vị với Github Copilot. Tôi cảm ơn Dall-E đã giúp tôi tạo hình minh họa và ChatGPT đã hỗ trợ tôi dịch nội dung sang tiếng Anh một cách chính xác hơn. Nếu bạn cũng đang muốn phát triển một extension tương tự, hy vọng rằng câu chuyện của tôi sẽ truyền cảm hứng đến bạn!
GitLab Repository: link đến repository
source: viblo
