概要

これは初心者のブラウザ拡張機能 Advent Calendar 2024の10日目の記事です。

ここではOSのクリップボードを使う方法を記載します。

使う関数

navigator.clipboardを使います。
Clipboard

関数	機能
navigator.clipboard.read()	任意のデータの読み込み
navigator.clipboard.readText()	テキストデータの読み込み
navigator.clipboard.write()	任意のデータの書き込み
navigator.clipboard.writeText()	テキストデータの書き込み

read()とwrite()はすべてのブラウザに互換性があるわけではないため、使用する際は注意すること

具体的なソースコード

クリップボードへテキストを書き込んで通知する拡張機能です。

background.js

browser.menus.create(
  {
    id: "sample",
    title: "sample menu",
    contexts: ["page"],
  }
);

function clipboardWrite(data) {
  navigator.clipboard.writeText(data).then(
    () => {
      createNotification("OK", "コピーしました")
    },
    () => {
      createNotification("Failed", "失敗しました")
    },
  );
}

function createNotification(title, message) {
  browser.notifications.create({
    type: "basic",
    title: title,
    message: message,
  });
}

browser.menus.onClicked.addListener((info, tab) => {
  console.log("clicked");
  if (info.menuItemId === "sample") {
    clipboardWrite("hogehoge");
  }
});

clipboardWrite関数内でwriteText関数を呼び出しクリップボードへ書き込みます。返り値がPromiseなのでthenを使って成功時と失敗時で処理を分けます。

後続処理では成功、失敗に応じて通知メッセージを変えています。

manifest.json

{
    "browser_specific_settings": {
        "gecko": {
          "id": "the-town-sample-clipboard@example.com"
        }
    },
    "manifest_version": 3,
    "name": "init-extention",
    "version": "0.1",
  
    "description": "クリップボードサンプル",
  
    "icons": {
      "48": "icons/icon-48.png"
    },

    "background": {
        "scripts": ["background.js"]
      },
  
      "permissions": [
        "menus",
        "notifications"
      ]
}

必要な権限はメニューと通知にアクセスするためmenusとnotificationsを入れていますが、クリップボード関連ではないです。

書き込み時はアクティブなタブへの権限が自動的に付与されます。
読み込み時はclipboardReadを割り当てる必要があります。
※Firefoxの場合

参考

クリップボードとのやりとり