スクラッチからChrome拡張機能を作成する方法

あなたがしたい場合 いくつかの機能を追加または修正する Google Chromeでは、拡張子を使用する必要があります。ただし、Chromeウェブストアから拡張機能をダウンロードすることはできますが、既存の拡張機能には見つからない特定の機能が必要になることがあります。.

幸いなことに、必要な機能を追加または変更したり、Google Chrome用の新しいアドオンやアプリケーションを作成したりするための独自の拡張機能を作成できます。 他のユーザーに配布する Chromeウェブストアを使用する.

以下では、私はあなたに示すつもりです 拡張機能を作成する最も簡単な方法. Web開発（HTML、CSS、およびJS）についてある程度の知識があれば、ご自宅にいるように感じるでしょう。そうでなければ、まずこれらのチャンネルを見て Web開発の基本を学ぶ, それから下に続きます.

前提条件

このチュートリアルを始める前に、次の要件を満たしておく必要があります。.

あなたは精通していなければなりません HTML、CSS、およびJavaScript. [リソースを確認する]
あなたが持っている必要があります コードエディタ 拡張子を書きます。 [編集者を比較]
（オプション）自分の拡張機能を他のユーザーに配布したい場合は、 開発者アカウント Chromeウェブストアで。 [アカウントを作成する]

注意： GoogleはChromeウェブストアで開発者アカウントを作成するために少額の料金を支払うようにお願いしています.

拡張機能を作成する

このチュートリアルでは、作成するプロセスについて説明します。 やるべき拡張 Google Chromeの場合重要なコンポーネントと拡張機能に提供されている機能を実証するのは（下に示すように）ユーティリティになるでしょう。.

1.テンプレートを入手する

Google Chromeは、他のプラットフォームと同様に、 集合構造を持つように拡張, 初心者にとっては複雑に思えるかもしれません。それが、すべての必要条件を提供するエクステンションの定型テンプレートを入手するのが良い理由です。.

Extensionizrは最高の定型ジェネレータです クロム拡張用。それはあなたが与えられた拡張子タイプの一つを選ぶことを可能にします - ブラウザアクション （全ページまたはブラウザに対するアクション）, ページアクション （現在のページに対するアクション） 隠し拡張子 （通常は前面のインターフェースに隠れているバックグラウンドアクション）.

さらに、さまざまな微調整オプションを提供します。 必要なアドオン、パーミッションを含める/除外する, あなたが選択する必要があります “ブラウザアクション” 拡張タイプとして “背景なし” このチュートリアルの背景ページとして.

サンプルエクステンションを作成するためのオプションを選択し終わったら、 “ダウンロードする!” Extensionizrのボタン。最後に, アーカイブ（.zip）をディレクトリに解凍します。 そしてコードエディタを開いて拡張機能の作成を始めます。.

2.拡張子をコーディングする

テンプレートをダウンロードして解凍すると、下のスクリーンショットに示すようなディレクトリ構造が表示されます。テンプレートはきちんと整理されていて、最も重要なファイルは “manifest.json“.

このディレクトリ内の他のファイルやフォルダも知るようにしましょう。

_locales： それは慣れている 言語情報を保存する 多言語アプリの場合.
css： Bootstrap 4のようなサードパーティのフロントエンドライブラリを保存するように機能します。.
アイコン： それはさまざまなサイズであなたの拡張機能のアイコンを持つように設計されています.
js： 保存するのに便利です サードパーティのバックエンドライブラリ jQuery 3のように.
src： それはあなたがあなたの拡張のために書くことになる実際のコードを格納します.

manifest.json

それは含まれています アプリに関する基本的なメタデータ, アプリの詳細をブラウザに定義します。あなたの拡張機能の名前、説明、ウェブサイト、アイコンなどを詳細のように設定するためにそれを編集することができます ブラウザの操作と権限.

たとえば、次のコードでは、browser_actionの下のdefault_titleとともに、名前、説明、およびhomepage_urlが変更されています。また、私は 追加しました “ストレージ” 許可の下 拡張機能にデータを格納する必要があるため.

 "名前"： "Todoizr  -  To-do Simplified"、 "バージョン"： "0.0.1"、 "manifest_version"：2、 "説明"： "みんなのための簡単なTo-doアプリ"、 "homepage_url"： " https://go.aksingh.net/todoizr "、"アイコン "：" 16 "："アイコン/ icon16.png "、" 48 "："アイコン/ icon48.png "、" 128 "："アイコン/ icon128 .png "、" default_locale "：" en "、" browser_action "：" default_icon "：" icons / icon19.png "、" default_title "：" Todoizr  - やるべきこと "、" default_popup "：" src / browser_action / browser_action.html "、"権限 "：["ストレージ "]

src \ browser_action

このディレクトリはブラウザの動作のためのコードを保持します。私たちの場合は、 ポップアップウィンドウをコーディングする ブラウザで拡張機能のアイコンをクリックすると表示されます。私たちの拡張機能は、ユーザーがポップアップでto-doアイテムを追加して表示することを可能にします。.

注意： このリポジトリを複製することで、いつでもコードを使ってジャンプスタートできます。.

テンプレートからの初期コード

このディレクトリにはすべてのコードを含むHTMLファイルしかありませんでしたが、わかりやすくするために3つのファイルに分割することにしました。そうは言っても、HTMLファイルは “browser_action.html” 今、次のコードがあります。

さらに、という名前のスタイルファイル “browser_action.css” JavaScriptファイルは “browser_action.js” 今のところ空白です.

 #mainPopup パディング：10ピクセル;高さ：200ピクセル。幅：400ピクセル。フォントファミリー：Helvetica、Ubuntu、Arial、sans-serif。  h1 フォントサイズ：2em;

ポップアップのインターフェースをデザインする

初期プロジェクトを設定した後、まずポップアップのインターフェースを設計しましょう。私は持っています 最小限のアプローチでインターフェースを設定する, 上部に名前を表示し、その後にTo-Doアイテムを追加するフォームと、追加したアイテムを表示するための下の領域を表示します。それはの単純化されたデザインに触発されています “フォームスタイル5“.

以下のコードでは、2つのdivを追加しました。1つはto-do項目を追加するためのフォームを表示するためのもの、もう1つは既に追加されたto-do項目のリストを表示するためのものです。とは言うものの、新しいコードは “browser_action.html” 以下のとおりであります：

          トドイザー

そしてスタイルファイル “browser_action.css” 今、次のコードがあります。

 @import url（ "./ form_style_5.css"）; #mainPopup 高さ：200ピクセル。幅：300ピクセル。フォントファミリー：Helvetica、Ubuntu、Arial、sans-serif。  / * To-doアイテムフォーム* / .form-style-5 margin：auto;パディング：0px 20px。 .form-style-5：最初の子背景：なし; .form-style-5 h1 色：＃308ce3;フォントサイズ：20px。 text-align：center。 .form-style-5 input [type = "text"] width：auto;;フロート：左。マージンボトム：未設定。 .form-style-5 input [type = "button"] background：＃308ce3;幅：自動。フロート：右。パディング：7px。国境：なし。 border-radius：4ピクセル。フォントサイズ：14ピクセル。 .form-style-5入力[タイプ= "ボタン"]：ホバー背景：＃3868d5; / *やることリスト* / .form-style-5：最後の子height：inherit;マージンボトム：5px。 .form-style-5 ul パディング：20ピクセル; .form-style-5 ul li フォントサイズ：14ピクセル;

最後に、サードパーティのスタイルファイル “form_style_5.css” 以下の内容があります。それは単に私たちのエクステンションのデザインを刺激するためにそのウェブサイトから取られています.

 / * Sanwebe.comによるForm Style 5 * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 最大幅：500ピクセル。パディング：10px 20px。背景：＃f4f7f8;マージン：10px auto。パディング：20px。背景：＃f4f7f8; border-radius：8ピクセル。フォントファミリー：ジョージア、「Times New Roman」、Times、serif。 .form-style-5フィールドセットborder：none; .form-style-5の凡例font-size：1.4em;マージンボトム：10px。 .form-style-5ラベルdisplay：block;マージンボトム：8px。 .form-style-5の入力[type = "text"]、.form-style-5の入力[type = "date"]、.form-style-5の入力[type = "datetime"]、.form-style -5 input [type = "email"]、.form-style-5入力[type = "number"]、.form-style-5入力[type = "search"]、.form-style-5入力[type] = "time"]、.form-style-5入力[type = "url"]、.form-style-5 textarea、.form-style-5 select フォントファミリ：ジョージア州、 "タイムズニューローマン"、タイムズ、セリフ。背景：rgba（255、255、255、0.1）。国境：なし。 border-radius：4ピクセル。フォントサイズ：16px。マージン：0。アウトライン：0;パディング：7px。幅：100％。ボックスサイズ：ボーダーボックス。 -webkit-box-sizing：ボーダーボックス。 -moz-box-sizing：ボーダーボックス。背景色：＃e8eeef。カラー：＃8a97a0。 -webkit-box-shadow：0 1px 0 rgba（0,0,0,0.03）インセット。 box-shadow：0 1px 0 rgba（0,0,0,0.03）のインセット。マージンボトム：30px。 .form-style-5入力[type = "text"]：フォーカス、.form-style-5入力[type = "date"]：フォーカス、.form-style-5入力[type = "datetime"]：フォーカス、.form-style-5入力[type = "email"]：フォーカス、.form-style-5入力[type = "number"]：フォーカス、.form-style-5入力[type = "検索"] ：フォーカス、.form-style-5入力[type = "time"]：フォーカス、.form-style-5入力[type = "url"]：フォーカス、.form-style-5 textarea：フォーカス、.form-スタイル5選択：フォーカス背景：＃d2d9dd; .form-style-5 -webkit-appearance：menulist-button;を選択します。高さ：35ピクセル。 .form-style-5。番号背景：＃1abc9c;色：#fff;高さ：30ピクセル。幅：30ピクセル。表示：インラインブロック。フォントサイズ：0.8em。右マージン：4px。行の高さ：30ピクセル。 text-align：center。 text-shadow：0 1px 0 rgba（255,255,255,0.2）;ボーダー半径：15px 15px 15px 0px。 .form-style-5入力[type = "送信"]、.form-style-5入力[タイプ= "ボタン"] 位置：相対;表示ブロック;パディング：19ピクセル39ピクセル18ピクセル39ピクセル。色：#FFF;マージン：0自動。背景：＃1abc9c。フォントサイズ：18ピクセル。 text-align：center。フォントスタイル：普通。幅：100％。ボーダー：1ピクセルソリッド＃16a085。ボーダー幅：1px 1px 3px。マージンボトム：10px。 .form-style-5入力[タイプ= "送信"]：ホバー、.form-style-5入力[タイプ= "ボタン"]：ホバー背景：＃109177;

ポップアップのロジックを書く

エクステンションのフロントエンドが完成したら、次にその動作のロジックを書きましょう。できるようにするには、拡張機能が必要です やることアイテムを追加して表示する ポップアップウィンドウでそのため、入力テキストをto-do項目として追加するためのボタンクリックリスナーと、それらの項目を表示するためのページロードリスナーを追加します。.

以下のコードでは、2つの関数を使います。 - sync.get（）およびsync.set（）, の一部です “chrome.storage“. to-doアイテムをストレージに保存するための2つ目のアイテムと、それらを取得して表示するための1つ目のアイテムが必要です。.

とは言っても、以下はその最終コードです。 “browser_action.js” ファイル。あなたが以下で見ることができるように、コードはあなたがその目的を理解するのを助けるために非常にコメントされます.

 function loadItems（）/ *最初にストレージからデータを取得する（* / chrome.storage.sync.get（['todo']、function（result）var todo = [] if（result && result.todo &&） result.todo.trim（）！== "）/ *文字列として保存された配列を解析して取得する* / todo = JSON.parse（result.todo） console.log（ 'todo.length =' （var i = 0; iの場合、+ todo.length） < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  )

3.エクステンションを取り付ける

拡張機能の作成が終わったら、今度はGoogle Chromeの機能を使用してテストして、ストア以外の未展開の拡張機能をロードします。しかし、最初に、あなたはする必要があります 開発者モードを有効にする ブラウザで オプション ボタン > 選ぶ “その他のツール” > 拡張機能, それからオンに切り替えます “開発者モード“.

これで、検索バーの下にさらにボタンが表示されます。こちらをクリック “開梱された荷物” ボタン。それはディレクトリを要求します - あなたの拡張機能のディレクトリを閲覧して選択すると、それは拡張機能をロードします。拡張機能のコードを編集または更新した場合は、 最新の変更をロードするためのリロードボタン.

私たちの例では, 拡張機能のアイコンが表示されます サンプルエクステンションにブラウザアクションを追加したため、プロファイルアイコンの横に表示されます。そのアイコンをクリックすると 予定項目の追加と表示 私たちの拡張ではそれが指定されたアクションです.

拡張機能を配布する

だけど 拡張機能を簡単にアップロードする Chromeウェブストアでは、このプロセスはすべての詳細を網羅するには長すぎます。つまり、開発者アカウントを作成し、拡張機能をパッケージ化してから、その詳細（名前、アイコン、スクリーンショットなど）と共に送信します。そのステップバイステップガイドに記載されているように.

次は何？読みとコード

ご想像のとおり、このチュートリアルの目的は、Google Chromeの拡張機能開発を始めることです。私は基本概念をカバーしようとしました。しかしながら, もっともっと知る必要がある 本格的なエクステンション開発をしていること.

とは言っても、以下は私の一部です お気に入りのリソース Google Chromeおよび他のChromiumベースのブラウザ用の拡張機能の開発を学ぶためのものです。

拡張機能のすべての機能、コンポーネント、および機能.
Google Chromeの背後にあるチームによるサンプル拡張機能.

これらの資料を読み終えて、いくつかの課題に取り組む準備ができている場合は、開発が完了したばかりの拡張機能に以下の機能を追加してみてください。

保存した予定項目を削除するオプション.
アイテムの追加が完了したときに通知を表示する機能.

一番人気のあるブラウザ用の最初の拡張機能を開発することだけがすべてです。. どの拡張子を作成しましたか? あなたは問題に巻き込まれましたか？以下にコメントを書くか、@ aksinghnetで私にメッセージを送ってあなたの話を教えてください。.

大事なことを言い忘れましたが、Chrome Web StoreでTodoizr（私たちが作成した拡張機能）を試して、このリポジトリの完全なコードを確認することができます。.