基本的なChrome拡張機能を作成および作成する方法
Chromeは、地球上で最も人気のあるWebブラウザです。 Statcounterのデスクトップブラウザの市場シェア調査によると、2017年後半の時点でChromeはデスクトップブラウザの市場のなんと65％を占めています。
このような市場を定義する力により、Chromeの設計が優先事項になりました。拡張機能についても同じことが言えます。Chromeは、拡張機能の最大のユーザーベースを提供し、Chromeウェブストアには何万もの拡張機能、テーマ、アプリが存在します。
トレンドに投資したい場合は、独自の基本的なChrome拡張機能を構築できます。基本的なWeb開発スキル（HTML、CSS、Javascript）と、すべてを結び付けるための小さじ1杯のJSONが必要です。
この投稿では、基本的なChrome拡張機能を構築するために必要な最も基本的な構造を確認します。利用可能な可能性の詳細については、Chromeのデベロッパー拡張ガイドをご覧ください。
基本的なChrome拡張機能の作成：マニフェストデスティニー
このチュートリアルでは、クリックすると簡単なポップアップメッセージを表示する基本的なChrome拡張機能を作成します。アイコン（「icon.png」）、HTMLファイル（「popup.html」）、そして最も重要なマニフェスト（「manifest.json」）の2つの重要なファイルが必要になります。これらのファイルはすべて、拡張子の名前が付いたディレクトリ内にあります。この場合、それは「HelloWorld」と呼ばれます。
Chrome拡張機能は、そのマニフェストによって定義されます。このJSONスニペットは、Chromeに拡張子の解釈方法、読み込むファイル、ユーザーとのやり取りの方法を示しています。
非常に基本的な拡張機能のマニフェストファイルは次のようになります：
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
} このマニフェストファイルは、ユーザーのツールバーにアイコンを配置します。このアイコンをクリックすると、「popup.html」という名前のファイルのコンテンツが読み込まれます。以下は、残りのコンテンツの要点です。
-
manifest_version使用しているマニフェストマークアップのバージョンをChromeに通知します。最新の拡張機能の場合、これを2に設定する必要があります。 名前 拡張機能がChromeストアに表示される名前と「chrome：//extensions」を表示します。説明「chrome：//extensions」に表示される説明テキストを示しています。ブラウザアクションアイコンをツールバーにロードします。また、拡張機能は、ツールチップ、ポップアップ、またはバッジを表示することにより、ユーザー入力に応答できます。 「browser_action」が実行できるすべてのリストを確認してください。-
default_icon拡張機能のディレクトリからアイコンへのパスを示します。 -
default_popup拡張機能のアイコンがクリックされたときに読み込まれるファイルへのパスを示します。 許可拡張機能の機能領域を制限します。activeTabが最も一般的で、拡張機能が最前面のタブにアクセスできるようにします。 Googleは、拡張機能がリクエストできるすべての権限のリストを提供しています。
Chrome拡張機能のマニフェストで宣言できるすべてのことを詳しく知りたい場合は、拡張機能マニフェストに関するGoogleのドキュメントをご覧ください。
基本的なChrome拡張機能の作成：ポップアップ
マニフェストを作成したので、拡張機能が何を表示するかを理解できます。これは、拡張機能が読み込まれたときに表示される「popup.html」ファイル次第です。このプロジェクトで使用するものは次のとおりです。
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<style type="text/css">
body {
margin: 5px;
}
h1 {
font-size: 15px;
text-align: center;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</html>
ご覧のとおり、これにより、CSSでスタイル設定されたテキストがレンダリングされます。拡張機能にJavascriptまたは外部CSSを追加する場合は、マニフェストの content_scriptsでスクリプトを宣言する必要があります。 鍵。マニフェストで参照されたら、通常どおりにそれらのスクリプトをロードできます。
基本的なChrome拡張機能の作成：Chromeへの読み込み
拡張機能の基本的なコードを記述し、適切なアイコンを見つけたら、それをChromeに読み込むことができます。
1.「chrome：//extensions」に移動し、右上のチェックボックスをオンにして「開発者モード」をオンにします。
2. [解凍した拡張機能を読み込む...]ボタンをクリックして、拡張機能のディレクトリを選択します。
3.拡張機能が読み込まれると、メニューバーにそのアイコンが表示されます。
4.拡張機能をクリックして、その（非常に単純な）効果を確認します。
結論：Chrome拡張機能の拡張
拡張機能を使い終えて公開する準備ができたら、Chromeデベロッパーアカウントを作成する必要があります。これは正確に簡単なプロセスではありませんが、GoogleはここでChrome拡張機能を公開するための完全な手順を提供しています。
Chrome拡張機能でできることは明らかにたくさんありますが、それはこの投稿の範囲をやや超えています。 Chrome拡張機能でできることすべてについて詳しく知りたい場合は、GoogleのChromeデベロッパー拡張機能ガイドをご覧ください。
-
Chromeでウェブサイトをブロックする方法
Google Chromeは、これまでで最も使用されているブラウザの1つであり、ブラウザの市場シェアの大部分を占めています。これは常に当てはまるわけではありませんが、読み込み速度が速く、インターフェースが使いやすいため、長年にわたって多くの視聴者を魅了してきました。 たとえば、オフィスで使用するようにコンピューターを構成したり、自宅で使用するために一部のWebサイトを制限したりするために、特定のWebサイトをブロックする必要がある場合があります。したがって、この記事では、拡張機能を使用してGoogleChromeでウェブサイトをブロックする方法を説明します。 GoogleChromeでウ
-
Google Chrome で RAM を消費する拡張機能を検出して無効にする方法
Google Chrome の最も人気のある独自のセールス ポイントは、Chrome ウェブストアの拡張機能です。ユーザーは、ブラウジング セッションをより柔軟で効率的かつユーザー フレンドリーにする無制限の拡張機能をサポートしているため、Chrome に切り替える傾向があります。 しかし、一部の拡張機能はリソースを大量に消費し、システムの RAM を通常より多く消費します。小規模な拡張の場合、最大 50 MB の RAM を使用するのが一般的です。システムで最大 100MB の RAM を消費するものもあります。ただし、この量を超えて RAM を消費する拡張機能は異常な動作をしているため、