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

あなたが學(xué)ぶこと：

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

1. Chrome開発者モードの設(shè)定：

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

利用可能な機(jī)能の詳細(xì)については、Chrome Extension APISドキュメントを參照してください。

manifest.jsonファイル：

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

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

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

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

プロジェクトフォルダー內(nèi)に「フラグ」サブディレクトリを作成します。 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（ `デフォルト言語を$ {言語}`）;
}）;

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

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 { / *現(xiàn)在選択されているフラグのスタイリングを追加 * /}

6。PopupJavaScript（ popup.js ）：

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

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


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

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

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

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

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

以上がGoogle Chrome拡張機(jī)能の開発の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。