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>
ブックマークを表示してみる
新規のタブにブックマークを表示してみる。
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>'); } ・・・