タイトルとURLを同時にコピーするChrome拡張機能

自分が楽したくて、最近作ったChrome拡張機能の紹介です。

こんな方へおすすめ
・業務でJira/Redmine/Backlogなどのチケットを、チャットで連携することが多い
・調べ物をする際に、URLをコピペしておくことがある

What is 「Clip the title and URL」？

コピーしたいサイト上でコピーボタンを押して、エディタやチャット上にペーストするだけです。
簡単にタイトルとURLを同時にペーストすることができます。

※コピーボタンは2種類からお好きな方を。
・右クリックメニュー(ContextMenu)
・ブラウザ上部の拡張機能ボタン

ペーストした時のフォーマットはこんな感じです。

▼h1タイトル
https://domain.xxxx/testtestetst

Jiraチケットの場合はこんなイメージ

▼[TEST-1] IE11でコメント欄表示が崩れる - Jira
https://ay123x.atlassian.net/browse/TEST-1

Souce

利用している権限はContextメニューのみ。

manifest.json

{
    "manifest_version": 2,
    "name": "Clip the title and url",
    "version": "1.0.2",
    "description": "URLとタイトルをクリップボードにコピーするChrome拡張機能",
    "icons": {
      "16": "image/icon16.png",
      "48": "image/icon48.png",
      "128": "image/icon128.png"
    },
    "background" : {
        "scripts" : ["js/background.js"]
    },
    "permissions": [
        "contextMenus"
    ]
  }

background.js

{
  chrome.contextMenus.create({
    "type"  : 'normal',
    "title" : 'このサイトのURLとタイトルをコピー',
    "contexts" : ['all'],
    "onclick" : copy()
  });

  /**
   *
   * @param Object info 
   * @param Object tab 
   * @returns
   */
  function copy(info, tab) {
    return function(info, tab) {
      let url = tab.url;
      let title = tab.title;
      let str = `▼${title}\n${url}`;
      copyToclipboard(str);
    }
  }

  /**
   *
   * @param string str
   */
  function copyToclipboard(str) {
    let textArea = document.createElement('textarea');
    document.body.appendChild(textArea);
    textArea.value = str;
    textArea.select();
    document.execCommand('copy');
  }
}

Souce補足

chrome.contextMenus.createを呼び出し、onclickでcopyメソッドが呼ばれるようにしています。

  chrome.contextMenus.create({
    "type"  : 'normal',
    "title" : 'このサイトのURLとタイトルをコピー',
    "contexts" : ['all'],
    "onclick" : copy()
  });

Onclickから引数でOnClickDataと、タブの情報を受け取ることができます。

今回はタブ情報から、タブのURLとタブのタイトルを取得し、フォーマット整形しています。

  function copy(info, tab) {
    return function(info, tab) {
      let url = tab.url;
      let title = tab.title;
      let str = `▼${title}\n${url}`;
      copyToclipboard(str);
    }
  }

そして最後に、
copyToclipboardメソッドで仮想的にテキストエリアを生成し、整形したデータをテキストエリアのvalueとして代入。選択した状態でコピーを実行しています。

  function copyToclipboard(str) {
    let textArea = document.createElement('textarea');
    document.body.appendChild(textArea);
    textArea.value = str;
    textArea.select();
    document.execCommand('copy');
  }

今後について

今後考えている拡張として、
コピーするときにサイト名などが入ってしまうことが多いので、
ホスト名を指定して特定の文字列を除く設定をできるオプションページなどを考えています。

気になる点や、要望などありましたら、コメントください。
使ってくれる人が増えたら嬉しいです。