Slidev - Slidev

用 Vite 開啟你的 Extension

~~今日 TMI: 套件用的好，讓你沒煩惱~~

用 Vite 開啟你的 Extension

~~今日 TMI: 套件用的好，讓你沒煩惱~~

在開始之前

請容許我短暫的自我介紹下

這個是昨天開場示範的 -> 尖叫雞蛋 extension (Github)

什麼是 Chrome Extension?

什麼是 Chrome Extension ?

Chrome Extension 為 Chrome 瀏覽器所提供的擴充工具，它能夠保持原始網站運作的狀態下，讓使用者可以透過瀏覽器所提供的『相關權限 ( Chrom API ) e』來額外自定義附加功能，『改變特定網站的外觀或者增加新的功能』，主要使用『 HTML、CSS、JavaScript 』來開發。

以 Vue DevTool 為例

Vue DevTool 透過調用『Chrome 所提供的 DevTool API 』，讓開發者在使用 Vue.js 進行開發時，可以針對組間組件的參數的變化進行即時觀察除錯。

同時，會偵測當時網站有無使用 Vue 技術，該網站未使用到Vue開發，上方Extension 圖示Icon呈現灰色狀態來表示目前為未啟用狀態 (~~就像肝一樣~~，反之為啟用狀態，圖示Icon則呈現彩色(~~但肝不會~~。

除了 DevTool 還可以做什麼呢？

我們可以用 ChatGPT 做一個 AI聊天室

Chrome Extension 組成＆運行環境

常見組成

在 Extension 中主要是由一個 Manifest 組成，而其他的權限功能 Content Script 、 Action 及 Option ...等，則視需要可在 Manifest.json 自行宣告定義

Manifest 設定檔

Background ( Service Worker )

Action

Option

...

chrome://extension

Content Script

http://xxx.com

Manifest 必填及建議項目

必填項目

{
  "name": "Extension DEMO ",
  "version": "1",
  "manifest_version": 3
  //...略
}
{
  "name": "Extension DEMO ",
  "version": "1",
  "manifest_version": 3
  //...略
}

建議項目

{
  "description": "DEMO Description",  // 建議
  "icons": {...},  // 建議
}
{
  "description": "DEMO Description",  // 建議
  "icons": {...},  // 建議
}

Manifest 選填項目

permissions

當 Extension 需要對瀏覽器進行附加功能時，有可能會需要使用到 Browser 的功能(像是Cookie、Storage)協助，此時就需透過在 Permission 中進行使用宣告，才能進行權限的使用。

{
    permissions": [
    "storage",
    "activeTab", //目前視窗頁
    "tabs",
  ],
}
{
    permissions": [
    "storage",
    "activeTab", //目前視窗頁
    "tabs",
  ],
}

* 提醒: 建議沒有使用到的權限記得就不要宣告，要不然會導致最後 google 送審時會未能通過

Manifest 選填項目

host_permissions

主要使用時機為需在 Extension 中 Cross-origin 請求對應API資料時，需在 host_permissions 內定義相關網域的網址。

{
  "host_permissions": [
    "https://www.google.com/", // 指定特定連結
    "https://www.google.com/*", // 指定在特定網域下所有連結
    "<all_urls>" //所有都可以使用
  ]
}
{
  "host_permissions": [
    "https://www.google.com/", // 指定特定連結
    "https://www.google.com/*", // 指定在特定網域下所有連結
    "<all_urls>" //所有都可以使用
  ]
}

更多 Manifest 相關功能設定請見 -> 官方文件

運行環境

運行環境可以分為兩個為完全獨立空間，分別是『 Extension端及瀏覽器端』。因為是兩個互不影響，不能直接操作對方的相關方法，唯一溝通的方式只有透過『 onMessage 』監聽事件來進行雙方資料溝通。

onMessage 事件

操控DOM

DOM

Extension

Background ( Service Worker )

Action

Option

...

chrome://extension

Browser

Content Script

http://xxx.com

Background

Action

Content Script

Option

Background 為 Extension 中的長時間執行腳本事件，通常 Extension 的相關的邏輯功能都會此進行定義，而其常見的功能主要為監聽各項事件的發生、使『瀏覽器端』與『 Extension端』進行資料溝通及跨域請求API資料等...

Background 進入點

在 Manifest 3 中， Background 採用 Service Worker 來運行，如果需使用 background 相關功能，首先需在 Manifest 內 background 欄位中指定檔案路徑，使用 ES Module 只要 type 為 module 即可使用。

// manifest.json
{
  ...
  "background": {
    "service_worker": "background.js",
    "type": "module" //optional
  }
  ...
}
// manifest.json
{
  ...
  "background": {
    "service_worker": "background.js",
    "type": "module" //optional
  }
  ...
}

來點 🧀️ 吧!

🧀️ : 什麼是 Service Worker ?

為瀏覽器與網路之間的一種網路請求代理(Proxy)，為PWA核心技術之一，特性為需在 HTTPS 下執行且無法存取DOM元素，需透過 postMessage 方法與其他進行溝通，主要透過事件監聽的來觸發每個生命週期，常見應用有離線快取功能、推播通知功能等...。

Fetch 事件

Push 事件

Sync 事件

🧀️ : Service Worker 生命週期

當安裝完成後，SW 會進入『Activated』事件，通常會在這階段清除舊 Cache，當沒有事件要執行時會進入『 Idle閒置』階段，等待新的事件觸發。但如果長時間處於 idle 階段或因某些原因停止運行時，會進入『 terminate 』階段。在這個階段 Service Worker 的所有資源都會被釋放。

Install

Actived

Error

Idle

Terminated

Fetch/Push/Sync

所以 Background 主要負責什麼？

監聽相關事件

跨域請求資料

與 Browser 溝通

Background 常見監聽事件

Tab 頁籤監聽事件

使用chrome.tabs API 可以與Browser的特定頁籤進行互動。像是創建、修改和重新排列頁籤順序等...

//background.js

const request = async (url) => {
  //...略
  let response = await fetch(url).then((res) => res.json());
  //...略
  return response;
};

//當換頁更新時觸發

chrome.tabs.onUpdated.addListener(async (id, info, tab) => {
  if (tab.url === "https://xxx.com") {
    let data = await request("https://xxx.com/api");
  }
});
//background.js

const request = async (url) => {
  //...略
  let response = await fetch(url).then((res) => res.json());
  //...略
  return response;
};

//當換頁更新時觸發

chrome.tabs.onUpdated.addListener(async (id, info, tab) => {
  if (tab.url === "https://xxx.com") {
    let data = await request("https://xxx.com/api");
  }
});

更多 Tab API 相關功能設定請見 -> 官方文件

Storage 頁籤監聽事件

這邊的 Storage 主要是運行於Extension端，用法分別有 storage.local 與 storage.sync 兩種，而 Sync 與 localStorage 主要區別為使用者的相關資訊可以過使用 storage.sync方法與 Chrome帳號自動同步，同時在本機端也可以存取。

// 設定storage
chrome.storage.sync.set({ key: value }, () => {});

// 取得 storage
chrome.storage.sync.get([key], (res) => res.key);

//Storage 改變時觸發事件
chrome.storage.onChanged.addListener((changes, areaName) => {
  console.log(changes);
});
// 設定storage
chrome.storage.sync.set({ key: value }, () => {});

// 取得 storage
chrome.storage.sync.get([key], (res) => res.key);

//Storage 改變時觸發事件
chrome.storage.onChanged.addListener((changes, areaName) => {
  console.log(changes);
});

更多 Storage API 相關功能設定請見 -> 官方文件

Action

Background

Action

Content Script

Option

Action 為設定 Chrome Extension UI介面的相關方法，提供許多定義方法讓開發者能依功能需求來自定義 Extension 樣式，每一次點擊Action 按鈕打開的視窗為一次生命週期。

自定義 Action 樣式

與Background相同，要自定義Extension Popup視窗一樣也需在 Manifest.json 中Action欄位的 default_popup 宣告相關 HTML檔案路徑，如果需要自定義 Icon 也需要在 default_icon 欄位中指定對應圖片

  // manifest.json
  ...
  "action": {
    "default_popup": "/action/action.html",
    "default_title": "Click Me",
    "default_icon": {
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"
    }
    ...
  },
  // manifest.json
  ...
  "action": {
    "default_popup": "/action/action.html",
    "default_title": "Click Me",
    "default_icon": {
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"
    }
    ...
  },

Action 相關API

依照狀態動態切換 popup 頁面

// popup.js
chrome.storage.local.get("signed_in", (data) => {
  if (data.signed_in) {
    chrome.action.setPopup({ popup: "popup.html" });
  } else {
    chrome.action.setPopup({ popup: "popup_sign_in.html" });
  }
});
// popup.js
chrome.storage.local.get("signed_in", (data) => {
  if (data.signed_in) {
    chrome.action.setPopup({ popup: "popup.html" });
  } else {
    chrome.action.setPopup({ popup: "popup_sign_in.html" });
  }
});

依照狀態設定 popup 狀態提示及變更 Icon 圖示

// popup.js
chrome.action.setBadgeText({ text: "ON" });
chrome.action.setBadgeBackgroundColor({ color: "#4688F1" });
// popup.js
chrome.action.setBadgeText({ text: "ON" });
chrome.action.setBadgeBackgroundColor({ color: "#4688F1" });

Content Script

Background

Action

Content Script

Option

Content Script 是 Extension 中唯一執行於瀏覽器端的 Context ，可以直接訪問網頁中的資訊且對DOM元素進行操作，同時又不會與頁面或其他Extension 的內容腳本發生衝突，其中注入網站的方法又分為『靜態 Inject Script 』與『動態 Inject Script』

為什麼不會與頁面其他 script 發生衝突呢？

因為 Content Script 主要運行於 Isolated Worlds，雖然都可以操作該頁面上的 DOM，但與網頁上的 Script 實際上是兩個獨立的執行環境，所以不會相互影響

但 ! 因為是共用 DOM 元素，所以 CSS 樣式很容易因為 Class 撞名

靜態注入 Script (Inject Declaratively)

需在manifest檔中content_script宣告對應檔案(js、css)


  "content_scripts": [
    {
      "matches": ["https://*.xxx.com/*"], //指定特定網域
      "css": ["content.css"],
      "js": ["content.js"],
      "run_at": "document_start" // 注入的時機
    }
  ],

  "content_scripts": [
    {
      "matches": ["https://*.xxx.com/*"], //指定特定網域
      "css": ["content.css"],
      "js": ["content.js"],
      "run_at": "document_start" // 注入的時機
    }
  ],

『run_at 欄位』為指定何時將 Cotent Script 程式注入於頁面中，分別有三個選項: document_idle、 document_start 或 document_end

更多靜態 Inject 相關功能設定請見 -> 官方文件

動態注入 Script (Inject Programmatically)

而動態 Inject Script 則需『 Manifest.json 』中的『 Permission 』欄位宣告 Scripting 權限

// manifest.json
{
  "permissions": ["scripting"]
}
// manifest.json
{
  "permissions": ["scripting"]
}

透過『 chrome.scripting.executeScript 』方法將 JavaScript 檔案注入到指定的 TabId 中。 (這邊要再修改範例

// background.js
...略
chrome.scripting.executeScript({
  target: { tabId: id },
  func: injectedFunction, // 也可以指定檔案路徑的形式 files: ['script.js'],
  args: ["我是動態注入"],
},(d)=>{
  console.log(d) // 這邊可以接收Function 回傳值
});
...略
// background.js
...略
chrome.scripting.executeScript({
  target: { tabId: id },
  func: injectedFunction, // 也可以指定檔案路徑的形式 files: ['script.js'],
  args: ["我是動態注入"],
},(d)=>{
  console.log(d) // 這邊可以接收Function 回傳值
});
...略

Content Script 的注意事項

無法使用
window. 方法

只能使用部份
Chrom API

主要以 Message / Storage API為主

Inject CSS 優先權
低於網站 CSS

Class 命名衝突及 CSS框架衝突

不支援 ES6 Module

使用 Vite 進行開發無法打包

Background 與 Content Script 資料的傳遞

Message passing 一次性傳送

由於 Content Script 與 Background 執行環境的不同，只能透過 Message Passing 方法來相互溝通，如果資料不需常時效性的被更新傳遞，以這類型的短期性傳遞資料為需求來說，可以使用 chrome.runtime.sendMessage 或者 tab.runtime.sendMessage 方法來進行一次性的資料傳遞

Extension

chrome.tabs.sendMessage

Browser

chrome.runtime.sendMessage

Background 傳送給 Content Script

因為開啟視窗可能不只一個，所以在 Extension 需知道所要傳遞的頁面，透過第一個參數指定 Tab ID 的形式來將內容傳遞到特定頁面中。

// background.js
chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
  //...略
  chrome.tabs.sendMessage(
    tabs[0].id,
    { from: "background", message: data },
    (response) => {
      console.log(response.from); //接收回傳訊息
    }
  );
});
// background.js
chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
  //...略
  chrome.tabs.sendMessage(
    tabs[0].id,
    { from: "background", message: data },
    (response) => {
      console.log(response.from); //接收回傳訊息
    }
  );
});

* 提醒: 使用 Tab 相關方法須在 manifest.json 的 permission 欄位宣告『tab』及『activeTab』權限

Content Script 傳送給 Background

//  Content Script to Background
chrome.runtime.sendMessage({ from: "contentScript" }, (response) => {
  console.log("response from:", response);
});
//  Content Script to Background
chrome.runtime.sendMessage({ from: "contentScript" }, (response) => {
  console.log("response from:", response);
});

接收訊息

因為 sendResponse 方法僅在同步使用時有效，如果想要非同步使用，需在onMessage監聽事件的CallBack function 中return true，即可使用。

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.from === "popup.js") {
    // 可以在 sendMessage 的 callback 中取得，此 sendResponse 的內容
    // 需要注意若在多個地方呼叫同時呼叫 sendResponse，將只會收到一個
    sendResponse({
      from: "background.js",
    });
  }
  return true;
});
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.from === "popup.js") {
    // 可以在 sendMessage 的 callback 中取得，此 sendResponse 的內容
    // 需要注意若在多個地方呼叫同時呼叫 sendResponse，將只會收到一個
    sendResponse({
      from: "background.js",
    });
  }
  return true;
});

Message passing 長時間連接

假如資料需頻繁被雙方更新與相互使用時，需要長時間的連接，可以使用 runtime.connect 或 tabs.connect ，當 Port 開啟 long-lived channel 進行連結接收端會得到一個 runtime.Port 物件，此時就可以透過 PostMessage 方法來發送和接收訊息，讓資料隨時保持共享狀態

Extension

chrome.tabs.connect

port.postMessage

Browser

port.postMessage

chrome.runtime.connect()

Content Script 連結 Extension

使用長時間連接需透過chrome.runtime.connect 方法來創建一個 Port 進行連接。透過runtime.connect中的postMessage方法來傳遞訊息，而監聽訊息的傳遞，可以透過設置 port.onMessage.addListener 來接收訊息。

//content.js

//建立 port
const port = chrome.runtime.connect({ name: "contentPort" });

//傳送
port.postMessage({ from: "content script" });

// 接收
port.onMessage.addListener((msg) => {});
//content.js

//建立 port
const port = chrome.runtime.connect({ name: "contentPort" });

//傳送
port.postMessage({ from: "content script" });

// 接收
port.onMessage.addListener((msg) => {});

Extension 端接收方法

但以 Extension 中的接收端來說，與Content Script 頁面接收比較不相同的地方在於，當要處理Connect連接事件，需透過runtime.Connect事件監聽，透過回傳port對進行資料的接收。

// background.js
chrome.runtime.onConnect.addListener((port) => {
  if (port.name === "contentPort") {
    port.onMessage.addListener((res) => {
      port.postMessage({ from: "popup" });
    });
  }
});
// background.js
chrome.runtime.onConnect.addListener((port) => {
  if (port.name === "contentPort") {
    port.onMessage.addListener((res) => {
      port.postMessage({ from: "popup" });
    });
  }
});

說到這 Chrome Extension 其實就是透過『資料傳遞』來針對網站功能附加

Chrome Extension & Vite

爲什麼選擇 Vite 進行開發？

快 ! 快 ! 快 !

快 ?! 我不喜歡太快!! 先看看下圖

為什麼 Vite 可以這麼快?

Vite 是一個打包工具，主要透過利用瀏覽器支援的 Native ESM 來作為核心運作，根據 Http的request 來載入模組進行處理，實現真正的依需求加載，讓開發速度及編譯可以變得更快。

為什麼 Vite 可以這麼快?

在打包階段是採取 Rollup 工具作為核心進行程式碼編譯，其最大特色還可以透過較快的時間來將檔案打包成更小容量。

創建一個Vite專案

 //npm：
 npm create vite@latest extension-name
 //npm：
 npm create vite@latest extension-name

依照 Extension 功能需求，在『 src 』內建立相關檔案，如:background 等，而 manifest.json 不需編譯，所以可以放置在『 public 』中。

.
├── popup.html //根目錄
├── package.json
├── public
│   ├── logo.png
│   └── manifest.json
├── src
│   ├── background.js
│   ├── content_script
│   │   └── content.js
│   └── popup
│       └── popup.js
└── vite.config.js
.
├── popup.html //根目錄
├── package.json
├── public
│   ├── logo.png
│   └── manifest.json
├── src
│   ├── background.js
│   ├── content_script
│   │   └── content.js
│   └── popup
│       └── popup.js
└── vite.config.js

Vite Config 設定

接著在 vite.config中設定檔案打包路徑，在build中透過 rollupOptions 屬性的input指定檔案的路徑位置，而output可以設置檔案輸出的名字。


export default defineConfig({
  ....
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
      },
      input: {
        popup: resolve(__dirname, 'popup.html'),
        background: resolve(__dirname, '/src/background.js'),
        content: resolve(__dirname, '/src/content/content.js')
      }
    }
  },
  ...
})

export default defineConfig({
  ....
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
      },
      input: {
        popup: resolve(__dirname, 'popup.html'),
        background: resolve(__dirname, '/src/background.js'),
        content: resolve(__dirname, '/src/content/content.js')
      }
    }
  },
  ...
})

咦 ! 不是說 Content Script 不支援 ES Module 嗎？

Wait Wait Wait !!!

雖然 Content Script 原生不支援 ES Module，但我們能透過 Chrome API 中的『Web Accessible Resources 』加『 getURL 』方法將有使用到ES Module 語法的程式碼存在 Extension 端來繞道而行。

getURL

Extension

content.js

chrome://extension

Browser

src ="chrome://extensions/..../content.js"

http://xxx.com

如何使用？

要讀取 Extension 中任何圖片或其他檔案的資源，需在 Manifest中 web_accessible_resources 欄位中宣告資源外界才可公開訪問其資源。

// manifest
{
  ...
  "web_accessible_resources": [
    {
      "resources": [ "logo.png", "/images/*"],
      "matches": [ "https://*/*" ],
      use_dynamic_url: true; //會動態產生url
    }
  ],
  ...
}
// manifest
{
  ...
  "web_accessible_resources": [
    {
      "resources": [ "logo.png", "/images/*"],
      "matches": [ "https://*/*" ],
      use_dynamic_url: true; //會動態產生url
    }
  ],
  ...
}

且透過 chrome.runtime.getURL 方法可獲得存在於Extension 環境下中對應檔案路徑

// background.js or content.js
const extensionURL = chrome.runtime.getURL(fileName);
console.log(extensionURL); // chrome-extension://dmbemmhmhfjoiehocmomfognglhnjean/content.html
// background.js or content.js
const extensionURL = chrome.runtime.getURL(fileName);
console.log(extensionURL); // chrome-extension://dmbemmhmhfjoiehocmomfognglhnjean/content.html

在 Content Script 注入的方法

動態產生Script
注入到網站中

原本在Content Scripts 可以使用的 Chrome API 方法有些就不能使用了

使用 iframe

關於使用 Iframe

iframe 為HTML語法中的內嵌框架，主要使用目的為可以在當前網頁內載入另一個網頁，最常見的應用像是我們常看到他人網站內嵌入Youtube影片，而在Extension端，可以將存放在 Extension 空間下的 content.html 頁面，透過 chrome.runtime.getURL 取得連結載入到 iframe 的 src 之中。

在Extension中如何使用？

由於 Content Script 沒有html頁面可以定義 iframe，所以我們透過建立一個 div 元素，將它 append 在特定網站中。

// injectScriptModule.js
const El = document.querySelector("#extension_iframe");
const iframeEl = document.createElement("iframe");

if (!El) {
  const div = document.createElement("div");
  div.id = "extension_iframe";
  div.setAttribute(
    "style",
    "z-index:2147483647; position:fixed; bottom:30px; right:20px;font-size:16px;"
  );
  // 注入網站中
  document.body.appendChild(div);
}
// injectScriptModule.js
const El = document.querySelector("#extension_iframe");
const iframeEl = document.createElement("iframe");

if (!El) {
  const div = document.createElement("div");
  div.id = "extension_iframe";
  div.setAttribute(
    "style",
    "z-index:2147483647; position:fixed; bottom:30px; right:20px;font-size:16px;"
  );
  // 注入網站中
  document.body.appendChild(div);
}

接著再創建一個iframe ，透過 chrome.runtime.getURL 取得存放在 Extension 中的content.html，將其 append 在剛剛建立的div元素中

//injectScriptModule.js
iframeEl.sandbox = "allow-scripts allow-popups";
iframeEl.width = "335px";
iframeEl.height = "440px";
iframe.frameborder = "0";
iframeEl.scrolling = "no";

iframeEl.src = chrome.runtime.getURL("content.html"); //透過getURL方法取得存放在 頁Extension 端 content.html

El.prepend(iframe);
//injectScriptModule.js
iframeEl.sandbox = "allow-scripts allow-popups";
iframeEl.width = "335px";
iframeEl.height = "440px";
iframe.frameborder = "0";
iframeEl.scrolling = "no";

iframeEl.src = chrome.runtime.getURL("content.html"); //透過getURL方法取得存放在 頁Extension 端 content.html

El.prepend(iframe);

接著將 injectScriptModule.js 檔案，透過Inject的方式(不限動態與靜態方式)將程式碼注入到特定網站之中


//動態Inject
chrome.scripting.executeScript(
    {
      target: {tabId: tabId},
      files: ['injectScriptModule.js'],
    },
    () => { ... });
)

//動態Inject
chrome.scripting.executeScript(
    {
      target: {tabId: tabId},
      files: ['injectScriptModule.js'],
    },
    () => { ... });
)

使用 Iframe 的好處

1.避免與網站中的CSS樣式衝突

2. 因為執行環境完全存在於 Extension 端，所有 Chrome API 能正常使用

今日TMI : 套件用的好，讓你沒煩惱

最後，想工商一下自己XD
因為喜歡嘗試研究酷炫的東西還有紀錄奇怪的事物，為了能把這一切都記錄下來，所以在今年初架設了一個部落格，希望能養成各種寫文章紀錄自己所學技術的習慣，歡迎有興趣的捧油可以進來探索探索。

🔗 ITHELP
(預計下次主題為P5.js)

🔗 Medium
將與BLOG同步更新

🔗 BLOG
目前M版還在調整中XD

🔗 FaceBook
有任何問題都可以私訊問我

什麼是 Chrome Extension ?

以 Vue DevTool 為例

常見組成

Manifest 必填及建議項目

Manifest 選填項目

Manifest 選填項目

運行環境

Background

Background 進入點

🧀️ : 什麼是 Service Worker ?

🧀️ : Service Worker 生命週期

Tab 頁籤監聽事件

Storage 頁籤監聽事件

Action

自定義 Action 樣式

Action 相關API

Content Script

為什麼不會與頁面其他 script 發生衝突呢？

靜態注入 Script (Inject Declaratively)

動態注入 Script (Inject Programmatically)

Background 與 Content Script 資料的傳遞

Message passing 一次性傳送

Message passing 長時間連接

Content Script 連結 Extension

Extension 端接收方法

快 ?! 我不喜歡太快!! 先看看下圖

為什麼 Vite 可以這麼快?

為什麼 Vite 可以這麼快?

創建一個Vite專案

Vite Config 設定

在 Content Script 注入 的方法

關於使用 Iframe

在Extension中如何使用？

使用 Iframe 的好處

在 Content Script 注入的方法