この記事は、CNCシステムを解読することを目的としています。詳細に開発する必要がある場合は、Chromeの公式Webサイトにアクセスして学習できます。
公式には、Webページの背景色を変更するためのデモが用意されています。クリックしてダウンロードできます。ダウンロードに問題がある場合は、githubにアクセスできます。
この記事では、5つのjsタイプの比較、6つのコア、メッセージ通信などの一般的に使用される概念の説明を一覧表示します動的注入、パッケージング、リリース。
この記事の最後に、ページをダークモードに切り替えるクロムのデモデモをリストします。
デモの効果は次のとおりです。
上記の表示効果により、細かい部分があることがわかります。つまり、jd.comのタブページでは、プラグインが強調表示され、他のタブページの色がグレー表示されます。これはどのようにして実現されますか？次のデモは、解析する全員
Chromeプラグインとは何ですか？
この記事で説明するChromeプラグインの本当の名前は、Chrome拡張機能（Chrome拡張機能）である必要があります。実際のプラグインは、低レベルのブラウザ機能拡張機能を指し、開発にはChromeソースコードをある程度理解している必要があります。
この記事のChromeプラグインは、私たちが毎日使用している一部のChrome拡張プラグインを指します。
拡張機能は、ブラウジングエクスペリエンスをカスタマイズする小さなソフトウェアプログラムです。拡張機能は、ユーザーがChromeの機能と動作を個々のニーズや好みに合わせて調整できるようにします。
拡張機能は、HTML、JavaScript、CSSなどのウェブ技術に基づいて構築されています。コードのコピーChrome拡張機能は、ブラウジングエクスペリエンスをカスタマイズします小さなソフトウェアプログラム。これにより、ユーザーは個人のニーズや好みに基づいてChromeの機能と動作をカスタマイズできます。HTML、JavaScript、CSSなどのWebテクノロジーに基づいて構築されています。
Chrome拡張機能の開発を学ぶ理由
Chrome拡張機能の開発は、独自のブラウザのカスタマイズ、一部のブラウザ機能の強化、学習能力の強化、およびその他のビジネスの側面の支援に役立ちます。
スキルは、次の会社を探すときに、より多くのポイント、おそらくあなたはより多くの技術的なポイントを持っているでしょう。
6コア
6つのコアコンセプトには、マニフェストフォーマット、イベントの管理、ユーザーインターフェイスの設計、コンテンツスクリプト、アクセス許可の宣言とユーザーへの警告、
マニフェストフォーマットの提供-公式ドキュメント
各CNCシステムの復号化には、マニフェストというJSON形式のマニフェストファイルがあります。 json、重要な情報を提供します。
これは、プラグインに関連するすべての構成を構成するために使用されます。これは、プロジェクトのルートディレクトリの下に配置する必要があります。
簡単な設定は次のとおりです
{
"name"： "TimeStone"、
"manifest_version"：2、
"version"： "1.0"、
"description"： "TimeStone extension"、
"page_action"：{
"default_icon"： "images / icon.png」、
「default_title」：「TimeStoneプラグイン」、
「default_popup」：「html / home.html」
}、
「background」：{
「scripts」：[「js / background.js」]
}、
「options_page」 ： "Html / options.html"、
"Homepage_url"： "https://juejin.im/user/5940a1d2fe88c2006a44b609"、
"permissions"：[
"tabs"、
"storage"、
"activeTab"
]
}
コピーコードの設定は次のように導入されます：
[注記]太字である必要がありますロゴ、強調表示が推奨されます
manifest_version-mustでなければなりません、それは2つの
名前プラグイン名
バージョン-バージョン番号
説明-説明
アイコン-icon
homepage_url-plugin homepage、ハハだけであることができます、私は通常それを私のナゲットホームページ
背景-背景JSまたは永住者として設定します背景ページ、「背景」を指定するには2つの方法があります：
{
// 指定する2つの方法。JSを指定すると、背景ページが自動的に生成されます
"page"： "background.html"
// "scripts"：["js / background.js”]
}
コード
browser_action、page_action、app-displayをブラウザの右上隅にコピーします。選択できるのは、3つの "browser_action"：
{
"default_icon"： "img / icon.png"、
//アイコンがホバーされているときのみです。タイトル、オプションの
"default_title"： "これはChromeプラグインの例です"、
"default_popup"： "popup.html"
}
"page_action"：
{
"default_icon"： "img / icon.png"、
"default_title"： "私はpageActionです "、
"Default_popup"： "popup.html"
}
コード
をコピーします権限-プラグイン権限アプリケーション設定 "権限"：
[
"contextMenus"、//右クリックメニュー
"タブ"、//ラベル
"通知"、//通知
"webRequest"、/ / web request
"webRequestBlocking"、
"storage"、//プラグインローカルストレージ
] 通常のページから直接アクセスできるプラグインリソースの
コード
web_accessible_resources-listをコピーします。設定されていない場合、直接アクセスできません
chrome_url_overrides-overrideブラウザのデフォルトページ
options_ui-plugin設定ページ書き込み
omnibox-アドレスバーにキーワードを登録して検索候補を提供します。キーワード「omnibox」のみを設定できます：{"keyword"： "rick"}
コードをコピーします
default_locale-default言語
devtools_page-devtoolsページエントリ。 JSファイルではなく、HTMLファイルを指します。
バックグラウンドスクリプトによるイベントの管理-公式ドキュメント
Chrome Exは、Chromeブラウザーのエクスペリエンスを変更または強化するために使用されるイベントベースのプログラムです。イベントは、新しいページへの移動やブックマークの削除などのブラウザートリガーですまたは、タブを閉じます。拡張機能は、バックグラウンドスクリプトでこれらのイベントを監視し、指定された指示に従って応答します。
バックグラウンドページは、必要なときにロードされ、アイドル状態のときにアンロードされます。イベントの例には次のものがあります。
拡張機能は最初にインストールされるか、新しいバージョンに更新されます。
バックグラウンドページがイベントをリッスンしており、イベントがディスパッチされました。
コンテンツスクリプトまたはその他の拡張機能を使用してメッセージを送信します。
プログラムの別のビュー（ポップアップウィンドウなど）がruntime.getBackgroundPageを呼び出します。
イベントが火をリッスンし、指定されたコマンドに応答してアンインストールするまで、効果的なバックグラウンドスクリプトは休止状態のままです。
バックグラウンドスクリプトの登録（バックグラウンドスクリプトの登録）
は、manifest.jsonで次のように構成されます
{
"name"： "Awesome Test Extension"、
…
"background"：{
"scripts"：["js / background.js"]、
"persistent ”：False
}、
…
}
コード初期化拡張機能のコピー
runtime.onInstalledイベントをリッスンし、このイベントを使用してステータスを設定するか、初期化を実行します（例：コンテキストメニュー）。
chrome.runtime.onInstalled.addListener（function（）{
chrome.contextMenus.create（{
“ id”：“ sampleContextMenu”、
“ title”：“ Sample Context Menu”、
“ contexts”：[“ selection”]
}）;
} ）;
コードをコピーし
て、拡張機能が依存するイベントの周囲にバックグラウンドスクリプトを構築するようにリスナーを設定します。機能的に関連するイベントを定義すると、これらのイベントがトリガーされるまでバックグラウンドスクリプトがスリープ状態になり、拡張機能が重要なトリガーを見逃すのを防ぐことができます。
リスナーは、ページから同期的に登録する必要があります。
chrome.runtime.onInstalled.addListener（function（）{
chrome.contextMenus.create（{
“ id”：“ sampleContextMenu”、
“ title”：“ Sample Context Menu”、
“ contexts”：[“ selection”]
}）;
} ）;
//これはブックマークが作成されたときに実行されます
Chrome.bookmarks.onCreated.addListener（function（）{
//何かを行う
}）;
コードをコピーリスナーは正しくトリガーされないため、非同期で登録しないでください。
chrome.runtime.onInstalled.addListener（function（）{
//エラー！イベント
はページの先頭から同期的に登録する必要があります//
chrome.bookmarks.onCreated.addListener（function（）{
//何かを行う
}）;
} ）;
コピーコード拡張は、removeListenerを呼び出すことにより、バックグラウンドスクリプトからリスナーを削除できます。イベントのすべてのリスナーが削除されると、Chromeはイベントのバックグラウンドスクリプトをロードしなくなります。
chrome.runtime.onMessage.addListener（function（message、sender、reply）{
chrome.runtime.onMessage.removeListener（event）;
}）;
コードをコピーしてイベントをフィルター処理する
イベントフィルターをサポートするAPIを使用して、リスナーをより懸念される状況に制限します。拡張機能がtabs.onUpdatedイベントをリッスンしている場合、tabs APIはフィルターをサポートしていないため、フィルターでwebNavigation.onCompletedイベントを使用してみてください。
chrome.webNavigation.onCompleted.addListener（function（）{
アラート（「これは私のお気に入りのWebサイトです！」）;
}、{url：[{urlMatches： 'https://www.google.com/'}]}）;
イベントに応答してコードをコピーする
イベントがトリガーされた後、関数をトリガーできるリスナーがあります。イベントに反応するには、リスナーイベント内で目的の応答を作成します。
chrome.runtime.onMessage.addListener（function（message、callback）{
if（message.data == "setAlarm"）{
chrome.alarms.create（{delayInMinutes：5}）
} else if（message.data == "runLogic ”）{
Chrome.tabs.executeScript（{file： 'logic.js'}）;
} else if（message.data ==“ changeColor”）{
chrome.tabs.executeScript（
{code： 'document.body.style.backgroundColor =“ orange”'}）;
};
}）;
バックグラウンドスクリプトをアンインストールするコードをコピーする
重要な情報の損失を回避し、拡張機能がクラッシュしてonSuspendの受信に失敗するのを防ぐために、データを定期的に保存する必要があります。ストレージAPIを使用すると、このタスクを実行できます。
chrome.storage.local.set（{variable：variableInformation}）;
拡張機能がメッセージングを使用する場合は、すべてのポートが閉じていることを確認してください。バックグラウンドスクリプトは、すべてのメッセージポートが閉じられるまでアンインストールされません。runtime.Port.onDisconnectイベントをリッスンすると、開いているポートが閉じられたときについての洞察が得られます。runtime.Port.disconnectを使用して、手動で閉じます。
chrome.runtime.onMessage.addListener（function（message、callback）{
if（message == 'hello'）{
sendResponse（{greeting： 'welcome！'}）
} else if（message == 'goodbye'）{
chrome。 runtime.Port.disconnect（）;
}
}）;
拡張タスクがChromeタスクマネージャに表示されたり消えたりするのを監視してコードをコピーすると、バックグラウンドスクリプトの寿命を観察できます。
Chromeメニューをクリックし、他のツールの上にカーソルを合わせ、[タスクマネージャ]を選択してタスクマネージャを開きます。
数秒間操作がないと、バックグラウンドスクリプトは自動的にアンインストールされます。直前にクリーンアップする必要がある場合は、runtime.onSuspendイベントをリッスンしてください。
chrome.runtime.onSuspend.addListener（function（）{
console.log（ "
Unloading 。"）; chrome.browserAction.setBadgeText（{text： ""}）;
}）;
コードをコピーするただし、永続的なデータruntime.onSuspend。それは可能な限り多くのクリーニングを可能にせず、それはクラッシュの場合には役に立ちません。
ユーザーインターフェイスの設計-公式ドキュメント
拡張されたユーザーインターフェイスは、目的があり、最小限である必要があります。拡張機能自体と同様に、UIは気を散らすことなくブラウジングエクスペリエンスをカスタマイズまたは強化する必要があります。
すべてのページで
拡張機能をアクティブにするほとんどの場合、拡張機能が使用可能な場合は、browser_actionを使用します。
browser_action
{
"name"： "My Awesome browser_action Extension"、
…
"browser_action"：{
…
}
…
}を登録します。manifest.json
のコード宣言をコピーすると、アイコンが色付きのままになり、ユーザーが拡張機能を利用できることを示します。
「
バッジの追加」のいわゆるバッジは、アイコンにテキストを表示し、ブラウザアイコンの上に最大4文字のカラーバナーを表示することです。これらは、マニフェストで「browser_action」によって宣言された拡張機能でのみ使用できます。
電話でバッジのテキストを設定し、電話でバナーの色を設定します。chrome.browserAction.setBadgeText chrome.browserAction.setBadgeBackgroundColor
選択したページで
拡張機能を有効化する拡張機能の機能が定義された状況でのみ利用できる場合は、page_actionを使用します。
Register page_action {
“ name”：“ My Awesome page_action Extension”、
…
“ page_action”：{
…
}
…
} in manifest.json
コード「page_action」をコピーするユーザーが拡張機能を使用できる場合のみ、宣言によりアイコンの色が変更されます。グレースケールで表示されます。
拡張機能をアクティブにするためのルールを定義する
chrome.declarativeContentのruntime.onInstalledリスナーをバックグラウンドスクリプトで呼び出すことにより、拡張機能をいつ使用できるかについてのルールを定義します。URLによるページ操作の例の拡張は、URLに「g」が含まれている必要があるという条件を設定します。条件が満たされると、内線番号が呼び出されます。declarativeContent.ShowPageAction（）
[注]：これは、jd.comタブページ、プラグインが強調表示され、他のタブページの色がグレー表示される場合の
答えですchrome.runtime.onInstalled.addListener（function（）{
//置換すべてのルール…
chrome.declarativeContent.onPageChanged.removeRules（undefined、function（）{
//新しいルールを使用して…
chrome.declarativeContent.onPageChanged.addRules（[
{
//これは、ページのURLに「g」…
条件が含まれているときに発生します： [
new chrome.declarativeContent.PageStateMatcher（{
pageUrl：{urlContains： 'jd.com'}、
}）
]、
//拡張機能のページアクションを表示します。
アクション：[新しいchrome.declarativeContent.ShowPageAction（）]
}
]）;
}）;
}）;
コードをコピー
拡張機能の有効化または無効化拡張
機能は "page_action"を使用して、pageAction.showおよびを呼び出すことにより、pageAction.hideを動的にアクティブ化および非アクティブ化します。
MAPPYサンプルは、スキャンされたWebページのアドレスを展開し、静的マップ上に場所のポップアップを表示します。拡張機能はページのコンテンツに依存するため、関連するページを予測するルールを宣言する方法はありません。逆に、アドレスがページで見つかった場合は、pageAction.showを呼び出してアイコンを変更し、タブで拡張機能が使用できることを通知します。
chrome.runtime.onMessage.addListener（function（req、sender）{
chrome.storage.local.set（{'address'：req.address}）
chrome.pageAction.show（sender.tab.id）;
chrome.pageAction。 setTitle（{tabId：sender.tab.id、title：req.address}）;
}）;
コードをコピー
拡張アイコンを提供する拡張
機能は、それを表すために少なくとも1つのアイコンを必要とします。BMP、GIF、ICO、JPEGなど、WebKitでサポートされているすべての形式を受け入れることができますが、PNG形式で提供されるアイコンは、最高の視覚効果を提供できます。
ツールバーアイコンを指定するツールバー
固有のアイコンは、manifest.json "default_icon"の下のbrowser_actionまたはpage_actionリストのフィールドに登録されます。16角のスペースに対応するために複数のサイズを含めることを推奨します。少なくとも16x16および32x32のサイズを使用することをお勧めします。
{
"名"： "私の素晴らしいpage_action拡張"、
...
"page_action"：{
"default_icon"：{
"16"： "extension_toolbar_icon16.png"、
"32"： "extension_toolbar_icon32.pngは、"
}
}
...
}
コードにすべてのアイコンをコピーします正方形でなければなりません。そうでない場合、変形する可能性があります。アイコンが提供されていない場合、Chromeは汎用アイコンをツールバーに追加します。
他のアイコンを作成して登録します。ツールバーの外にある次のサイズの他のアイコンを使用します。
アイコンのサイズ
アイコンの使用
拡張ページの16x16 Webアイコン
32x32
Windowsコンピューターは通常、このサイズを必要とします。このオプションを指定すると、サイズの歪みが48x48オプションで減少するのを防ぐことができます。
拡張機能管理ページに表示される48x48
インストールとChromeウェブストアに128x128が表示される
{
「名前」：「My Awesome Extension」、
…
「アイコン」：{
「16」：「extension_icon16.png」、
「32」：「extension_icon32.png」、
「48」：「extension_icon48.png」、
「128」 ：「extension_icon128.png」
}
…
}
复制代码
その他のUI関数
ポップアップ
はHTMLファイルであり、ユーザーがツールバーアイコンをクリックすると、特別なウィンドウに表示されます。ポップアップウィンドウはWebページと非常によく似ており、スタイルシートやスクリプトタグへのリンクを含めることができますが、インラインJavaScriptは許可されません。
飲料水イベントのサンプルポップアップウィンドウに、利用可能なタイマーオプションが表示されます。ユーザーは、提供されているボタンのいずれかをクリックしてアラームを設定します。
サンプル2番目15分30分アラームのキャンセル上記のコードをコピーして、browser_actionまたはpage_action {"name"： "Drink Water Event"、... "browser_action"：{"default_popup"： "popup.html"}にライブ設定できます。 ..}コピーコードは、orを呼び出すことでポップアップウィンドウを動的に設定することもできます。browserAction.setPopup、pageAction.setPopup chrome.storage.local.get（ 'signed_in'、function（data）{if（data.signed_in）{chrome.browserAction.setPopup（{popup： 'popup.html'}）;} else {chrome.browserAction.setPopup（{popup： 'popup_sign_in.html'}）;}}）;コードをコピーするツールチップ-ブラウザーのアイコンの上にマウスを置くと、Tooptipを使用してユーザーに簡単な説明または手順を提供します。
ツールチップのヒントは、「default_title」フィールドのbrowser_actionまたはpage_actionに登録されています。
{
「名前」：「Tab Flipper」、
…
「browser_action」：{
「default_title」：「Ctrl（Win）/ Command（Mac）+ Shift +右/左を押してタブを切り替える」
}
…
}
ツールチップのコンテンツもコピーbrowserAction.setTitleとpageAction.setTitleを更新できます
。Chrome.browserAction.onClicked.addListener（function（tab）{
chrome.browserAction.setTitle（{tabId：tab.id、title： "You are on tab：" + tab .id}）;
}）;
コードのコピー
アドレスバーの
ユーザーは、多機能ボックスから拡張機能を呼び出すことができます。CNCシステムによって復号化された「omnibox」フィールドをリストに含め、キーワードを指定します。URL列の新しいラベル検索サンプル拡張機能は、キーワードとして「NT」を使用します。
{
「名前」：「アドレスバーの新しいタブ検索」、
… 「オムニボックス」
：{「キーワード」：「nt」}、
「default_icon」：{
「16」：「newtab_search16.png」、
「32」：「newtab_search32.png ”
}
…
}
