Google Chrome拡張機能の開発

このチュートリアルは、HTML、CSS、およびJavaScriptを使用して、基本的なGoogle Chrome拡張機能を構築することをガイドします。シンプルな言語ピッカーを作成し、途中で重要な拡張開発の概念を学習します。

あなたが学ぶこと：

• テストとデバッグのためのChromeの開発モードを有効にします。
• manifest.jsonファイルの作成 - 拡張機能のコントロールセンター。
• 言語選択のためのフラグアイコンを組み込む。
• ユーザーインタラクションのためのポップアップメニューの構築。
• 拡張機能内の言語の追加と管理。
• 拡張機能をChrome Webストアに公開する（登録と料金が必要です）。

1. Chrome開発者モードの設定：

Chromeで開発者モードをアクティブにすることから始めます。これにより、開発中に拡張機能をロードおよびテストできます。 Chromeの右上隅にある3つの垂直ドット（その他のツール）をクリックし、「その他のツール」>「拡張機能」を選択し、右上の「開発者モード」トグルスイッチを有効にすることにより、これにアクセスします。

利用可能な機能の詳細については、Chrome Extension APISドキュメントを参照してください。

manifest.jsonファイル：

プロジェクトに新しいフォルダー（「LanguagePicker」など）を作成します。内部では、このコードでmanifest.jsonを作成します。

 {
  「名前」：「言語ピッカー」、
  「説明」：「単純な言語選択拡張機能」、
  「バージョン」：「1.0」、
  「Manifest_version」：3
  "背景"： {
    「service_worker」：「background.js」
  }、
  「許可」：[「ストレージ」]、
  "アクション"： {
    「default_popup」：「popup.html」
  }
}

このファイルは、その名前、説明、バージョン、バックグラウンドスクリプト（ background.js ）、必要な権限（ストレージへのアクセス）、およびポップアップHTMLファイル（ popup.html ）についての拡張機能についてChromeに伝えます。

3。言語フラグアイコンの追加：

プロジェクトフォルダー内に「フラグ」サブディレクトリを作成します。 5つのフラグ画像（英語、中国語、イタリア語など）をダウンロードし、 english.png 、 chinese.png 、pngなどとして保存します。

background.jsサービスワーカー：

このコードでbackground.jsを作成します。

言語= 'url（flags/english.png）';

chrome.runtime.oninstalled.addlistener（（）=> {
  Chrome.storage.sync.set（{Language}）;
  console.log（ `デフォルト言語を$ {言語}`）;
}）;

これにより、インストール時にデフォルト言語を英語に設定します。

5.ポップアップメニューの作成（ popup.html and popup.css ）：

popup.htmlを作成します：

 


  <title>言語ピッカー</title>
  <link rel="stylesheet" href="popup.css">


  <div id="flagOptions"></div>
  <script src="popup.js"></script>

popup.cssを作成します：

 .container {width：300px; }
ボタン{高さ：30px;幅：30px;アウトライン：なし;国境：なし;ボーダーラジウス：50％;マージン：10px;バックグラウンドリピート：ノーリピート。バックグラウンドポジション：センター;バックグラウンドサイズ：clont; }
.currentflag { / *現在選択されているフラグのスタイリングを追加 * /}

6。PopupJavaScript（ popup.js ）：

popup.jsを作成します（これは単純化されたバージョンであり、完全な機能のためにさらなる開発が必要です）：

// ...（言語フラグのボタンを動的に作成し、クリックを処理するJavaScriptコードは、元の例と同様ですが、簡潔にするために簡略化されています）...
「このセクションにはJavaScriptが含まれて、「otherlangs」アレイから言語ボタンを動的に生成し、クリックイベントを処理して選択した言語を変更し、それに応じてUIを更新します。長さの制約のため、この詳細なコードは省略されていますが、元の例から推測できます。）


** 7。読み込みとテスト：**

`Chrome：// extensions/`で、[[アンパック]の読み込み "をクリックし、プロジェクトフォルダーを選択し、拡張機能をテストします。

** 8。出版（Advanced）：**

拡張機能を公開するには、Chrome Web Store開発者（料金が必要）として登録します。

この合理化されたバージョンは、基本的なChrome拡張機能を作成するためのより明確で簡潔なパスを提供します。元の、より詳細な例に示されているロジックに基づいて、欠落している `popup.js`コードを入力することを忘れないでください。

以上がGoogle Chrome拡張機能の開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。