LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-01-04

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

前回、次の記事で、タイトルと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));
    });
  });
});

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

image

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

以上

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3