code ที่ chatgpt แนะนำมา มีความผิดพลาดยังไงครับ

สั่งให้ 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"]
    }
  ]
}

3. สร้าง 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>

6. สร้าง popup.js
ไฟล์ 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 ไม่ได้จริง
มันมีความผิดพลาดตรงไหนครับ

wanwan044

console.log('Image URLs:', request.imageUrls);
   // คุณสามารถเพิ่มการประมวลผลหรือจัดเก็บ URL เหล่านี้ได้ที่นี่

  ** เขียนโค้ดต่อตรงนี้ จะเอาค่า request.imageUrls ไปทำอะไรต่อ ***
  ** เขียนโค้ดต่อตรงนี้ จะเอาค่า request.imageUrls ไปทำอะไรต่อ ***
  ** เขียนโค้ดต่อตรงนี้ จะเอาค่า request.imageUrls ไปทำอะไรต่อ ***