やりたいこと

Chrome拡張機能開発の練習をしたい。
社内システムの個別ページに直接遷移したい。

社内の案件管理システムは、案件番号がURLの末尾になります。

http://（固定のURL）/AAAAA
http://（固定のURL）/BBBBB

個別のページにたどり着くまでの階層が深かったので、案件番号を入力して直接遷移するためにChrome拡張機能を作ることにしました。（~~社内システムを直した方が…~~）

完成品のイメージ

テキストボックスに値を入力してボタンを押すと、入力値を末尾に付与したURLのページを新しいタブで開きます。
なお、アイコンはICOOON MONOからいただいています。

完成したソース

manifest.json

{
    "name"          : "Direct",
    "version"       : "1",
    "manifest_version"  : 2,
    "description"       : "個別ページに直接遷移します。",
    "browser_action": {
      "default_icon": {
      "19": "19px.png"
    },
    "default_title": "Direct",
    "default_popup": "popup.html"
  },
    "permissions"       :
        [
            "tabs"
        ],
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

jQueryを使うために、https://ajax.googleapis.comを読込みできるようにcontent_security_policyに記載しています。

popup.html

<DOCTYPE HTML>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body style="width:280px;">
    <center>
      <h1>Direct</h1>
      <input type="text" id="q"></input>
      <input type="button" id="s" value="Go">
    </center>
  </body>
</html>

ポップアップ表示されるHTMLです。
テキストボックスとボタンがあるだけのシンプルなページです。

popup.js

$(function() {
  $('#s').click(function() {
     var url  = "（固定のURL）" + $('#q').val();
     chrome.tabs.create({url: url});
  });
  //Enterキーでボタン動作
  $('#q').keypress(function(event) {
    if (event.which === 13){
    //空だったら何もしない。
        if(!$(this).val().match(/\S/g)){
         return false;
        }
        else{
            $('#s').click();
        }
    }
  });
  //自動フォーカス
  $('#q').focus();
});

popup.htmlのボタンクリックで動きます。
こちらもシンプルな内容ですが、Enterキーで動作したり、空だったら何もしないようにしています。

おわりに

社内で好評なので、作ってよかったです。

入力されたテキストをURLの末尾に付与して遷移するだけのChrome拡張機能

やりたいこと

完成品のイメージ

完成したソース

おわりに