概要
これは初心者のブラウザ拡張機能 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の場合