食べログのレビュー(5件くらい)を別タブで開くChrome拡張を作ってみた
お店の食べログトップページで、Chrome拡張のアイコンをクリックされたら別タブにババっと開いてくれるのでレビューを見るのが楽になった。
作ってみて思ったのはChrome拡張はマクロやスクリプトの感覚やね。逆にいうとエラーが出ないのでデバッグって、どうやるのが正しいのだろうか…。
追加機能としては、条件変更(今は昼間・新着順・5件で固定)できるオプション画面があるといいかな?
Chromeウェブストアからインストールしてみたら、「閲覧履歴の読み取り」がアクセス可能!って表記があったけど、タブ情報を使ったから?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{ "name": "別タブで食べログレビュー", "version": "0.0.2", "manifest_version": 2, "description": "その店の食べログレビューを最新5件を別タブで表示", "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "browser_action": { "default_title": "最新レビュー5件表示" }, "background": { "scripts": [ "jquery-3.2.1.min.js", "background.js" ] }, "permissions": [ "activeTab", "tabs" ] } |
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 |
// アドレスバーの隣のアイコンをクリックされたら chrome.browserAction.onClicked.addListener(function(command) { // アクティブなタブ情報を取得 chrome.tabs.getSelected(null, function(tab) { // レビューページ(昼間・新着順)のURLを生成 var review_list_url = tab.url + "dtlrvwlst/COND-1/smp1/D-visit/?lc=0&rvw_part=all"; // 非同期でレビューページのソースを取得 $.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 >= 5){ exit; } }); } }); }); }); |