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

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

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

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

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

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

manifest.jsonファイル：

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

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

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

3。言語(yǔ)フラグアイコンの追加：

プロジェクトフォルダー內(nèi)に「フラグ」サブディレクトリを作成します。 5つのフラグ畫(huà)像（英語(yǔ)、中國(guó)語(yǔ)、イタリア語(yǔ)など）をダウンロードし、 english.png 、 chinese.png 、pngなどとして保存します。

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

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

言語(yǔ)= 'url（flags/english.png）';

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

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

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

popup.htmlを作成します：

 


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


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

popup.cssを作成します：

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

6。PopupJavaScript（ popup.js ）：

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

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


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

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

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

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

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

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