Chrome拡張機能で新規タブのHTMLを設定してみる

JavaScript

Chrome拡張機能で新規タブのHTMLを設定してみる。


chrome_url_overridesでnewtabにHTMLを指定すると、
新規タブでそのHTMLが表示される。

manifest.json
{
  "name": "Sample Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "拡張機能のサンプルです",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  }  
}
newtab.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
  Hello, world!
</body>
</html>

新規タブを開くと、Hello, world!と表示される。


ブックマークを表示してみる

新規のタブにブックマークを表示してみる。

manifest.json

permissionsでbookmarksを許可する。

{
  "name": "Sample Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "拡張機能のサンプルです",
  "permissions": [
    "bookmarks"
  ],
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  }  
}
newtab.html

newtab.jsを読み込むよう修正する。（あとjQueryも読み込むようにしている）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="jquery-1.11.1.min.js"></script>
  <script src="newtab.js"></script>
</head>
<body>
</body>
</html>
newtab.js

お気に入りを取得し、bodyに追加する。

// お気に入りのツリーを全て取得する
chrome.bookmarks.getTree(function(bookmark) {
  
  // [その他のブックマーク]フォルダを取得する
  var other_bookmark = new Array();
  var root = bookmark[0]['children'];
  for (var i in root) {
    if (root[i]['title'] === 'その他のブックマーク') {
      other_bookmark = root[i]['children'];
      break;
    }
  }

  // [その他のブックマーク]フォルダのブックマークをbodyに追加する
  for (var i in other_bookmark) {
    $('body').append('<a href="' + other_bookmark[i]['url'] + '">' + other_bookmark[i]['title'] + '</a><br>');
  }
  
});

その他のブックマークの中身が下記の状態で、新規タブを表示すると、

下記のようにブックマークが表示される。


ファビコンを表示してみる

ファビコンの画像は、「chrome://favicon/（URL）」で参照できる。

manifest.json

permissionsに"chrome://favicon/"を追加する。

・・・
  "permissions": [
    "bookmarks",
    "chrome://favicon/"		←追加
  ],
・・・
newtab.json

ファビコンのimgを追加するよう修正する。

・・・
  // [その他のブックマーク]フォルダのブックマークをbodyに追加する
  for (var i in other_bookmark) {
    $('body').append('<img src="chrome://favicon/' + other_bookmark[i]['url'] + '">');  ← 追加
    $('body').append('<a href="' + other_bookmark[i]['url'] + '">' + other_bookmark[i]['title'] + '</a><br>');
  }
・・・

新規タブを開くと、ファビコンが表示される。