イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

デジャヴか単なる忘却か教えてくれたりするかもしれないChrome Extension

こんにちは、クロームの綴りをいつまでも間違えているオザサです。

梅雨入りも果たしてジメジメしてまいりましたが、
皆様はいかがお過ごしでしょうか。

こうも暑いとなかなか外に出るのも億劫になるというもので、
日がなネットサーフィンしちゃうなんて御仁もいらっしゃるのではないでしょうか。

そんな時にありがちなのが(?)、
「あれ、このページなんか見たことあるかも?」
という感覚ですよね?!!

何かの前触れのデジャヴか、
はたまた単なる物忘れか、
ここは一つはっきりきっちりさせなくてはなりません。

ということで
「今開いているページの表示回数をバッチで教えてくれる」拡張機能を作りました。

実装

manifest.json

{
 "manifest_version": 2,
 "name": "deja vu checker",
 "version": "0.1.0",
 "description": "Access to browser history. Displays the number of times you saw the page.",
 "author": "Yuki Ozasa",
 "background": {
  "scripts": ["background.js"],
  "persistent": false
 },
 "browser_action": {
  "default_icon": "test.png",
  "default_title": "test"
 },
 "content_scripts": [{
  "matches": [ "http://*/*", "https://*/*" ],
  "js": [ "script.js" ]
 }],
 "permissions": [
  "tabs",
  "history"
 ]
}

backgroundのpersistentをfalseにしてあげてメモリに気を使いつつ、 permissionsでtabsとhistoryにアクセスできるようにしてあげましょう。

script.js

chrome.runtime.sendMessage({ message: "scriptToBackground" });

ここがちょっと自信ないんですが、 コンテンツがロードされるタイミングでscript.jsが発火して、 background.jsの処理を実行しようとしてます。

background.js

chrome.runtime.onMessage.addListener(function( message, sender, sendResponse ) {
    if( message.message ){
        // 現在有効になっているタブの情報を取ってきます。
        chrome.tabs.getSelected(null, function(tab) {
                var url = tab.url;
                var id  = tab.id;
                obj = {url:url};
                // ブラウザの閲覧履歴をURLベースで引っ張ってきましょう。
                chrome.history.getVisits(obj, function(visitItems){
                        itemCount = visitItems.length;
                        // カウントを渡すのはもちろん、どのタブにバッチをつけるか指定します!
                        chrome.browserAction.setBadgeText({text:String(itemCount),tabId:id});
                });
        });
    }
});

たったこれだけ・・・
調べつつだったのもあり結構時間かかったのにそんな感がないですね。 逆にすっきりしていい!!

代替テキスト

ちょっと小さいですね。拡大しますと。

代替テキスト

わーい

地味にハマったポイント

・setBadgeTextはiconが設定されていないと動かない。
→横着して画像なども作らず色々やろうとしたのですが、ダメでした。

・backgroundのscripts実行タイミングとcontent_scriptsのscripts実行タイミングを正しく理解できてなかった
→コンテンツのリロードとエクステンションそのもののリロードを勘違いしてまして、ちょっとハマってしまいました。

今後の課題

  • ロードのタイミングによっては先にhistoryにデータが格納されてしまい意図しない動作になる

  • 業務で使うページなど表示回数が多すぎるものは数字が見えなくなる

一つ課題をクリアしてまた一つ課題を見つけていくって進歩してる感じでいいですね。 Chrome Extensionがお手軽に実装できるので、私自身牛歩ではありますが、ちょこちょこ作っていこうと思います。