chrome拡張にオプション画面を付けてみた。
参考URL:
https://developer.chrome.com/extensions/optionsV2
これらを設定できる画面が欲しくなったので、作ってみた。
1, 食べログを別タブで開く数
2, レビューの時間帯(ランチorディナーor全て)
※並び替えは「標準」とか「いいね順」とかあるけど、新しい順だけでいいかと
例によってmanifest.json に項目追加
permissionsにstorage追加(設定値を保存するので)
options_ui項目を追加(これがオプションの設定画面)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
{ "name": "別タブで食べログレビュー", "version": "0.0.3", "manifest_version": 2, "description": "その店の食べログレビューを別タブで表示", "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "browser_action": { "default_title": "最新レビューを別タブで表示" }, "background": { "scripts": [ "jquery-3.2.1.min.js", "background.js" ] }, "permissions": [ "activeTab", "tabs", "storage" ], "options_ui": { "page": "options.html", "chrome_style": true } } |
オプション画面は普通のHTML
options.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <title>Chrome Extension Options</title> <style> body: { padding: 10px; } </style> </head> <body> 時間帯: <select id="timezone"> <option value="lunch">ランチ</option> <option value="dinner">ディナー</option> <option value="all">全て</option> </select> 別タブ数: <select id="tab_num"> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> </select> <button id="save">保存</button> <div id="status"></div> <script src="options.js"></script> </body> </html> |
オプション画面で保存ボタンを押された時の処理(Chromeアカウントに保存)
options.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
// 設定画面で保存ボタンを押されたら function save_options() { // 設定値を変数に格納 var timezone = document.getElementById('timezone').value; var tab_num = document.getElementById('tab_num').value; // chromeアカウントと紐づくストレージに保存 chrome.storage.sync.set({ selected_timezone: timezone, selected_tab_num: tab_num }, function() { // 保存できたら、画面にメッセージを表示(0.75秒だけ) var status = document.getElementById('status'); status.textContent = 'Options saved.'; setTimeout(function() { status.textContent = ''; }, 750); }); } // 設定画面で設定を表示する function restore_options() { // デフォルト値は、ここで設定する chrome.storage.sync.get({ selected_timezone: 'lunch', selected_tab_num: 5 // 保存された値があったら、それを使う }, function(items) { document.getElementById('timezone').value = items.selected_timezone; document.getElementById('tab_num').value = items.selected_tab_num; }); } // 画面表示と保存ボタンのイベントを設定 document.addEventListener('DOMContentLoaded', restore_options); document.getElementById('save').addEventListener('click', save_options); |
chrome拡張の本体部分の処理(食べログレビューを別タブで表示)
background.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// アドレスバーの隣のアイコンをクリックされたら chrome.browserAction.onClicked.addListener(function(command) { // アクティブなタブ情報を取得 chrome.tabs.getSelected(null, function(tab) { // ストレージから設定値を取得 chrome.storage.sync.get(null, function(items) { var selected_timezone = items.selected_timezone; var selected_tab_num = items.selected_tab_num; // レビューページ(昼間・新着順)のURLを生成 //昼間 or 夜 or 全て switch(selected_timezone){ case "lunch" : option = "dtlrvwlst/COND-1/smp1/D-visit/?lc=0&rvw_part=all"; break; case "dinner" : option = "dtlrvwlst/COND-2/smp1/D-visit/?lc=0&rvw_part=all"; break; case "all" : option = "dtlrvwlst/COND-0/smp1/D-visit/?lc=0&rvw_part=all"; break; default : option = "dtlrvwlst/COND-0/smp1/D-visit/?lc=0&rvw_part=all"; break; } var review_list_url = tab.url + option; // 非同期でレビューページのソースを取得 $.ajax({ type: "get", url: review_list_url, success: function(data){ review_num = 0; // 各レビューへのURLを取得して、別タブで開く(rvw-item__title-targetがレビューのclass名っぽい) $(data).find('.rvw-item__title-target').each(function(){ var review_url = 'https://tabelog.com' + $(this).attr('href'); chrome.tabs.create({url: review_url }); // 別タブで開くレビュー数のMAX if(++review_num >= selected_tab_num){ exit; } }); } }); }); }); }); |
Chrome機能拡張APIが慣れるのが面倒なだけで、普通のWebプログラミング(jQuery)が使えれば、Chrome拡張は簡単に作れそう！