概要

Chromeには様々な拡張機能がWebストアで公開されています。
New Tab Pageをカスタマイズできる拡張機能もたくさん公開されています。

などなど便利な拡張機能がすでにたくさんあります。

しかし、自分好みのちょうどいいのがなく、自作してみると非常に簡単にできたので、記事にしようと思いました。
この記事を参考に自分専用のNew Tab Pageを作っちゃいましょう。

実装

ディレクトリ構成

MyNewTabPage
├── index.html
└── manifest.json

必要なファイルは2つだけ。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Tab</title>
</head>

<body>
  <!-- コンテンツを記述 -->
</body>

</html>

得にNew Tab Page用の記述などはありません。

manifest.json

{
  "name": "my-new-tab-page",
  "manifest_version": 2,
  "description": "My new tab page.",
  "version": "0.0.1",
  "permissions" : ["management"],
  "chrome_url_overrides" : {
    "newtab": "index.html"
  }
}

ポイントはこの部分

"chrome_url_overrides" : {
  "newtab": "index.html"
}

Chromeでchrome://newtab へアクセスした場合に
index.html を表示するようにします。

JS / CSS

いつものWeb開発と変わりなくJSやCSSも問題なく使えます。
Ajaxなどの通信も可能です。

New Tab Page への設定手順

Chromeで chrome://extensions/ にアクセス
「デベロッパーモード」にチェックを入れる
「パッケージ化されていない拡張機能を読み込む」をクリック
今回実装したディレクトリを選択する

以上の手順で拡張機能が有効になります。
この作業でディレクトリの設定ができたので、該当ディレクトリを編集してNew Tab Pageをリロードすると、反映されます。

Chromeのアプリを表示する

Chromeのアプリを取得できるようにchrome.management API が提供されています。
chrome.management API はChromeのNew Tab Page でのみ使用できるため、
index.html を直接Chromeで開いてる場合などでは使用できません。
動作確認は実際にNew Tab Pageで確認しましょう。

アプリ一覧を取得するにはgetAll メソッドを使用します。

chrome.management.getAll(apps => {
  console.log(apps);
});

これで、インストールしているすべての拡張機能一覧を取得することができます。

拡張機能はいくつか種類があります。
New Tab Pageで表示させたい拡張機能は、Chromeアプリのみです。
getAllメソッドで取得した情報にはisAppというフラグが含まれています。
さらにenabledで拡張機能が有効か無効か判定できます。

拡張機能が有効なChromeアプリのみを取得します。

chrome.management.getAll(apps => {
  apps.forEach(app => {
    if (app.enabled && app.isApp) {
      console.log(app);
    }
  });
});

Chromeのアプリを起動する

表示させたアプリにクリックイベントを設定し、アプリを起動できるようにします。

アプリを起動するにはlaunchApp メソッドを使用し、
引数にはgetAllで取得したappのidを指定します。

chrome.management.launchApp(app.id);

launchAppは今開いているNew Tab Pageでアプリが起動するのではなく、
新しいTabを開いてアプリを起動します。
アプリが起動するとNew Tab Pageは不要なので、
閉じる処理を追加してあげると良いでしょう。

chrome.management.launchApp(app.id);
if (app.launchType === "OPEN_AS_REGULAR_TAB") window.close();

Chromaのように新しいWindowを開いて起動するアプリの場合は
New Tab Pageを閉じる必要はないので、
app.launchType で起動方法をチェックして、OPEN_AS_REGULAR_TABの場合のみ
New Tab Pageを閉じてあげます。

Chromeのアプリを取得して、クリックイベントを設定して表示するサンプルです。
ご参考までに。

function getApps() {
  chrome.management.getAll(apps => {
    apps.forEach(app => {
      if (app.enabled && app.isApp) {
        setApp(app);
      }
    });
  });
}

function setApp(app) {
  const li = document.createElement("li");
  li.className = "apps-list-app";
  li.innerHTML = `
    <img class="apps-image" src="${app.icons[0].url}"/>
    <span class="appId-${app.id} apps-name">${app.shortName}</span>
  `;
  document.querySelector(".apps-list").appendChild(li);

  li.addEventListener("click", () => {
    chrome.management.launchApp(app.id);
    if (app.launchType === "OPEN_AS_REGULAR_TAB") window.close();
  });
}

最後に

私のNew Tab Page はこんな感じで
メモ欄を他の端末と共有できるようにしています。

TwitterのTLやQiitaの記事一覧などを表示させてみるのも面白いかもしれません。

自分の好きなNew Tab Pageを作ってみてはいかがでしょうか！

【Chrome 拡張機能】ChromeのNew Tab Pageを自作してみる

概要

実装