# 你知道這是什麼嗎？ Chrome extension MV3 With Vite - Day 11 用 Action 操作 Extension UI 吧 (上)

2022 iThome 鐵人賽

DAY 11

Modern Web

你知道這是什麼嗎？ Chrome Extension MV3 With Vite系列第 11 篇

# 你知道這是什麼嗎？ Chrome extension MV3 With Vite - Day 11 用 Action 操作 Extension UI 吧 (上)

14th鐵人賽 chrome extension

Winnie Wu

團隊啊 ah

2022-09-11 17:35:29

1065 瀏覽

分享至

Hi Dai Gei Ho~ 我是Winnie ~

截至目前為止，在此系列文章中，我們介紹了Manitfest、Background 、 Coontent Script 為Chrome Extension 的常見組成，其中還有一個項目我們沒有介紹到，那就是 Extension 的 Action。

Action 是什麼?

Action 為設定 Chrome Extension UI介面的相關方法，主要是以最小使用範圍及有目的性的存在，可以增強使用者的網頁瀏覽體驗。所以在 Extension 相關UI介面操作中，提供許多定義方法讓開發者能依功能需求來自定義Extension 樣式。

以下圖為例：

右圖為Chrome 常見的預設彈跳視窗，而左圖為自定義的 Extension 介面樣式，主要是由 HTML+CSS+JavaScript所以組成，而視窗可以依照功能需求來放置內容，甚至與使用者進行互動，來增強使用者的瀏覽體驗。

基本設定

自定義 Popup 視窗

同樣地，要自定義Extension Popup視窗一樣也需在 Manifest.json 中Action欄位的"default_popup"註冊相關HTML檔案路徑

  "action": {
    "default_popup": "/popup/popup.html"
    "default_icon": {
      "16": "logo_16x16.png",
      "32": "logo_32x32.png"
    }
    ...
  },

設置 Extension Icon :

如果沒有圖供相關Icon，Chrome會在工具欄中添加一個帶有 Extension 第一個字母的通用圖標(如下圖)，所以建議各位可以依照圖片規範至少添加一個Icon來表示其用途意義，增添使用者體驗。

  "action": {
    "default_icon": {
      "16": "logo_16x16.png",
      "32": "logo_32x32.png"
    }
    ...
  },

為達到良好的視覺體驗，官方文件在此建議，關於圖片尺寸建議以正方形 16x16 或 32x32的png格式最為適合，同時在Manifest 中的任何圖片目前都不支援svg格式。

設置 Extension title提示 :

"default_title"為新增Extension 提示。

  "action": {
     "default_title": "IT_HELP 2022 DEMO WITH WINNIE",
    ...
  },

新增 Action Badges:

Action Badges 可以用來表示當前 Extension 的狀態，可以通過 chrome.action.setBadgeText()、chrome.action.setBadgeBackgroundColor()標示狀態文字樣式，

chrome.action.setBadgeText({text: 'ON'});
chrome.action.setBadgeBackgroundColor({color: '#4688F1'});

以下情境為範例:

假設在Popup彈跳視窗中有一個Switch開關，如果想知道目前為關閉還是開啟狀態需再次打開視窗才能知道其狀態，此時如果透過 setBadge方法即可於工具列中知道。

動態切換 Popup :

如需依照情境需求動態切換Popup視窗內容，可以透過chrome.action.setPopup方法來設置。

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'});
  }
});

動態切換 Extension Icon :

如需依照情境需求動態切換Extension Icon，可以透過chrome.action.setIcon方法來設置。

    const setIconStatus = async (iconPath) => {
      await chrome.action.setIcon({
        path: iconPath
      });
    };

    const setAnalyzeCase = async () => {
      isAnalyze = !isAnalyzeCase;
      await useChrome.setStorage({ isAnalyze: isAnalyze});
      isAnalyzeCase.value
        ? await setIconStatus("icons.png")
        : await setIconStatus("icons_close.png");
    };