本篇文章是透過 ChatGPT 產生後經過實際操作正確運行，善用工具可以協助更快速時間想法與概念。

我的目標與動作描述： 請幫我開發一個google extension v3

  1. 點 extension icon 會跳出一個html並且在上下左右邊距大概100px 按鈕在正中間 “取得當前網址”
  2. 點了之後會取得當前網址並且 alert 出來

這邊有兩個知識點，由於我在這之前已經有開發過 google extension 經驗，所以大概知道結構邏輯; 實際細節已經有點遺忘了，僅記得是透過 append 和 permission 型態: minifest 來宣告，也就是說在請 ChatGPT 協助之前先行的知識還是要有的，了解的越清楚實作與協作起來會更快更精準。

建立 manifest.json 檔案

manifest.json 檔案用來定義擴充功能的設定，包括擴充功能名稱、版本、圖示、權限等等。請參考以下範例：

{
  "name": "Get Current URL",
  "version": "1.0",
  "description": "A Google Chrome Extension to get the current URL of the active tab",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

建立 popup.html 檔案

popup.html 檔案用來定義擴充功能點擊 icon 後彈出的視窗，包括取得當前網址的按鈕。請參考以下範例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Get Current URL</title>
  <style>
    body {
      margin: 100px;
    }

    button {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <button id="get-current-url">取得當前網址</button>

  <script src="popup.js"></script>
</body>

</html>

建立 popup.js 檔案

popup.js 檔案用來定義點擊取得當前網址的按鈕後的行為，即取得當前網址並且 alert 出來。請參考以下範例：

document.addEventListener("DOMContentLoaded", function () {
    const getCurrentUrlButton = document.getElementById("get-current-url");
  
    getCurrentUrlButton.addEventListener("click", function () {
      chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
        const url = tabs[0].url;
        alert(url);
      });
    });
  });

成果