dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

ページのタイトルとURLをMarkdown形式でコピーするChrome拡張作った

chrome拡張

タイトルの通り。
現在開いているページのタイトルとURLを Markdown 形式 ([title](url)) でクリップボードにコピーするだけの Chrome 拡張を作った。

ページのタイトルとURLをコピーする Chrome 拡張は既にあった
（https://chrome.google.com/webstore/detail/copy-title%2Burl-to-clipboa/hbnaclhngkhpmpgmfakaghgjbblokeeh とか）
が、Markdown 形式でコピーしたい というのと、形式を選べなくてもいいので ショートカットキー1発でコピーしたい という要望があって自作することにした。

インストール方法・使い方

（2017/02/01追記）

Chrome Web Store に公開した。

（追記ここまで）

インストール

リポジトリを clone する。
Chrome で chrome://extensions/ を開き、「パッケージ化されていない拡張機能を読み込む...」から clone したディレクトリを選択する。
（ボタンが表示されていない場合は「デベロッパーモード」に ✔ を入れる）

f:id:dackdive:20151227131211p:plain

または、リポジトリに .crx ファイルも同梱しているのでそちらをドラッグ＆ドロップしても良い。

f:id:dackdive:20151227131320p:plain

使い方

コピーしたいページを開いた状態で Ctrl+Shift+C キーを押すと、タイトルと URL がクリップボードにコピーされる。

f:id:dackdive:20151227131615p:plain

Ctrl+Shift+C 以外のショートカットを割り当てたい場合は chrome://extensions/ 右下の「キーボード ショートカット」から設定を変更できる。

f:id:dackdive:20151227131756p:plain

f:id:dackdive:20151227131835p:plain


開発メモ

現在開いているタブは chrome.tabs.query で取得する

選択中のタブの取得には chrome.tabs.getSelected というメソッドもあるが、現在は deprecated。
かわりに chrome.tabs.query を使う。

query にはオプションでクエリパラメータを辞書で渡すことができるので

var queryInfo = {
  active: true,  // 現在アクティブになっているタブ
  currentWindow: true  // 現在のウインドウ
};

を指定している。

また、タブ操作には manifest.json の permissions に tabs を追加しなければいけない。


クリップボードへのコピーは document.execCommand('copy') を使う

参考：https://qiita.com/yoichiro@github/items/43ee75196bf643cde093

選択中の DOM の値をコピーできる？よくわかっていないがこんな感じ。
input 要素でなくても良い。

(html)

<input id="copied" value="">

(JavaScript)

var obj = document.getElementById('copied');
obj.select();
document.execCommand('copy');


Browser Action(popup) だと自動でショートカットキーを設定できるようになる

最初は Mousetrap.js とかの JS ライブラリ使うのかなと思ってたんですが。

Chrome 拡張のうち Browser Action、すなわち
「ブラウザ右上にアイコンが表示され、クリックすると popup が表示される」タイプについては
自動的にショートカットキーが設定可能になる。

「使い方」でも触れた通り、chrome://extensions/ の「キーボード ショートカット」から設定できる。
Chrome 拡張をインストールしたユーザーが自分好みに設定を変えられるのでこれでいいはず。

また、manifest.json に commands というプロパティを指定するとデフォルトのショートカットキーを割り当てることもできる。

"commands": {
  "_execute_browser_action": {
    "suggested_key": {
      "default": "Ctrl+Shift+C",
      "mac": "MacCtrl+Shift+C"
    }
  }
}

_execute_browser_action は予約語で、これが popup を開くというアクションに対応する。

ただし、コマンドによってはうまくデフォルトで設定されてくれなかったりもしてこのあたりはよくわからなかった。
ちょっと試した感じだと Mac の Command キーを割り当てるとうまくいかない？
（Ctrl は Mac だと Command 扱いになるため、Ctrl キーを割り当てるには明示的に MacCtrl と記載する）

commands プロパティはこの他にも任意のコマンド名でショートカットキーを割り当てることができる。
（この場合は description 必須）

"commands": {
  "foo": {
    "suggested_key": {
      "default": "Ctrl+Shift+F",
      "mac": "MacCtrl+Shift+F"
    },
    "description": "foo"
  }
}

「キーボード ショートカット」にも表示されるようになるので、こちらにもユーザーが任意のショートカットキーを割り当てることができる。

f:id:dackdive:20151227145622p:plain

コマンドは background ページで chrome.command.onCommand.addListener を使ってリスナーを登録しておくと
ショートカットキーが入力されたときに任意の JavaScript を実行させることが可能。

chrome.commands.onCommand.addListener(function(command) {
  switch(command) {
    case "foo":
      executeFoo();
      break;

参考：try catch and ...release: Chrome拡張機能のショートカットキー設定


.crx ファイルの生成は chrome://extensions/ の「拡張機能のパッケージ化...」から行う

しばらくどこからやるのかわからなかった。

f:id:dackdive:20151227150211p:plain


オチ

すでにそういう Chrome 拡張あった。。。

これ、popup を表示したときにどのタブをコピーするか選択するメニューが表示されるので
逆に言うとショートカットキー1発でコピーすることはできなさそうだなーと思ってスルーしてました。

f:id:dackdive:20151227133110p:plain

が、chrome://extensions/ の「キーボード ショートカット」から現在のタブ (current tab) のコピーにショートカットキーを割り当てられることが判明。

f:id:dackdive:20151227133506p:plain

これで事足りたじゃん。。。
今度ソースコード読んでみよう。

※ 他人が開発した Chrome 拡張のソースを読む方法については