สั่งให้ chatgpt เขียนโค้ดให้ อยากรู้ว่า โคดที่มันเขียนมาให้นั้น จะใช้ได้ผลไหม
สั่งมันไปแบบนี้
สร้าง Chrome Extension ดึง URL ของรูปภาพในหน้าเว็บเพจโดยอัตโนมัติโดยใช้ regex
มันตอบกลับมาว่า
การสร้าง Chrome Extension เพื่อดึง URL ของรูปภาพในหน้าเว็บเพจโดยใช้ Regular Expressions (Regex) สามารถทำได้โดยการใช้ content script เพื่อสแกน HTML ของหน้าเว็บและใช้ Regex เพื่อค้นหา URL ที่ตรงกับรูปแบบที่ต้องการ
ขั้นตอนการสร้าง Chrome Extension
1. สร้างโฟลเดอร์สำหรับ Extensionสร้างโฟลเดอร์ใหม่สำหรับโปรเจกต์ของคุณ
2. สร้าง manifest.jsonไฟล์ manifest.json เป็นไฟล์ที่กำหนดการตั้งค่าพื้นฐานของ Extension
{
"manifest_version": 3,
"name": "Regex Image URL Extractor",
"version": "1.0",
"description": "Automatically extracts image URLs from a webpage using Regex.",
"permissions": [
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
ไฟล์ content.js จะทำหน้าที่สแกน HTML ของหน้าเว็บและใช้ Regex เพื่อดึง URL ของรูปภาพ
// สร้าง Regex เพื่อค้นหา URL ของรูปภาพ
const regex = /https?://[^"] .(?:jpg|jpeg|png|gif|bmp|webp)/gi;
const bodyText = document.body.innerHTML;
// ค้นหา URL ของรูปภาพทั้งหมดในหน้าเว็บ
const imageUrls = bodyText.match(regex);
// ส่งผลลัพธ์ไปยัง background script
if (imageUrls) {
chrome.runtime.sendMessage({ imageUrls: imageUrls });
}
4. สร้าง background.jsไฟล์ background.js จะทำหน้าที่รับข้อมูลจาก content.js และประมวลผลตามความต้องการ
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.imageUrls) {
console.log('Image URLs:', request.imageUrls);
// คุณสามารถเพิ่มการประมวลผลหรือจัดเก็บ URL เหล่านี้ได้ที่นี่
}
});
5. สร้าง popup.htmlไฟล์ popup.html เป็นหน้าต่าง UI ที่จะแสดงผลเมื่อผู้ใช้คลิกที่ไอคอนของ Extension
<!DOCTYPE html>
<html>
<head>
<title>Regex Image URL Extractor</title>
</head>
<body>
<h1>Image URL Extractor</h1>
<button id="extract-btn">Extract URLs</button>
<ul id="url-list"></ul>
<script src="popup.js"></script>
</body>
</html>
ไฟล์ popup.js จะเชื่อมต่อระหว่าง UI และการทำงานของ Extension
document.getElementById('extract-btn').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: () => {
const regex = /https?://[^"] .(?:jpg|jpeg|png|gif|bmp|webp)/gi;
const bodyText = document.body.innerHTML;
return bodyText.match(regex);
}
}, (results) => {
const urlList = document.getElementById('url-list');
urlList.innerHTML = '';
if (results && results[0].result) {
results[0].result.forEach((url) => {
const li = document.createElement('li');
li.textContent = url;
urlList.appendChild(li);
});
}
});
});
});
7. เตรียมไอคอนสร้างไอคอนตามขนาดที่ระบุไว้ใน manifest.json และวางไว้ในโฟลเดอร์ images ภายในโปรเจกต์ของคุณ
8. โหลด Extension ไปยัง Chromeเปิด Chrome และไปที่ chrome://extensions/
เปิดโหมดนักพัฒนา (Developer Mode)
คลิก "โหลด Extension แบบไม่บีบอัด" (Load unpacked) และเลือกโฟลเดอร์ที่คุณสร้างไว้
9. ทดลองใช้งานเมื่อโหลด Extension สำเร็จ คุณสามารถคลิกที่ไอคอนของ Extension บน Chrome แล้วกดปุ่ม "Extract URLs" เพื่อดึง URL ของรูปภาพทั้งหมดในหน้าเว็บที่เปิดอยู่
การทำงาน
content.js จะสแกน HTML ของหน้าเว็บและใช้ Regex เพื่อดึง URL ของรูปภาพทั้งหมด
URL ที่พบจะถูกส่งไปยัง background.js หรือแสดงใน popup.html ขึ้นอยู่กับวิธีการใช้งานที่คุณต้องการ
คุณสามารถปรับแต่งโค้ดเพิ่มเติมตามความต้องการของคุณได้ เช่น การบันทึก URL ของรูปภาพลงในไฟล์ หรือการคัดลอก URL เหล่านั้นไปยังคลิปบอร์ดผมลองแล้ว เวลากดปุ่ม เมื่อเวบใดๆถูกเปิดขึ้นมา มันมีป้อบอัพจริง แต่เล็กมาก และก้อปurl ไม่ได้จริง
มันมีความผิดพลาดตรงไหนครับ
พัฒนาเว็บไซต์
