Google Chrome 拡張機能の開発 - 2 - 早速自作したものに機能追加していく

前回作成した拡張機能を拡張する

前回、次の記事で、タイトルとURLをクリップボードへコピーする拡張機能を作りました。
Google Chrome 拡張機能の開発 - 1 - はじめのいっぽ - Qiita

同様の拡張機能は沢山あるかと思いますが、とことん自分好みにしたいのなら作った方が早いです。
しかもめちゃくちゃ簡単です。（もっとも自分は、そのやり方を紹介して下さっていた方のおかげです！）

さて、自分はQiitaと、はてなブログをやっています。しかもはてなブログははてな記法でやっています。
リンクのルールはそれぞれ違うので、前回に加え、はてな記法でのコピーをするようにします。

以下、その内容です。

manifest.json

manifest.json

{
  "manifest_version": 2,
  "name": "R Chrome Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "clipboardWrite"
  ]
}

manifest.jsonは変更なし

popup.html

popup.html

Get Title&URL<br>
<button id="Qiita">Qiita</button><button id="はてな">はてな</button>
<textarea id="text"></textarea>
<script src="jquery-3.1.1.min.js"></script>
<script src="./popup.js"></script>

ラベルを追加して、はてな用のボタンを追加するとともに、名称変更等。

popup.js

popup.js

$(function(){
  function copyText(val){
      $("#text").val(val);
      $("#text").select();
      document.execCommand('copy');
  }
  $("#Qiita").on("click", function(){
    chrome.tabs.getSelected(null, function(tab){
      copyText("[{0}]({1})".replace("{0}", tab.title).replace("{1}", tab.url));
    });
  });
  $("#はてな").on("click", function(){
    chrome.tabs.getSelected(null, function(tab){
      copyText("[{1}:title={0}]".replace("{0}", tab.title).replace("{1}", tab.url));
    });
  });
});

テキストエリアとクリップボードへのコピー用の処理を関数化し、それぞれのボタンはフォーマット化したテキストを関数へと渡すように変更。

こんな感じで簡単に機能追加していけるので、鼻血が出そうになります。

以上

前回	一覧	次回
はじめのいっぽ	シリーズ一覧	保存できるようにする