Help us understand the problem. What is going on with this article?

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

概要

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 への設定手順

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

以上の手順で拡張機能が有効になります。
この作業でディレクトリの設定ができたので、該当ディレクトリを編集して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);
});

スクリーンショット 2019-04-21 23.28.34.png

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

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

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

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

スクリーンショット 2019-04-21 23.37.17.png

Chromeのアプリを起動する

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

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

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();
  });
}

最後に

a.mov.gif

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

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

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

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした