Posted at

表示中のページのタイトルとURLをキーボードショートカットでクリップボードに保存するChrome拡張を作ってみた

More than 3 years have passed since last update.


はじめに

自分が見ている記事を誰かに共有する際、URLだけを共有すると後で見返した時に「あれ、これって何の記事だったっけ…?」「タイトルも書いておいた方がよかったかも…」と思うことがあるかと思います。

そのため、個人的には


  • 表示中のページのURLだけでなくタイトルも一緒に取得できて、

  • さらに言えば、キーボードショートカットで実行できて、

  • 欲を言うと、クリップボードに保存することができる。

といった機能を持つChrome拡張があれば便利だろうと思い、勉強も兼ねて作ってみることにしました。

この記事では、 表示中のページのタイトルとURLキーボードショートカットクリップボードに保存する ためのChrome拡張を作成するにあたって調べた情報などをまとめていきます。


表示中のページのタイトルとURLを取得する

開いているページ(タブ)のURL、タイトルなどを取得するためにchrome.tabs APIを使用します。

まず、manifest.jsonpermissionstabsを追加します。


manifest.json

[

...
"permissions": [
"tabs"
],
...
]

選択されているタブのTabオブジェクトを取得するにはchrome.tabs.getSelected(integer windowId, function callback)を使用します。function callbackfunction(Tab tab) { ... }のようにすることで、Tabオブジェクトを取得できます。

試しに、タイトルとURLをアラートで表示してみます。background.jsの内容は以下の通りです。


background.js

chrome.tabs.getSelected(null, function(tab) {

alert(tab.title + "\n" + tab.url);
});

chrome.tabs APIを使用すると、タブの読み込みが完了したかどうかのステータス(tab.status)、FaviconのURL(tab.favIconUrl)、開いているタブの横幅(tab.width)や縦幅(tab.height)などを取得することもできます。


キーボードショートカットを実行する

Chrome拡張でキーボードショートカットを実現するには、chrome.commands APIを使用します。

manifest.jsoncommandsを追加し、イベント名・キーパターン・イベントの説明を指定することで、特定のキーボード入力に応じたイベントを実行することができます。ここでは、AltキーとCが同時に入力された時にイベントを実行する例を示します。


manifest.json

{

...
"commands": {
"EventName": {
"suggested_key": {
"default": "Alt+C"
},
"description": "description of this event"
}
},
...
}

上記では"EventName"がイベント名、"default": "Alt+C"がキーパターン、"description": "description of this event"がイベントの説明に該当します。

登録されたキーボードショートカットによりイベントが発生した場合の処理を実装するには、chrome.commands.onCommand.addListener(function callback)を使用します。function callbackfunction(string command) { ... }のようにすることで、発生したイベントのイベント名を取得することができます。

background.jsの中身を以下のようにすることで、Alt+Cが入力された時に、開いているページのタイトルとURLをアラートで表示できます。


background.js

chrome.commands.onCommand.addListener(function(command) {

chrome.tabs.getSelected(null, function(tab) {
alert(tab.title + "\n" + tab.url);
});
});

なお、キーパターンは"default"以外に"windows""mac"を追加することで、OSごとにショートカットの割当を変更することもできます。

また、MacでCtrlキーをショートカットに登録する場合、CtrlではなくMacCtrlとして指定する必要があるようです。(Macの場合、Ctrlは自動的にCommandとして扱われてしまうらしいです。)


クリップボードに保存する

Chrome拡張でクリップボードへの保存を実現するには、document.execCommand('copy')を使用すればいいようです。

document.execCommand('copy')を使用するためには、manifest.jsonpermissionsclipboardWriteを追加する必要があります。(本記事の場合、タブの情報も使用するのでtabspermissionsに加えておきます。)


manifest.json

{

...
"permissions": [
"tabs", "clipboardWrite"
],
...
}

ちなみにdocument.execCommand('copy')textareaなどの特定の要素しかコピーできないようなので、任意のテキストをクリップボードに保存するためには


  1. 任意のテキストを格納したテキストエリアを作成

  2. 作成したテキストエリアを選択し、クリップボードに保存

  3. テキストエリアを削除

といった手順を踏む必要があります。

表示しているページのタイトルとURLをクリップボードに保存するためには、background.jsを以下のように実装します。


background.js

chrome.tabs.getSelected(null, function(tab) {

// 1. 任意のテキストを格納したテキストエリアを作成
var text_area = document.createElement('textarea');
text_area.value = tab.title + "\n" + tab.url;
document.body.appendChild(text_area);

// 2. 作成したテキストエリアを選択し、クリップボードに保存
text_area.select();
document.execCommand('copy');

// 3. テキストエリアを削除
document.body.removeChild(text_area);
});



まとめ

キーボードショートカットを実行するクリップボードに保存するの内容を組み合わせることで、 表示中のページのタイトルとURLキーボードショートカットクリップボードに保存する ためのChrome拡張を作成することができます。

manifest.jsonおよびbackground.jsの最終的な内容は、それぞれ以下のようになります。


manifest.json

{

...
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"clipboardWrite"
],
"commands": {
"save_url_and_title": {
"suggested_key": {
"default": "Alt+C"
},
"description": "Save Title and URL"
}
},
...
}


background.js

chrome.commands.onCommand.addListener(function(command) {

chrome.tabs.getSelected(null, function(tab) {
// 1. 任意のテキストを格納したテキストエリアを作成
var text_area = document.createElement('textarea');
text_area.value = tab.title + "\n" + tab.url;
document.body.appendChild(text_area);

// 2. 作成したテキストエリアを選択し、クリップボードに保存
text_area.select();
document.execCommand('copy');

// 3. テキストエリアを削除
document.body.removeChild(text_area);
});
});



おわりに

そもそも表示しているページのタイトルとURLをクリップボードに保存できるChrome拡張って既に存在しているのでは?と思って探してみたら、やっぱり存在していました。


BlogLinkClipper

現在表示中のページの URL とタイトルを様々な形式でクリップボードにコピーする Google Chrome 拡張機能です。Twitter や、ブログ記事作成のお供にどうぞ。


上記の拡張機能は、HTMLリンクタグ形式やMarkdown記法、Redmine記法などの形式でタイトルとURLを保存することができるというとても便利なものでした。

BlogLinkClipper.png

今後、こちらを 真似して 参考にして今回作成したChrome拡張を普段から使いそうなHTMLリンクタグ形式やMarkdown記法にも対応できるように改良しようと思います。


参考にした記事