Chrome Extension v3 技能清单

使用 Navigator API

背景

由于 Navigator API 的安全策略问题，它并不能直接在插件环境中使用，推荐把复制的逻辑在客户端环境使用 chrome.scripting.executeScript 来完成。例如在插件右键菜单中去复制一张图片，可以这么做：

background script

async function clipboardImagewrite(imgUrl: string) {
  function loadImage(url: string): Promise<HTMLImageElement> {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.crossOrigin = "anonymous";
      img.onload = () => resolve(img);
      img.onerror = () => reject(new Error("Failed to load image"));
      img.src = url;
    });
  }

  return new Promise(async (resolve, rejected) => {
    try {
      try {
        const img = await loadImage(imgUrl);
        const canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext("2d")!;
        ctx.drawImage(img, 0, 0);
        canvas.toBlob((blob) => {
          navigator.clipboard
            .write([new ClipboardItem({ "image/png": blob! })])
            .then(resolve)
            .catch(rejected);
        }, "image/png");
      } catch (err) {
        rejected(err);
      }
    } catch (error) {
      throw error;
    }
  });
}

chrome.contextMenus.create({
  id: "copyImg",
  title: "复制图片",
  contexts: ["image"],
  type: "normal",
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId === "copyImg") {
    await chrome.scripting.executeScript({
      target: { tabId: tab!.id! },
      func: clipboardImagewrite,
      args: [info.srcUrl!],
    });
  }
});