Hi Dai Gei Ho~ 我是Winnie ~

回憶過去，在這24天的內容中，我們已經介紹了 Chrome Extension 的核心運作、使用方法，同時也針對如何在 Vite 創建一個Extension 可能遇到的問題也進行了説明，不知不覺在此系列主題介紹也快要到尾聲。

但在進入最後實作章節之前，其實還有一個東西一直沒介紹到，那就是在Extension 中使用 Vue 。

這邊提醒 此篇文章只會針對 在Extension中如何 引入 Vue 框架來介紹，關於 Vue相關方法的介紹，這邊推薦大家可以看看 官方文件 、 重新認識Vue 或者 不嫌棄也可以看看 前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue(自肥)

那在開始之前，我們先來說說在 Extension 中

使用Vue的好處

由於 Extension 功能主要目的是

1. 方便操作頁面中的DOM元素
2. 將功能模組化，以利功能管理及程式碼維護
3. 透過MVVM的概念，使資料響應化
4. 可以透過 CSS Scope的方法，不與當前頁面衝突。

實際操作：

溫腥小提醒:
在此篇文章與後續文章內容中，關於 Vue3 實作介紹都將透過 Composition API 方法來進行介紹

建立 Vue 實體物件

在開始使用Vue時，一開始我們都需要先建立一個 Vue 的物件實體，並且將這個物件指定至於某個變數中。

如下方:

我們可以透過 createApp 一個實體物件，指定給el變數。

// Vue 3 寫法

import {
  createApp
} from 'vue'


const el = createApp({
  props: ['title'],
  setup(props) {
    const title = toRef(props, 'title');
    console.log(title.value); // Hello World
  }
})

或者 可以透過 import 物件的方式來指定

// Vue 3 寫法

import {
  createApp
} from 'vue'

import App from './Content.vue';

const el = createApp(App)

掛載至 DOM

建立後，我們要把這個 Vue實體 掛載至 Extension 中的各個功能頁面中了，而掛載方式主要會依照有無html頁面，分為兩種：

Popup、Option

如果是存在於 Extension 中的資源，像是 Popup、Option等，因為有html頁面可以直接操作DOM元素，所以可以直接進行掛載。

如下方:

將vue實體物件透過 .mount 方式來掛載到#app裡

// popup.html
<div id="app"></div>

// popup.js

const el = createApp(App)
el.mount('#app');

Content Script

相較於上方，此時Content Script的步驟就會多一點了。

為什麼呢？

因為在正常情況下的 Content Script 是載入於其他網頁中，所以沒有自己定義好的DOM 可以來掛載。

那怎麼辦？

所以 只好創建一個 給它了。

如下:

先判斷當前頁面有沒有

這邊注意由於 Content Script 是與當前網站共用的DOM，所以在id命名上盡量取的獨特一點，才不會與當前頁面的 id衝突，導致樣式跑掉。

let mountEl = document.getElementById("ext_app");

if (mountEl) {
  mountEl.innerHTML = "";
}
mountEl = document.createElement("div");
mountEl.id = "ext_app"

document.body.appendChild(mountEl);

當創建好之後，再 mount方法綁定，就完成Vue掛載了。

// content.js

import { createApp } from 'vue';
import App from './Content.vue';

const el = createApp(App)
el.mount('#ext_app');

但但但... 且慢，Content Script 這兒的還沒完，因為當你打開指定頁面，什麼也沒有就算了，還會出現以下錯誤:

Uncaught SyntaxError: Unexpected identifier

是不是很眼熟？ 對的 是ES6 Module的關係。

因為在使用Vue的過程中，我們有使用到 import 與 export，但當前的Content Script 不支援 ES6 Module，導致出現錯誤。

這也就是為什麼我們在前面要先介紹如何在 Content Script使用 Es6 Module的原因。

解決方式如下：

• 使用 Inject Script tag 注入頁面
• 使用 Iframe

Inject Script

如果選擇使用 Inject Script tag 注入當前頁面，那注意 Vue實體掛載，就需要 先自定義創建一個<div>，才可以使用

使用 Iframe

如果選擇使用 使用 Iframe，那在 Vue實體掛載，就與Popup 方法一樣，不用自己創建一個DOM，直接在html頁面定義即可。

最後，關於框架選擇的部分:

由於在Extension中使用框架的方法都是大同小異，一樣都需透過網頁中的DOM來掛載，應該不會差太多，所以大家可以依自己專案需求來選擇框架使用。
而在這邊自己選擇Vue的主要原因還是因為自己比較熟悉其技術，還有覺得 Vite 3 + Vue3 一派體系好讚。

以上就是關於 如何在 Chrome Extension 中使用 Vue的相關介紹，那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

今日歌單 -> 莉莉安