はじめに
自分が見ている記事を誰かに共有する際、URLだけを共有すると後で見返した時に「あれ、これって何の記事だったっけ…？」「タイトルも書いておいた方がよかったかも…」と思うことがあるかと思います。
そのため、個人的には
- 表示中のページのURLだけでなくタイトルも一緒に取得できて、
- さらに言えば、キーボードショートカットで実行できて、
- 欲を言うと、クリップボードに保存することができる。
といった機能を持つChrome拡張があれば便利だろうと思い、勉強も兼ねて作ってみることにしました。
この記事では、 表示中のページのタイトルとURL を キーボードショートカット で クリップボードに保存する ためのChrome拡張を作成するにあたって調べた情報などをまとめていきます。
表示中のページのタイトルとURLを取得する
開いているページ（タブ）のURL、タイトルなどを取得するためにchrome.tabs APIを使用します。
まず、manifest.jsonのpermissionsにtabsを追加します。
[
...
"permissions": [
"tabs"
],
...
]
選択されているタブのTabオブジェクトを取得するにはchrome.tabs.getSelected(integer windowId, function callback)を使用します。function callbackをfunction(Tab tab) { ... }のようにすることで、Tabオブジェクトを取得できます。
試しに、タイトルとURLをアラートで表示してみます。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.jsonにcommandsを追加し、イベント名・キーパターン・イベントの説明を指定することで、特定のキーボード入力に応じたイベントを実行することができます。ここでは、AltキーとCが同時に入力された時にイベントを実行する例を示します。
{
...
"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 callbackをfunction(string command) { ... }のようにすることで、発生したイベントのイベント名を取得することができます。
background.jsの中身を以下のようにすることで、Alt+Cが入力された時に、開いているページのタイトルとURLをアラートで表示できます。
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.jsonのpermissionsにclipboardWriteを追加する必要があります。（本記事の場合、タブの情報も使用するのでtabsもpermissionsに加えておきます。）
{
...
"permissions": [
"tabs", "clipboardWrite"
],
...
}
ちなみにdocument.execCommand('copy')はtextareaなどの特定の要素しかコピーできないようなので、任意のテキストをクリップボードに保存するためには
- 任意のテキストを格納したテキストエリアを作成
- 作成したテキストエリアを選択し、クリップボードに保存
- テキストエリアを削除
といった手順を踏む必要があります。
表示しているページのタイトルとURLをクリップボードに保存するためには、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の最終的な内容は、それぞれ以下のようになります。
{
...
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"clipboardWrite"
],
"commands": {
"save_url_and_title": {
"suggested_key": {
"default": "Alt+C"
},
"description": "Save Title and URL"
}
},
...
}
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拡張って既に存在しているのでは？と思って探してみたら、やっぱり存在していました。
現在表示中のページの URL とタイトルを様々な形式でクリップボードにコピーする Google Chrome 拡張機能です。Twitter や、ブログ記事作成のお供にどうぞ。
上記の拡張機能は、HTMLリンクタグ形式やMarkdown記法、Redmine記法などの形式でタイトルとURLを保存することができるというとても便利なものでした。
今後、こちらを 真似して 参考にして今回作成したChrome拡張を普段から使いそうなHTMLリンクタグ形式やMarkdown記法にも対応できるように改良しようと思います。
参考にした記事
- Chrome拡張を作成する
- 表示中のページのタイトルとURLを取得する
- キーボードショートカットを実行する
- クリップボードに保存する