Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

以上

前回 一覧 次回
はじめのいっぽ シリーズ一覧 保存できるようにする
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away