Google Chrome拡張機能の開発

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

ユーザーインタラクションのポップアップメニューの構築

拡張機能内の言語の追加と管理。 Chrome開発者モードのセットアップ：

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

2。 manifest.json ファイル：

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

 {"name"： "言語ピッカー"、「説明 "：「シンプルな言語選択拡張機能"、「バージョン」：「1.0」、「manifest_version」：3、 "background"：{"service_worker"： "" ""： "" "：{" service_worker "：" ""： ""： ""： "" "" "" "" "ols "default_popup"： "popup.html"}} 

このファイルは、その名前、説明、バージョン、background.js ）、必要な権限（ストレージへのアクセス）、およびポップアップHTMLファイル（ popup.html ）

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

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

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

create background> js このコード：

 let language = 'url（flags/english.png）'; Chrome.runtime.oninstalled.addlistener（（）=＆gt; {chrome.storage.sync.set（{Language}）; console.log（ `デフォルト言語設定{言語}`）;}）ポップアップメニューの作成（<code> popup.html </code>および<code> popup.css </code>）：  <p> create <code> popup.html </code>：</p> <pre class="brush:php;toolbar:false">＆lt;！   <title>言語ピッカー</title> <link rel="styleSheet" href="popup.css">   <div id="flagoptions"> </div> <scrip>   <code> popup.css </code>： <pre class="brush:php;toolbar:false"> .container {width：300px; }ボタン{高さ：30px;幅：30px;アウトライン：なし;国境：なし;ボーダーラジウス：50％;マージン：10px;バックグラウンドリピート：ノーリピート。バックグラウンドポジション：センター;バックグラウンドサイズ：clont; } .currentflag {/ *現在選択されているフラグのスタイリングを追加 */} 

6。ポップアップjavascript（ popup.js ）：

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

 // ... JavaScriptが含まれて、「otherlangs」アレイから言語ボタンを動的に生成し、選択した言語をクリックして、長さの制約のためにUIを更新しますが、この詳細なコードは省略しますが、元の例から推測できます。読み込みとテスト：** `chrome：// extensions/`で、[[アンパック]の読み込み "をクリックし、プロジェクトフォルダーを選択し、拡張機能をテストします。 ** 8。 Publishing（Advanced）：**拡張機能を公開するには、Chrome Web Store開発者（料金が必要）として登録します。この合理化されたバージョンは、基本的なChrome拡張機能を作成するためのより明確で簡潔なパスを提供します。元の、より詳細な例で示されているロジックに基づいて、欠落している `popup.js`コードを記入することを忘れないでください。

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