ソフトウェア
 Computer >> コンピューター >  >> ソフトウェア >> ソフトウェア

初心者向け！シンプルなChrome拡張機能の作り方と導入手順

Chrome拡張機能の開発は、思っているよりもずっと簡単です。基本的なファイルをいくつか用意するだけで、ブラウザの使い勝手を自分好みにカスタマイズできるオリジナル拡張機能が完成します。

拡張機能を動作させるには、いくつかの必須要素があります。この記事では、それらの作成方法に加えて、ストアへの公開や他人との共有を行わずに、自分のPC上だけで拡張機能をChromeで動かす方法まで詳しく解説します。

本格的で複雑な拡張機能の開発にはさらに多くの手順が必要ですが、基本的な流れはここで紹介する内容と同じです。今日からすぐに使えるChrome拡張機能の作り方を見ていきましょう。

ヒント： 完成後のイメージをつかみたい方は、人気の便利なChrome拡張機能をあらかじめチェックしておくのがおすすめです。

Chrome拡張機能の作成手順

このガイドでは、お気に入りのウェブサイトを一覧表示するシンプルな拡張機能を作成します。内容は完全にカスタマイズ可能で、更新も非常に簡単です。

必要な準備とファイル作成

  • 拡張機能を構成するすべてのファイルを格納するためのフォルダを新規作成します。
  • 拡張機能に必要な基本ファイル「manifest.json」「popup.html」「background.html」「styles.css」を作成します。
  • テキストエディタでpopup.htmlを開き、以下のコードを貼り付けて保存します。
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
      <ul id="myUL">
         <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
         <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
         <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
      </ul>
   </body>
</html>

リンク先のURLや表示テキストは自由に書き換えてください。記事とまったく同じものを作りたい場合は、そのままコピーしても問題ありません。

  • 次に、テキストエディタでmanifest.jsonを開き、以下のコードを貼り付けます。
{
  "update_url": "https://clients2.google.com/service/update2/crx",
  "manifest_version": 2,
  "name": "Favorite Sites",
  "description": "All my favorite websites.",
  "version": "1.0",
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "background": {
    "page": "background.html"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Favorite Sites",
    "default_popup": "popup.html"
  }
}

このコードの中で自由に編集できるのは、「name」（拡張機能名）、「description」（説明文）、「default_title」（アイコンにカーソルを合わせたときに表示されるタイトル）の3箇所です。

補足： 上記はManifest V2の形式ですが、現在GoogleはManifest V3への移行を進めています。V3では「browser_action」が「action」に名称変更され、バックグラウンドページの代わりにService Workerを使用する点に注意してください。今後新しく拡張機能を作る場合は、V3形式での記述が推奨されます。

  • 続いてstyles.cssを開き、以下のコードを貼り付けます。ポップアップメニューの見た目を整え、より見やすく使いやすいデザインにするためのスタイルです。
#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 300px;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

CSSファイルで変更できる箇所はたくさんあります。拡張機能を完成させた後に、色や余白、フォントサイズなどをいろいろ試して、自分好みのデザインに仕上げてみてください。

  • 最後に、拡張機能用のアイコン画像を作成し、「icon.png」という名前でフォルダ内に保存します。コードの記述どおり、16×16ピクセル、32×32ピクセルなど、サイズごとに別々のアイコンを用意することも可能です。

ヒント： Googleの公式ドキュメントには、Chrome拡張機能の作成に関する詳細情報が掲載されています。ここで紹介した基本手順以外のサンプルコードや高度なオプションも参考になるので、ぜひ活用してみてください。

カスタム拡張機能をChromeに追加する方法

拡張機能のファイルがそろったら、次はChromeに読み込んで実際に使える状態にしましょう。自作の拡張機能をインストールする手順は、通常の拡張機能をストアからインストールするときとは異なります。

  • Chromeメニューから「その他のツール」→「拡張機能」を選択します。アドレスバーに「chrome://extensions/」と直接入力してもOKです。
  • 「デベロッパーモード」のスイッチがオフになっている場合は、オンに切り替えます。これで、自分で作成した拡張機能を読み込める特別なモードが有効になります。
  • ページ上部にある「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、最初の手順で作成したフォルダを選択します。
  • 確認ダイアログが表示されたら承認します。特に問題がなければ、自作の拡張機能が既存の拡張機能と並んでブラウザ右上に表示されます。

Chrome拡張機能の編集・カスタマイズ

拡張機能が使えるようになったら、さらに手を加えて自分だけのものに仕上げましょう。

「styles.css」ファイルは拡張機能の外観を制御しています。リスト全体のスタイルを調整したり、文字の色やフォントの種類を変えたりすることができます。CSSで何ができるのかを体系的に学ぶなら、W3Schoolsが最適なリファレンスです。

サイトの表示順序を入れ替えたり、新しいサイトを追加したり、既存のサイトを削除したりする場合は、「popup.html」ファイルを編集します。編集するのはURLとサイト名のみにとどめ、<li>や<html>などのHTMLタグは絶対に削除・変更しないでください。HTMLの基礎を学びたい場合も、W3Schoolsのチュートリアルが役立ちます。

  1. iCloudパスワードChrome拡張機能の使い方|WindowsのChromeでiCloudキーチェーンのパスワードを自動入力

    PCではGoogle Chrome、iPhoneやMacではSafariを使っていると、両方のブラウザでパスワードを探して再入力する作業にうんざりしている方も多いのではないでしょうか。しかし、もうその手間とはお別れできます。 Appleが「iCloud for Windows」バージョン12と同時にリリースした「iCloudパスワード(iCloud Passwords)」Chrome拡張機能を使えば、WindowsのChrome上でiCloudキーチェーンに保存されたパスワードを自動入力できるようになりました。 さらに、iCloudパスワードでは、Chromeで作成した新しいパスワード

  2. 今すぐ試せる!Google Chromeを高速化する5つの簡単な方法

    Google Chromeは、意識的に選ぶというより、もはや標準ブラウザとして多くの人に愛用されています。動作が速く、安定性とセキュリティにも優れているため、ブラウザ選びの第一候補に挙げられることが多いでしょう。デスクトップ環境はもちろん、AndroidやiOSでも快適に動作し、ミニマルで洗練されたインターフェースと、ウェブ閲覧に必要な機能がひと通り揃っている点も大きな魅力です。ただし、毎日長時間Chromeを使い続けていると、さまざまな要因によって動作が徐々に重くなることがあります。最近「以前よりChromeの動きが遅い気がする…」と感じているなら、ぜひこの記事で紹介する5つの高速化テクニッ