メインコンテンツへスキップ
見出し画像

iGoogleの代わりを自作した|RSSとブックマークを並べるChrome拡張機能(ZIP付き)

    Chromeの「新しいタブ」を、RSSの新着記事とよく使うサイトのブックマークを並べたスタートページに置き換える拡張機能「StartBoard」を自分で作りました。昔使っていたiGoogleの代わりとして、広告の入らないシンプルなスタートページがほしかったのがきっかけです。

    この記事では、作った経緯と機能、Chrome拡張機能で新しいタブを置き換える仕組み、ZIPを使ったインストール手順をまとめます。ソース一式は記事の途中にZIPで添付しています。拡張機能に興味のある方は、試したり中身を読んだりしてみてください。

    画像

    iGoogle → start.me → 自作、スタートページの遍歴

    iGoogleが終わった日

    以前は、iGoogleというスタートページを使っていました。サイトごとにRSSを表示するシンプルなもので、結構使いやすく重宝していました。ところが、ある時サービスが廃止になってしまいました。

    当時の報道によると、Googleは2012年7月にiGoogleを含む5つのサービスの終了を発表し、iGoogleは2013年11月1日に提供を終えました。Googleは、ウェブアプリやモバイルアプリが増えて、スタートページの必要性が薄れたと説明しています(INTERNET Watch)。

    代わりに長く使ったstart.me

    廃止のあと、あわてて代わりのサービスを探し、長らくstart.meを使わせていただいていました。別段悪いことは全然ないサービスです。ただ、広告が入っていなかったiGoogleとは違い、広告が入るのがやはりちょっと気になっていました。とはいえ、広告を消すためにお金を払うのもなんか違う気がして、モヤモヤしていました。

    start.meの料金ページによると、2026年10月時点で無料プランには広告が表示されます。個人向けの有料プラン「Personal PRO」は年25ドルで、広告とトラッキングがなくなり、ページ数の上限もなくなります(start.me Pricing)。年25ドルはRSSを並べるだけの用途に毎年払うかと考えると、私には少し違う気がしました。

    「自分で作ればいい」と気づいた

    最近になって、「そうだ、自分で作ればいいのだ」と気がつきました。なんでもっと早く気がつかなかったのだろうと、逆に不思議なくらいです。普段使っているChromeには拡張機能という仕組みがあり、これを使えば同じような機能を簡単に作れます。ということで、作ってみました。

    自分で作れば、もちろん無料です。広告も入りません。データも自分のパソコンのChromeの中だけに保存されます。

    StartBoardでできること

    やりたいことはシンプルです。気に入ったサイトを登録すると、そのサイトの新しい記事がRSSで読み込まれて一覧になります。また、Googleのサービスや自分がよく行くサイトをお気に入りにして表示することもできます。それ以上に大きな特徴はありませんが、スタートページとしてはこれで十分です。

    画像

    上の画像は、サンプルのフィードを入れた状態の画面です。実際には、登録したサイトの記事タイトルと、更新からの経過時間が並びます。

    主な機能の一覧

    • RSS・更新情報:「+」→「RSS・更新情報」でサイトのURLを入れ、「フィードを検出」を押すとRSSのURLを自動で探す。RSS 1.0/2.0、Atom、Shift_JIS/EUC-JPのフィードに対応

    • 複数フィードのまとめ表示:1つのウィジェットにURLを複数行入れると、日時順にまとめて表示

    • ブックマーク:リスト表示とタイル表示を切り替え。リンクやアドレスバーのURLをドラッグ&ドロップで追加

    • 未読管理:未読は太字と青い点で表示。クリックで既読、「✓✓」で全部既読。タブとツールバーのアイコンに未読数

    • ページ(タブ):上部の「+」でページを追加。列の数や列の幅もページごとに変えられる

    • 右クリックメニュー:見ているページで右クリック →「StartBoard: ブックマークに追加」「…更新情報(RSS)を追加」

    • 省略表示:上部の「≡」で、タイトルを1行に省略して表示。1画面に並ぶ記事がおよそ2倍になる

    • メモ:自由に書けるメモ欄(自動保存)

    • 見た目:テーマ(自動/ライト/ダーク)、アクセント色、背景色や背景画像、検索エンジン、時計の表示

    • バックアップ:設定をJSONで書き出し・読み込み。OPMLの読み込み・書き出しにも対応

    RSSとは何か(おさらい)

    RSSは、サイトの新しい記事の一覧を、プログラムが読みやすい形(XML)で配信する仕組みです。記事のタイトル、URL、公開日時などが入っています。よく使われる形式は、RSS 2.0、RSS 1.0(RDF)、Atomの3つです。RSS 2.0の仕様はRSS Advisory Boardが公開しています(RSS 2.0 Specification)。Atomは、IETFのRFC 4287で定められています(RFC 4287)。

    多くのサイトは、ページのHTMLの中に「このサイトのRSSはここです」という印を入れています。<link rel="alternate" type="application/rss+xml" href="...">という1行です。この印を使ってRSSを見つける方法を「オートディスカバリー」と呼びます(RSS Autodiscovery)。StartBoardの「フィードを検出」は、入力されたページのHTMLからこの印を探しています。

    Chrome拡張機能で「新しいタブ」を置き換える仕組み

    ここからは、拡張機能の中身を見ていきます。拡張機能というと難しそうに聞こえますが、正体はHTML・CSS・JavaScriptのファイルを1つのフォルダにまとめたものです。そこにmanifest.jsonという設定ファイルを1つ置くと、Chromeが拡張機能として読み込んでくれます。

    画像

    フォルダの構成

    • manifest.json:拡張機能の名前、バージョン、必要な権限、置き換えるページを書く設定ファイル

    • newtab.html/newtab.css:新しいタブとして表示する画面と見た目

    • js/newtab.js:画面の組み立て、ドラッグ操作、設定画面、保存などの本体

    • js/feed.js:RSSの取得、文字コードの判定、解析、RSSのURLの自動検出

    • js/shared.js:初期の画面構成や、データの形をそろえる共通の処理

    • background.js:右クリックメニューと、ツールバーのアイコンを押したときの動き

    • icons/:拡張機能のアイコン(16・32・48・128ピクセル)

    manifest.jsonの中身

    新しいタブを置き換えるために必要なのは、chrome_url_overridesという1項目だけです。StartBoardのmanifest.jsonの主要部分は次のとおりです。

    {
      "manifest_version": 3,
      "name": "StartBoard",
      "version": "1.1.0",
      "chrome_url_overrides": { "newtab": "newtab.html" },
      "permissions": ["storage", "unlimitedStorage", "favicon", "contextMenus", "search"],
      "host_permissions": ["<all_urls>"],
      "background": { "service_worker": "background.js", "type": "module" }
    }

    Chromeの公式ドキュメントによると、拡張機能が置き換えられるのは「新しいタブ」「ブックマーク マネージャ」「履歴」の3つのページです。ただし、1つの拡張機能が置き換えられるのはそのうち1ページだけです。また、シークレットウィンドウの新しいタブは置き換えられません(Override Chrome pages)。

    同じページには、置き換えたページは速く軽く表示すること、<title>を付けること、Chrome標準の新しいタブと見分けがつくようにすること、といった注意も書かれています。新しいタブを開いたときは、まずアドレスバーに入力カーソルが置かれる点にも触れられています。StartBoardでは、「/」キーで検索欄に移動できるようにしています。

    "manifest_version": 3は、今の拡張機能の形式「Manifest V3」を使うという意味です。公式ドキュメントによると、Chromeウェブストアは古い形式(Manifest V2)の拡張機能をもう受け付けていません(Override Chrome pages(MV2))。これから作るなら、最初からV3で書くのが前提になります。

    権限(permissions)の意味

    拡張機能は、使う機能をmanifest.jsonの権限として宣言します。StartBoardが使っている権限と、その理由は次のとおりです。

    • storage:レイアウト、登録したサイト、既読情報をChromeの中に保存する

    • unlimitedStorage:保存容量の上限(約10MB)を外す。記事を最大200件まで残すため

    • favicon:ブックマークに各サイトのアイコンを表示する

    • contextMenus:右クリックメニューに「ブックマークに追加」「RSSを追加」を出す

    • search:検索欄から、Chromeで設定している検索エンジンで検索する

    • host_permissions: <all_urls>:登録したどのサイトからでもRSSを取得できるようにする

    いちばん大きい権限は<all_urls>です。どのサイトのRSSでも読めるようにするために使っています。StartBoardでは、この権限をRSSとページの取得にだけ使っています。気になる方は、ZIPを展開してjs/feed.jsを読めば、どこに通信しているかを確認できます。

    RSSを読み込む仕組み

    普通のWebページから別のサイトのRSSを読みに行くと、ブラウザの安全のための制限(同一オリジンポリシー)で止められることがあります。公式ドキュメントによると、拡張機能のページやサービスワーカーは、host_permissionsで宣言したサイトにはこの制限を受けずにリクエストできます(Cross-origin network requests)。拡張機能なら、サーバーを用意しなくてもブラウザだけでRSSリーダーが作れるのはこのためです。

    StartBoardのjs/feed.jsは、次の順で処理しています。

    • 取得:fetch()でRSSを取りに行く。20秒で応答がなければタイムアウトにする

    • 文字コードの判定:XMLの宣言、HTTPヘッダー、BOMの順に文字コードを調べる。UTF-8として読んで文字化けが多い場合は、Shift_JISとEUC-JPでも試す

    • 解析:RSS 1.0/2.0とAtomの違いを吸収して、タイトル・URL・日時をそろえる

    • 表示:記事の本文に入っているHTMLはDOMParserで文字だけを取り出して使う

    最後の点は安全のためです。公式ドキュメントでは、外から取ってきた内容をinnerHTMLでそのまま画面に入れないこと、textContentなどを使うことがすすめられています(Cross-origin network requests)。RSSの中に悪意のあるスクリプトが入っていても、実行されないようにするためです。

    更新のタイミングは、新しいタブを開いたときと、表示中に1分ごとの確認です。前回の取得から更新間隔(初期値は30分)を過ぎたフィードだけを取り直します。新しいタブを開くたびに全サイトへアクセスするわけではないので、相手のサイトにも自分の回線にも負担をかけにくくしています。

    データの保存先

    登録したサイトやレイアウトは、Chromeのchrome.storage.localに保存しています。公式リファレンスによると、storage.localの容量は10,485,760バイト(約10MB)までです。unlimitedStorage権限があると、この上限はかかりません(chrome.storage)。

    同じリファレンスには、拡張機能を削除するとstorage.localのデータも消えると書かれています。拡張機能を入れ直す前や別のパソコンに移す前は、⚙ 設定の「設定のエクスポート」でJSONを書き出しておいてください。

    ちなみに、Googleアカウントで同期されるstorage.syncという保存先もあります。ただし、全体で102,400バイト(約100KB)、1項目8,192バイトまでと小さく、RSSの記事をためる用途には向きません。StartBoardでは、同期の代わりにエクスポートとインポートで移す形にしています。

    初期の画面構成を変えるには

    初めて開いたときに並ぶサイトは、js/shared.jsのdefaultState()という関数で決めています。配布版の中身を一部抜き出すと、次のようになっています。

    home.columns[1].widgets.push(
      feed('Gigazine', 'https://gigazine.net/news/rss_2.0/'),
      feed('Internetwatch', 'https://internet.watch.impress.co.jp/data/rss/1.0/iw/feed.rdf')
    );

    columns[0]が左の列、columns[1]が真ん中の列、columns[2]が右の列です。feed('表示名', 'RSSのURL')の行を足したり消したりすれば、最初に並ぶサイトを変えられます。第3引数に数字を入れると、1ページに表示する件数になります(省略時は10件)。ブックマークはnewLink('URL', '表示名')で並べています。

    ただし、defaultState()が使われるのは、まだデータが保存されていない最初の1回と、⚙ 設定の「初期化」を押したときだけです。すでに使っている状態で書き換えても、画面は変わりません。ふだんの追加や削除は、画面の「+」や各ウィジェットの設定から行うほうが手軽です。

    家族や職場の人向けに配るなら、ここを相手がよく見るサイトに書き換えてからZIPにすると、入れてすぐに使ってもらえます。社内のサイトなど、RSSのないページはブックマークとして並べておくのがおすすめです。READMEにも書いているとおり、http://192.168.x.x/...のようなイントラネットのURLもブックマークとして登録できます。

    ZIPからインストールする手順

    ここからは、添付のZIPを使って実際に入れる手順です。Chromeウェブストアには出していないので、「デベロッパー モード」で読み込む方法になります。

    画像

    1. ZIPをダウンロードして展開する

    上の「startboard-1.1.0.zip」をダウンロードして、好きな場所に展開します。展開するとstartboardというフォルダができます。Chromeはこのフォルダを読み込んで動くので、読み込んだあとにフォルダを削除したり移動したりすると、拡張機能が動かなくなります。「書類」など、消さない場所に置いてください。

    2. 拡張機能のページを開き、デベロッパー モードをオンにする

    Chromeのアドレスバーにchrome://extensionsと入れて開きます。右上の「デベロッパー モード」をオンにします。公式のチュートリアルにも同じ手順が載っています(Hello World extension)。

    3. 「パッケージ化されていない拡張機能を読み込む」を押す

    左上に出てくる「パッケージ化されていない拡張機能を読み込む」を押し、展開したstartboardフォルダを選びます。一覧に「StartBoard」が出れば読み込み完了です。

    4. 新しいタブを開く

    新しいタブを開くとStartBoardが表示されます。初回に「この拡張機能によって新しいタブページが変更されました」と出たら、「変更を保持」を選んでください。

    ホームボタンや起動時にも表示する

    Chromeの設定 →「外観」→「ホームボタンを表示」をオンにして、「新しいタブ ページ」を選ぶと、ホームボタンでもStartBoardが開きます。Chromeの起動時にも表示したい場合は、設定 →「起動時」→「新しいタブ ページを開く」を選びます。

    使い始めの設定

    • サイトを登録する:「+」→「RSS・更新情報」で、サイトのトップページのURLを入れて「フィードを検出」を押します。RSSのURLを知らなくても大丈夫です

    • 今見ているサイトを登録する:そのページで右クリック →「StartBoard: このサイトの更新情報(RSS)を追加」

    • ブックマークを足す:Gmailやカレンダーなど、よく行くサイトをブックマークのウィジェットにドラッグ&ドロップします

    • 他のRSSリーダーから移る:RSSリーダーの多くは、登録しているサイトの一覧をOPMLという形式で書き出せます。⚙ 設定の「OPMLの読み込み」でまとめて取り込めます

    • レイアウトを固定する:並べ終わったら鍵のアイコンでロックすると、うっかりドラッグして崩すのを防げます

    新しい版に入れ替えるとき

    新しいZIPを配った場合は、展開したフォルダの中身を新しいファイルで上書きします。そのあとchrome://extensionsで、StartBoardの丸い矢印(再読み込み)ボタンを押します。公式チュートリアルによると、manifest.jsonやサービスワーカー(background.js)を変えたときは、この再読み込みが必要です。新しいタブの画面(HTML)だけの変更なら、タブを開き直せば反映されます(Hello World extension)。登録したサイトはchrome.storage.localに残っているので、上書きしても消えません。念のため、上書きの前にエクスポートしておくと安心です。

    配布する前に確認したこと:自分の情報を消す

    自分用に作ったものを人に配るときは、自分の情報が残っていないかの確認が欠かせません。今回のソースでも、自分用の設定がいくつか入っていました。配布版では次のように直しています。

    • start.meの設定を書き出したJSONファイル:同梱をやめた

    • 初期設定のコメントとREADMEにあった、自分のstart.meページのURL:削除

    • 初期ブックマークに入れていた、自分が使っているサービスのリンク:YouTubeとGoogleニュースに差し替え

    • 自分のアカウントで作った、外部サービス経由のRSSのURL:そのサイトの公式RSSに差し替え

    • Macが自動で作る隠しファイル(.DS_Store):同梱をやめた

    拡張機能を作って配る方は、少なくとも次の点を確認しておくと安心です。

    • 初期データ:最初に表示するブックマークやRSSに、自分の口座・勤務先・個人用のURLが入っていないか

    • 設定の書き出しファイル:自分の設定をJSONで書き出したファイルが、フォルダに残っていないか

    • コメントとREADME:自分のページのURL、メールアドレス、パソコンのユーザー名(/Users/〇〇のようなパス)が書かれていないか

    • APIキーやトークン:外部サービスの鍵がコードに直接書かれていないか

    • 隠しファイル:.DS_Store、.git、エディタの設定フォルダなどが入っていないか

    確認には、フォルダ全体を「@」「/Users/」「http」「key」「token」などの文字で検索するのが手早いです。URLは、1つずつ「人に見られても困らないか」を見ていきます。

    注意点

    デベロッパー モードで動かすということ

    今回の方法は、Chromeウェブストアを通さずに、手元のフォルダを直接読み込むやり方です。ストアの審査を通っていないので、中身を信用できるかどうかは自分で判断することになります。StartBoardに限らず、知らない人が配っている拡張機能のZIPを入れるときは、最低限manifest.jsonの権限を見て、必要以上の権限を求めていないか確認してください。StartBoardのソースは、圧縮や難読化をしていない普通のJavaScriptなので、そのまま読めます。

    すべてのサイトへのアクセス権限

    先に書いたとおり、どのサイトのRSSでも読めるように<all_urls>の権限を使っています。登録するサイトが決まっている場合は、manifest.jsonのhost_permissionsを"https://example.com/*"のように絞ることもできます。ただし、その場合は登録していないサイトのRSSを追加できなくなります。

    RSSを配信していないサイト

    RSSを配信していないサイトは、新着記事を一覧にできません。そうしたサイトは、ブックマークとして登録してください。また、サイト側でRSSの配信が止まると、古い記事のまま更新されなくなります。しばらく新着が増えないフィードは、サイトのRSSのURLが変わっていないか確かめてみてください。

    シークレットウィンドウでは表示されない

    公式ドキュメントのとおり、シークレットウィンドウの新しいタブは拡張機能で置き換えられません。シークレットウィンドウでは、Chrome標準の新しいタブが表示されます。

    データはそのパソコンのChromeの中だけ

    データはchrome.storage.localに保存しているので、別のパソコンのChromeには同期されません。拡張機能を削除するとデータも消えます。別のパソコンで使うときや入れ直すときは、エクスポートとインポートで移してください。

    Chromeウェブストアで公開するなら

    今回はZIPで配っていますが、Chromeウェブストアで公開する道もあります。公式ドキュメントによると、ストアで公開するにはデベロッパー登録と1回限りの登録料の支払いが必要です。登録できる国や地域も決まっています(Register your developer account)。さらに、拡張機能ごとに審査があります。広く配るならストア、知り合いや記事の読者に試してもらう程度ならZIP、という使い分けになると思います。

    よくある質問

    Q. 有料ですか?広告は出ますか?

    A. 無料で、広告もありません。そもそも広告を入れたくなくて作ったものです。

    Q. EdgeやBraveでも使えますか?

    A. 私はChromeで使っています。EdgeやBraveもChromeと同じChromiumベースのブラウザで、それぞれ拡張機能のページに「パッケージ化されていない拡張機能を読み込む」に当たる機能があります。ただし、私は動作を確かめていません。

    Q. スマホのChromeでは使えますか?

    A. パソコン版のChromeの拡張機能として作っているので、スマホでの利用は想定していません。

    Q. start.meの設定をそのまま移せますか?

    A. start.meの設定を直接読み込む機能はありません。登録しているサイトを、「+」→「RSS・更新情報」で入れ直してください。RSSリーダーからOPMLを書き出せる場合は、OPMLの読み込みでまとめて取り込めます。

    Q. 自分好みに改造してもいいですか?

    A. どうぞ。初期の画面構成はjs/shared.jsのdefaultState()、見た目はnewtab.cssにまとまっています。変更したらchrome://extensionsで再読み込みしてください。

    Q. 拡張機能を消したいときは?

    A. chrome://extensionsでStartBoardの「削除」を押します。新しいタブはChrome標準の画面に戻ります。登録したデータも一緒に消えるので、残したい場合は先にエクスポートしてください。

    まとめ

    • iGoogleの終了後はstart.meを長く使っていましたが、広告と有料プランの間でモヤモヤしていました

    • Chrome拡張機能なら、chrome_url_overridesの1項目で新しいタブを自作のページに置き換えられます

    • 拡張機能のページはhost_permissionsがあれば他のサイトのRSSを直接取得できるので、サーバーなしでRSSリーダーが作れます

    • データはchrome.storage.localに保存。拡張機能を消すとデータも消えるので、エクスポートでバックアップしておきます

    • 人に配るときは、初期データ・書き出しファイル・コメント・隠しファイルに自分の情報が残っていないかを確認します

    機能はシンプルですが、自分のスタートページとしてはこれで十分です。自分で作ればもちろん無料なので、これで良いわけです。拡張機能に興味のある方は、添付のZIPで試してみてください。

    参考リンク

    (仕様や料金は2026年10月時点の情報です)


    この記事は公開から30日後に「気になるAI情報のメンバーシップ」(月500円・初月無料)の特典になります。過去記事はメンバーシップでまとめて読めます。

    関連記事

    あなたへのおすすめ