序文
Chrome 拡張機能 (一般にプラグインとも呼ばれます) もソフトウェア プログラムであり、ウェブ (HTML、CSS、および JavaScript) テクノロジ スタックを使用して開発されます。ユーザーが Chrome ブラウジング エクスペリエンスをカスタマイズできるようにします。開発者は、特殊効果や機能を追加することでエクスペリエンスを最適化できます。例: 効率化ツール、情報集約など。Chrome ストアでさまざまな拡張機能を確認できます。たとえば、一部の翻訳拡張機能や JSON 形式の拡張機能などにより、開発や作業の効率が大幅に向上しました。この記事は、Chrome 拡張機能開発の基本的な概念と開発プロセスを理解するのに役立つことを目的としています。最後に背景色抽出拡張機能を開発し、Chrome 拡張機能の印象を深めます。この記事はマニフェスト V3 に基づいており、ほとんどのコンテンツは https://developer.chrome.com/docs/extensions/mv3/ から翻訳されています。最終的に、実装したい拡張機能は次のとおりです。
基本的な考え方
マニフェスト
必要なファイルは拡張機能のマニフェストだけで、ファイル名はmanifest.json. マニフェストは、拡張機能のルート ディレクトリに配置する必要があります。マニフェストには、重要なメタデータ、リソース定義、アクセス許可宣言が記録され、バックグラウンドおよびページで実行されているファイルが識別されます。
サービスワーカー
拡張された Service Worker ユーザーは、ブラウザーイベントを処理してリッスンします。新しいページへのジャンプ、ブックマークの削除、タブの終了など。すべての Chrome API を使用できますが、Web ページと直接対話することはできません (Web ページと対話するにはコンテンツ スクリプトが必要です)。
コンテンツ スクリプト
コンテンツ スクリプトは、Web ページのコンテキストで JavaScript を実行できます。それらが挿入されたページの DOM を読み取って変更することもできます。コンテンツ スクリプトは、Chrome API の一部のみを使用できます。残りは Service Worker を介して間接的にアクセスできます。
ポップアップとページ
拡張機能には、ポップアップ、ページ オプションなど、Chrome API にアクセスできるさまざまな HTML ファイルを含めることができます。
簡単な拡張機能を開発する
Hello Extensionsの簡単な拡張機能を開発しましょう。
manifest.json ファイルを作成する
新しいディレクトリを作成し、そのディレクトリにmanifest.jsonという名前の。
mkdir hello_extension
cd hello_extension
touch manifest.jsonmanifest.jsonに次のコードを追加します。
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}上記の JSON ファイルには、拡張機能の機能と構成が記述されています. たとえば、アクションには、Chrome で表示する必要がある拡張機能のアイコンと、アイコンをクリックした後にポップアップするページが記述されています. ここでアイコンをディレクトリにダウンロードし、名前manifest.jsonを でdefault_icon。
htmlファイルを作成
上記のアクションでも 1 つが構成されdefault_popup、次にhello.htmlという名前の、次のコードを追加します。
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>負荷延長
パッケージ化されていない拡張機能を開発モードでロードします。
Chrome ブラウザのアドレス バーに入力します
chrome://extensions。次の 2 つの方法でも開くことができます。
開発者モードをオンにする
クリックして、展開された拡張機能を読み込みます
フォルダーを選択する
と、拡張ページに表示されます
固定延長
[固定] をクリックすると、拡張機能がツールバーに表示されます。次に、アイコンをクリックして、対応するページをポップアップ表示します。
リロード拡張機能
コードに戻り、拡張機能の名前を「Hello Extensions of the world!」に変更しましょう。
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}保存後、拡張ページに戻り、更新をクリックすると、名前が変更されていることがわかります。
変更を加えるたびに拡張機能をリロードする必要がありますか? 以下の表を参照してください。
| 拡張機能 | リロードする必要がありますか |
|---|---|
| マニフェスト | はい |
| サービスワーカー | はい |
| コンテンツ スクリプト | はい (およびホスト ページ) |
| ポップアップ | いいえ |
| オプションページ | いいえ |
| その他の拡張 HTML ページ | いいえ |
コンソール ログとエラーを表示する
コンソール ログ
開発中は、ブラウザ コンソール ログを使用してコードをデバッグできます。前のコードに追加<script src="popup.js"></script>
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>popup.jsという名前のファイルを作成し、次のコードを追加します。
console.log("This is a popup!")次：
更新延長
ポップアップを開く
右クリックポップアップ
検査を選択
開発者ツールの [コンソール] タブに切り替えます。
エラーログ
以下を変更しpopup.js、引用符を削除します
console.log("This is a popup!) // ❌ 错误代码更新後、拡張機能をクリックして開くと、エラー ボタンが表示されます。
エラー ボタンをクリックして、特定のエラー情報を表示します。
拡張されたプロジェクト構造
プロジェクト構造を拡張するには多くの方法がありますが、manifest.jsonファイルはルート ディレクトリに配置する必要があります。以下は構造の例です。
コンテンツ スクリプト
Content Script runs in the context of web page. Content Script は、標準の DOM を通じて、ブラウザがアクセスしたページの詳細を読み取り、変更し、この情報を親拡張機能に渡すことができます。
コンテンツ スクリプトを理解する能力
コンテンツ スクリプトは、次のような chrome API の一部を直接使用できます。
i18n
保管所
ランタイム：
接続
getManifest
getURL
ID
onConnect
onMessage
メッセージを送る
その他は、メッセージを送信することで実装できます。コンテンツ スクリプトは、拡張機能内のファイルを Web アクセス可能なリソースとして宣言した後、それらのファイルにアクセスできます。コンテンツ スクリプトは独立した環境で実行され、ページや他の拡張コンテンツ スクリプトと競合することなく、JavaScript 環境を変更できます。
<html>
<button id="mybutton">click me</button>
<script>
var greeting = "hello, ";
var button = document.getElementById("mybutton");
button.person_name = "Bob";
button.addEventListener(
"click",
() => alert(greeting + button.person_name + "."),
false
);
</script>
</html>
コンテンツ スクリプト インジェクション
コンテンツ スクリプト インジェクションには、静的宣言、動的宣言、プログラミング インジェクションの 3 つの方法があります。static 宣言は比較的単純で、manifest.json ファイルでcontent_scripts構成する。コンテンツ スクリプト スクリプトを実行する必要があるページを示すために、matchesフィールド。
"content_scripts": [
{
"matches": ["https://*.google.com/*"],
"css": ["styles.css"],
"js": ["content-script.js"]
}
],動的宣言の主な使用シナリオは、明確matchesでない。プログラミング インジェクションは、イベントに応じて、または特定の場合に使用する必要があります. 最後の例では、静的宣言を使用します。
サービスワーカー
Chrome 拡張機能は、Chrome ブラウザーのブラウジング エクスペリエンスを変更または強化するイベント ベースのプログラムです。イベントは、新しいページへの移動、ブックマークの削除、タブの終了など、ブラウザーによってトリガーされます。拡張機能は、Service Worker のスクリプトを通じてこれらのイベントをリッスンします。次に、特定の命令を実行します。Service Worker は必要に応じてロードされ、スリープ状態になるとアンロードされます。例えば：
拡張機能が初めてインストールされた、または新しいバージョンに更新された
拡張イベントが発生する
コンテンツ スクリプトまたはその他の拡張機能がメッセージを送信しました
Service Worker がロードされると、Service Worker はイベントがある限り実行され続けます。30 秒間アイドル状態になると、ブラウザーはそれを停止します。Service Worker は、リッスンするイベントが発生するまで休止状態を保ちます。発生した時点で、対応するイベント リスナーを実行し、アイドル状態になり、アンロードします。
Service Worker のログはこちらで確認できます
サービスワーカーの登録
"background": {
"service_worker": "background.js"
},拡張機能を初期化する
chrome.runtime.onInstalled.addListener(function (details) {
console.log("onInstalled event has been triggered with details: ", details);
// 检查安装、更新或卸载的原因
if (details.reason == "install") {
// 在安装扩展时执行的代码
} else if (details.reason == "update") {
// 在更新扩展时执行的代码
} else if (details.reason == "uninstall") {
// 在卸载扩展时执行的代码
}
});
モニターを設定する
/**
* 注意需要声明权限
*/
chrome.bookmarks.onCreated.addListener(function (id, bookmark) {
console.log(
"Bookmark created with title: " +
bookmark.title +
" and url: " +
bookmark.url
);
});
イベントのフィルター
/**
* 注意需要声明 webNavigation 权限
*/
chrome.webNavigation.onCompleted.addListener(() => {
console.info("The user has loaded my favorite website!");
});
フィルタリングを解除すると、すべてのイベントが出力されます。さまざまなイベントがさまざまな機能に対応しており、監視する適切なイベントを選択する必要があります。
Service Worker は Content Script と通信します
拡張タブをクリックするイベントを渡しchrome.tabs.sendMessage、コンテンツ スクリプトに登録してchrome.runtime.onMessage.addListener受け取ることができます。
色抽出拡張機能の開発
上記の知識ポイントに基づいて、次の機能を実装する必要があります。 1. ナビゲーション バーの拡張ボタンをクリックして、詳細を表示するパネルをポップアップ表示します 2. 現在のページのページ要素をマウスでクリックして、対応する背景を表示しますポップアップパネルの色 3. クリックしてコピー ボタンで現在の要素の背景色をコピーできます
ここでは、次のようにコア コードのみをリストします。
マニフェスト構成
{
"manifest_version": 3,
"name": "EasyColor",
"description": "Chrome extension for obtaining color in an easy way",
"version": "0.0.1",
"action": {
"default_icon": "images/icon-48.png"
},
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css": ["css/styles.css"],
"js": ["scripts/content.js"],
"run_at": "document_start"
}
],
"web_accessible_resources": [
{
"resources": ["/pages/panel.html"],
"matches": ["http://*/*", "https://*/*"]
}
]
}ナビゲーション バーの拡張ボタンをクリックして、表示パネルをポップアップ表示します。
まず、service_workerで、拡張機能のクリック イベントをリッスンし、それを content_scripts に送信する background.js を定義します。
chrome.action.onClicked.addListener(function (tab) {
//open pages
chrome.tabs.sendMessage(tab.id, {
action: "EVENT_PANEL_OPEN",
});
});content_scripts でEVENT_PANEL_OPENイベント、現在のページに iframe を追加してパネルを表示します。
chrome.runtime.onMessage.addListener((req, sender, sendResp) => {
const data = req;
if (data.action === "EVENT_PANEL_OPEN") {
let easyPanel = document.getElementById(easyPanelId);
if (easyPanel == null) {
easyPanel = document.createElement("iframe");
easyPanel.id = easyPanelId;
easyPanel.src = chrome.runtime.getURL("../pages/panel.html");
easyPanel.style.width = "100%";
easyPanel.style.height = "100%";
easyPanel.style.borderRadius = "20px";
easyPanel.style.border = "none";
const container = document.createElement("div");
container.id = easyContainerId;
container.style.width = "200px";
container.style.height = "250px";
container.style.position = "fixed";
container.style.top = "10px";
container.style.right = "10px";
container.style.zIndex = "10000";
container.style.boxShadow = "3px 2px 22px 1px rgba(0, 0, 0, 0.24)";
container.style.borderRadius = "20px";
container.appendChild(easyPanel);
document.body.appendChild(container);
}
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener(
"click",
function (e) {
e.stopPropagation();
e.preventDefault();
return false;
},
true
);
}
});クリックすると対応する色が表示されます
クリック イベントを content_scripts に追加して、現在の要素の背景色を取得し、それを iframe に渡して表示します。
document.addEventListener("mousedown", function (e) {
let easyPanel = document.getElementById(easyPanelId);
if (easyPanel == null) {
return;
}
const cpStyle = window.getComputedStyle(e.target);
easyPanel.contentWindow.postMessage(
{
type: "computedStyle",
data: JSON.stringify({
color: cpStyle.color,
backgroundColor: cpStyle.backgroundColor,
}),
},
"*"
);
});上記は、実装した要素色選択プラグインのコア コードです。詳細については、https://github.com/yangpeng7/ChromeExtensionBestPractice を参照してください。
参照リソース
https://developer.chrome.com/docs/extensions/mv3/
- 終わり -
斉武団について
Qi Wu Troupe は 360 Group の最大のフロントエンド チームであり、グループを代表して W3C および ECMA メンバー (TC39) の作業に参加しています。Qi Wu Troupeは人材育成を重視しており、エンジニア、講師、翻訳者、ビジネスインターフェース担当者、チームリーダーなど、従業員が選択できるさまざまな開発方向があり、対応する技術、専門、一般、リーダーシップのトレーニングを提供することで補完されています。もちろんです。Qi Dance Troupeは、あらゆる種類の優れた才能に注意を払い、オープンで才能を求める態度でQi Dance Troupeに参加することを歓迎します。
