Hướng Dẫn Tạo Tiện Ích Mở Rộng Chrome Để Ẩn Hình Ảnh Trên Các Website Bằng Công Cụ AI Cursor
Trong thời đại công nghệ 4.0, việc sử dụng các công cụ AI để tối ưu hóa quá trình lập trình ngày càng trở nên phổ biến. Cursor là một công cụ lập trình AI mạnh mẽ, giúp các nhà phát triển tạo ra những sản phẩm chất lượng một cách nhanh chóng và hiệu quả. Bài viết này sẽ hướng dẫn bạn cách sử dụng công cụ Cursor để xây dựng tiện ích mở rộng Chrome mang tên "Ẩn Hình Ảnh", cho phép người dùng thao tác dễ dàng trong việc ẩn các hình ảnh trên website, nhằm tăng cường sự tập trung vào nội dung văn bản hoặc tiết kiệm băng thông.
Tại Sao Nên Tạo Tiện Ích Mở Rộng Chrome Để Ẩn Hình Ảnh?
Nhu cầu ẩn hình ảnh trên các trang web có thể do nhiều lý do khác nhau:
- Tăng cường khả năng đọc hiểu các nội dung văn bản mà không bị phân tâm
- Tiết kiệm băng thông cho những người có kết nối Internet hạn chế
- Tối ưu hóa trải nghiệm duyệt web trong một số tình huống làm việc chuyên sâu
Cấu Trúc Dự Án Tiện Ích Mở Rộng
Dưới đây là cấu trúc thư mục dự án cho tiện ích "Ẩn Hình Ảnh":
Ẩn hình ảnh/
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── background.js
└── _locales/
└── en/
└── messages.json
└── vi/
└── messages.jsonFile manifest.json
File này là file cấu hình chính cho tiện ích mở rộng. Chúng ta sẽ định nghĩa các tham số cần thiết như tên, mô tả và quyền truy cập:
{
"manifest_version": 3,
"name": "__MSG_appName__",
"description": "__MSG_appDesc__",
"action": {
"default_popup": "popup.html"
},
"default_locale": "en",
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"],
"run_at": "document_start"
}
],
"icons": {
"16": "img/icon-16.png",
"128": "img/icon-128.png"
},
"permissions": ["activeTab", "storage"],
"version": "1.0.0",
"options_page": "options.html",
"commands": {
"hide_command": {
"suggested_key": {
"default": "Alt+H"
},
"description": "Open/Close"
}
}
}File popup.html
Chúng ta sẽ tạo một giao diện đơn giản cho tiện ích trong file popup.html. Dưới đây là mã HTML để hiện thị giao diện:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ẩn Hình Ảnh</title>
<script src="popup.js" type="module"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="select-none popup">
<div class="header">
<h2>__MSG_appName__</h2>
<div id="moreBtn" class="more">...</div>
</div>
<div class="main">
<label class="switch-group">
<div class="switch">
<span class="label">__MSG_noGraphMode__</span>
<input type="checkbox" inp="image" id="image">
<div class="slider round"></div>
</div>
</label>
<label class="switch-group">
<div class="switch">
<span class="label">__MSG_addToWhiteList__</span>
<input type="checkbox" inp="enable" id="enable">
<div class="slider round"></div>
</div>
</label>
</div>
</body>
</html>File popup.js
File này sẽ xử lý logic và tương tác của người dùng thông qua giao diện tiện ích:
javascript
const image = document.getElementById('image');
const enable = document.getElementById('enable');
image.addEventListener('change', async () => {
// Xử lý sự kiện thay đổi trạng thái checkbox
});File content.js
Mã dưới đây sẽ đảm nhận việc ẩn hình ảnh trên trang web:
javascript
(async () => {
const { active, hide } = await chrome.storage.local.get();
if (active) {
const images = document.querySelectorAll('img');
images.forEach(image => {
image.style.visibility = 'hidden';
});
}
})();Hỗ Trợ Ngôn Ngữ Tiếng Việt
Để hỗ trợ người dùng tiếng Việt, chúng ta tạo file messages.json chứa các thông điệp hiển thị trong tiện ích.
Kết Luận
Việc sử dụng Cursor để phát triển tiện ích mở rộng này không chỉ giúp bạn tiết kiệm thời gian mà còn mang lại trải nghiệm lập trình thú vị. Bạn đã hoàn thành việc tạo một tiện ích mở rộng Chrome đơn giản mà hiệu quả cho phép người dùng ẩn hình ảnh trên website. Hãy thử nghiệm và khám phá sức mạnh của AI trong việc tối ưu hóa quy trình lập trình.
Chúc bạn thành công trong việc phát triển tiếp các ứng dụng khác giúp cải thiện trải nghiệm duyệt web của người dùng!
source: viblo
