Action API 討探

Action api 是用來控制 extension 的 icon 行為的 API , 個人覺得發揮的空間沒有很大 因為 icon 很小一個 所以不是很容易發揮, 但是可以發現 Google 把操作的權利都給開發者, 所以會不會用應該算開發者的問題.

Manifest

{
  "name": "Action Extension",
  ...
  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },
  ...
}

在 manifest.json 中有一塊是 action, 其實就是在呼叫 action api.

UI – Icon

API action.setIcon 可以讓在在去設定 Icon, Google 範例中 是放入一個 object

1. path 模式

 chrome.action.setIcon({ path: "green.png" });

2. imageData

let emojiFile = `images/emoji-${EMOJI[index]}.png`;
  lastIconIndex = index;

  // There are easier ways for a page to extract an image's imageData, but the approach used here
  // works in both extension pages and service workers.
  let response = await fetch(chrome.runtime.getURL(emojiFile));
  let blob = await response.blob();
  let imageBitmap = await createImageBitmap(blob);
  let osc = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
  let ctx = osc.getContext('2d');
  ctx.drawImage(imageBitmap, 0, 0);
  let imageData = ctx.getImageData(0, 0, osc.width, osc.height);

  chrome.action.setIcon({ imageData });

可以使用放入檔案, 或是用 Canvas 再去畫一個新的. 還蠻有趣的設計. 如果是我應該就只有提供. path 的模式了說. 多看別人設計的,還是可以刺激一下想法

UI – enable / disable

API 為. chrome.action.disable() or chrome.action.enable();

  if (actionEnabled) {
    chrome.action.disable();
  } else {
    chrome.action.enable();
  }
  actionEnabled = !actionEnabled;

可以看到的就是原有的 icon 會有顯示, 或是反灰的效果

UI- popup

這個是在 manifest.json “default_popup”: “popup.html” 的行為, 這意味著你有也可以動態的去變他. 當成是另類的一種選項

UI – Badge Text

這是可以在 Icon 上上一串文字, 不過我也是想不出來可以用來幹嘛.. 都也是那邊不是很顯眼

  await chrome.action.setBadgeText({ text });

UI – Hover Text

這是可以在 Icon 上, 滑鼠滑過去時, 會有提示的文字 也是 “default_title”: “Click Me”, // optional, shown in tooltip 一開始就可設定好

chrome.action.setTitle({ title });
chrome.action.getTitle();

心得

Google 的 API 文件寫的都很清楚, 也都有 github 的程式碼可以參考, 用起來很方便, 至於有什麼想法要做,就是另一回事了.

Reference

https://developer.chrome.com/docs/extensions/reference/action/

https://developer.chrome.com/docs/extensions/reference/action/#method-setIcon

https://github.com/nnnnicholas/pinboard-1click/blob/a2ab660d606693fe0fd34da7034d55a2961bf95c/background.js