Hướng dẫn dùng công cụ AI Cursor tạo tiện ích Chrome ẩn hình ảnh trên website
Trong thời đại công nghệ phát triển nhanh chóng, Cursor đã nổi lên như một công cụ lập trình AI mạnh mẽ, thu hút sự chú ý của nhiều nhà phát triển. Hôm nay, chúng ta sẽ khám phá cách sử dụng Cursor để tạo ra một tiện ích mở rộng Chrome đơn giản nhưng hữu ích có tên "Ẩn hình ảnh". Tiện ích này cho phép người dùng ẩn hình ảnh trên các trang web, giúp tập trung vào nội dung văn bản hoặc tiết kiệm băng thông. Hãy cùng trải nghiệm sức mạnh của Cursor trong việc phát triển tiện ích mở rộng và xem nó có thể đơn giản hóa quy trình lập trình như thế nào.
Cấu trúc cơ bản của tiện ích mở rộng
Trước tiên, hãy để trình soạn thảo của con trỏ giúp chúng tôi tạo thư mục dự án, sau đó giúp chúng tôi tạo nội dung của từng tệp dự án.
Ẩn hình ảnh/
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── background.js
└── _locales/
└── en/
└── messages.json
└── vi/
└── messages.json
File manifest.json là file cấu hình chính của tiện ích mở rộng:
{
"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"
}
}
}
Chúng ta sẽ tạo một giao diện đơn giản trong file popup.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hide Images|Videos</title>
<script src="popup.js" type="module"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="select-none popup">
<div class="header">
<div class="header-left">
<h2>__MSG_appName__</h2>
</div>
<div class="header-right">
<div id="moreBtn" class="more">
<div class="more-btn">
<div class="more-btn-icon"></div>
</div>
<div id="moreMenu" class="more-menu">
<div class="more-menu-item">
<a href="https://chromewebstore.google.com/detail/lnemmogegmgllangfmlpclaomcknfnbp" target="_blank">__MSG_leaveReview__</a>
</div>
<div class="more-menu-item">
<a href="https://ko-fi.com/xzsoft" target="_blank">__MSG_donate__</a>
</div>
<div class="more-menu-item">
<a href="mailto:cameronchen01@gmail.com" target="_blank">__MSG_suggestionsAdvice__</a>
</div>
<div class="more-menu-item">
<a href="https://xzonesoft.com" target="_blank">About</a>
</div>
</div>
</div>
</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" id="title" style="display: none;">
<div class="switch">
<span class="label">title</span>
<input type="checkbox" inp="title">
<div class="slider round"></div>
</div>
</label>
<label class="switch-group" id="favicon" style="display: none;">
<div class="switch">
<span class="label">favicon</span>
<input type="checkbox" inp="favicon">
<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>
<label class="switch-group" id="exclude">
<div class="switch">
<span class="label">__MSG_Settings__</span>
</div>
</label>
</div>
<script src="js/i18n.js"></script>
</body>
</html>
File popup.js sẽ xử lý các tương tác của người dùng:
// Element selectors
const image = document.getElementById('image')
const enable = document.getElementById('enable')
document.addEventListener('click', function(event) {
const moreMenu = document.getElementById('moreMenu');
if (!moreMenu.contains(event.target)) {
document.getElementById('moreMenu').classList.remove('show')
}
});
document.getElementById('moreBtn').addEventListener('click', function () {
event.stopPropagation();
document.getElementById('moreMenu').classList.toggle('show')
})
const { active, hide } = await chrome.storage.local.get()
let initialState = {
active,
hide
}
syncUI()
image.addEventListener('change', async () => {
const { active } = await chrome.storage.local.get()
if (active) await chrome.storage.local.set({ active: !active })
else await chrome.storage.local.set({ active: !active })
syncUI()
chrome.tabs.reload()
})
async function syncUI() {
const { active, hide } = await chrome.storage.local.get()
image.checked = !active
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
let currentHost = (new URL(tabs[0].url)).hostname;
chrome.storage.sync.get(['domains'], function (result) {
if (result.domains.includes(currentHost)) {
enable.checked = false
}else{
enable.checked = true
}
})
})
}
File content.js sẽ chịu trách nhiệm ẩn hình ảnh trên trang web:
;(async () => {
const { active, hide } = await chrome.storage.local.get();
if (active) {
const observerTarget = document.querySelector('html');
const observerOptions = {
childList: true,
subtree: true,
attributes: true,
};
const observer = new MutationObserver(() =>
hideOrBlurImages(hide)
);
observer.observe(observerTarget, observerOptions);
async function hideOrBlurImages(hide) {
const images = document.querySelectorAll('img');
const videos = document.querySelectorAll('video');
let totalImage = 0;
if (hide === 'HIDE') {
chrome.storage.sync.get(['domains'], function (result) {
var domains = result.domains || [];
var currentDomain = window.location.hostname;
if (!domains.includes(currentDomain)) {
images.forEach((image, i) => {
image.style.visibility = 'hidden';
totalImage = i;
});
videos.forEach((video, i) => {
video.style.visibility = 'hidden';
});
}
});
}
}
}
})();
Để hỗ trợ tiếng Việt, chúng ta tạo file messages.json trong thư mục _locales/vi/:
{
"appName": {
"message": "Ẩn hình ảnh"
},
"appDesc": {
"message": "Một cú nhấp chuột để tắt hiển thị hình ảnh Bạn cũng có thể đặt danh sách trắng cho một số trang web"
},
"exportTittle": {
"message": "Cài đặt nhập/xuất"
},
"Import": {
"message": "Nhập khẩu"
},
"Export": {
"message": "Xuất khẩu"
},
"setPageTitle": {
"message": "Cài đặt | Ẩn cài đặt hình ảnh"
},
"whiteList": {
"message": "Danh sách danh sách trắng"
},
"Domain": {
"message": "Tên miền"
},
"Operation": {
"message": "Vận hành"
},
"addWhitelist": {
"message": "Thêm danh sách trắng"
},
"Add": {
"message": "Thêm vào"
},
"noGraphMode": {
"message": "Chế độ không có biểu đồ"
},
"addToWhiteList": {
"message": "Thêm vào danh sách trắng"
},
"Settings": {
"message": "Cài đặt"
},
"leaveReview": {
"message": "Để lại đánh giá"
},
"donate": {
"message": "Quyên tặng"
},
"suggestionsAdvice": {
"message": "Góp ý"
}
}
Kết luận
Sử dụng trình duyệt Chrome để gỡ lỗi mã do con trỏ tạo ra, phản hồi lỗi cho con trỏ và sau đó thực hiện sửa đổi. Cuối cùng, chức năng trình cắm được triển khai tốt. Sau trải nghiệm tổng thể, con trỏ thực sự là một công cụ lập trình AI rất tốt hiện nay và rất đáng để thử.
Với những bước trên, chúng ta đã tạo được một tiện ích mở rộng Chrome đơn giản để ẩn hình ảnh trên trang web. Tiện ích "Ẩn hình ảnh" này cho phép người dùng dễ dàng bật/tắt chế độ ẩn hình ảnh và thêm các trang web vào danh sách trắng.
Với Cursor, việc phát triển các thành phần này trở nên nhanh chóng và hiệu quả hơn, cho phép chúng ta tập trung vào logic và chức năng của tiện ích thay vì mất thời gian vào các tác vụ lập trình lặp đi lặp lại.
Plug-in cuối cùng đã được ra mắt trên thị trường plug-in của Google. Chào mừng bạn đến trải nghiệm các tiện ích do AI tạo ra. Ẩn hình ảnh
https://chromewebstore.google.com/detail/lnemmogegmgllangfmlpclaomcknfnbp
Nếu có thắc mắc vui lòng thảo luận và trao đổi
All rights reserved
