#やりたいこと
- 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キーで動作したり、空だったら何もしないようにしています。
#おわりに
社内で好評なので、作ってよかったです。