プロローグ
こんにちは、HabraHabrの親愛なる訪問者！
私たちの人生の知識の次の日（ただし、私は学校ではなく仕事に専念しました）、 この記事の影響を受けて、Google Chrome-TabBasketの拡張機能を作成した経験についてのストーリーを書いています（どうやって、しかし、私は名前にナンセンスです）。 この記事は混合スタイルで設計されています-レッスンの要素が重複しているほか、コードの説明と重要な点の説明が重複しています。
主なポイントに直接進む前に、CSSの知識が少し乱雑であり、経験がほとんどなかったため、私の決定の一部が少し奇妙に見えるかもしれないことに注意します。
何がありますか
拡張機能を作成するには、実際にはツールは必要ありません。すべての作業はメモ帳やgeditでも行えます。 好みに応じてエディターを選択します（個人的には、このような場合、Notepad ++またはNetBeansを使用します。最初の方が簡単で、2番目の方がより機能的で、選択は常にあなた次第です）。
要点をつかむ
まず最初のソース 。
読者は拡張機能の作成の基本に既に精通していることを前提としているため（上記の記事から）、マニフェストからすぐに始めましょう。
{
"name" : "TabBasket " ,
"version" : "1.5" ,
"permissions" : [
"tabs" , "http://*/*"
],
"background_page" : "back.html" ,
"browser_action" : {
"default_title" : "Closed tabs" ,
"default_icon" : "icon.png" ,
"popup" : "popup.html"
}
}
* This source code was highlighted with Source Code Highlighter .
back.htmlとpopup.htmlの2つの要素は、徐々にさらに検証（作成、記述）されます。 マニフェストに驚きはありません。すべてが非常に透明です。 プロセスをよりよく理解するために、このアイデアの概要を簡単に説明します。 すばらしいback.htmlページは日陰で機能し、外観はありません。拡張機能をインストールした直後、または拡張機能が既にインストールされている場合はブラウザを起動した直後にコードが開始します。 その役割は、タブを作成、削除、または更新するイベントのハンドラーを設定することです。 Popup.htmlは、閉じられたタブのリストを直接形成し、任意のタブを復元できます。
先に進みます。 back.htmlファイルを解析します。
/* Tab constructor function. */
function AnyTab()
{
this .id = 0
this .url = ""
this .name = ""
this .favicon = ""
}
* This source code was highlighted with Source Code Highlighter .
タブ情報を保存するオブジェクトのコンストラクター関数。 この言語を使用すると、デフォルトで異なるメソッドで初期化されたオブジェクトを作成できます。これを選択しました。 タブのIDは保存されます（ブラウザ自体によって発行されます）、url（o_Oとは何ですか）、Name（サイトの名前）、およびfavicon（サイトアイコン、個別のホイッスル付き）。 さらにコードについて
var active = []
var closedTabs = []
var maxTabCount = 15
* This source code was highlighted with Source Code Highlighter .
アクティブ（オープン）タブとクローズの2つの配列が必要です。 （私の意見では）選択したタブの最大数は最適です。 イベントハンドラをハングさせる
chrome.tabs.onUpdated.addListener(onTabUpdated)
chrome.tabs.onRemoved.addListener(onTabRemoved)
chrome.tabs.onCreated.addListener(onTabCreated)
* This source code was highlighted with Source Code Highlighter .
この場合、onTabUpdated、onTabRemoved、およびonTabCreatedは関数ハンドラーの名前です。 さて、秘密のベールを少し開きましょう-タブが作成されたら、必要な特性（リンク、名前など）を覚えておく必要があります。 これは、閉じたタブのIDのみがonTabRemoved関数に渡されるためであり、既に言及されていないためです。 したがって、タブを閉じると、アクティブな配列のIDで検索されます（ところで、プログラムでタブが既に開いているときに拡張機能がインストールされている場合）、データはclosedTabs配列にコピーされ、アクティブな配列から削除されます。 これで、閉じたタブに関する完全な情報が得られ、簡単に復元できます！ しかし、注意深い読者は、onTabUpdated関数について言及しなかったという事実に注意を引くでしょう。 次の機能によって引き起こされる特別な役割があります（問題を読みます）-タブに関するすべての情報がすぐにonTabCreated関数に届くわけではありません。 肉眼で、新しく作成されたタブでタイトルがどのように変化するかを確認でき、アイコンがロードされます。 このデータは、後でonTabUpdated関数に流れます。
主力製品の役割はupdateTab関数によって果たされます。 最初のパラメーターとして-1を渡すと、単に新しいタブが作成されます。 別のケースでは、情報が更新されたタブのIDがそこに渡されます。
function updateTab(index, tab) {
/* Add new tab. index = -1 passed in onTabCreated */
if (index === -1) {
var newTab = new AnyTab()
newTab.id = tab.id
newTab.url = tab.url
newTab.name = tab.title
newTab.favicon = tab.favIconUrl
active.push(newTab)
}
/* Or update tab. Find index first. */
else {
var j, tbCt = active.length
for ( j = 0; j < tbCt; j++ ) {
if ( index == active[j].id )
break
}
if ( j == tbCt ) {
console.log( "updateTab not found ID " +index)
return
}
active[j].id = tab.id
active[j].url = tab.url
active[j].name = tab.title
active[j].favicon = tab.favIconUrl || "icon.png"
}
}
* This source code was highlighted with Source Code Highlighter .
最も難しい部分は背後にありますが、今では外観とpopup.htmlについて少しですか？
この拡張機能のインターフェイスは、サイトのリストを含むポップアップウィンドウで、左側にアイコンがあり、より直感的に使用できます。 また、上部にはtoolAreaクラスのdivがあります-これはツール領域です。一方、誇張して誇張されたボタンは1つだけです-リストをクリーニングします。
このページのJavaScriptの入力は非常に一般的で透過的です。ここで重要なのは、back.htmlへのアクセス、つまりchrome.extension.getBackgroundPage（）メソッドを呼び出してそこに宣言されたすべての関数と変数です。
このスクリプトは膨大ですが、論理的な部分に分割すると、非常に単純になります。
- リスト作成
- マウスオーバーおよびマウスアウトハンドラーの定義
- リスト項目をクリックする機能とカーソルの実装
これはすでに純粋でシンプルなJavaScriptであり、既に使用した手法を少し混ぜ合わせたものです。
作成：
var back = chrome.extension.getBackgroundPage()
for ( var k = back.closedTabs.length - 1; k >= 0; k--) {
document .write ( "<div id='" + back.closedTabs[k].id + "' onclick='divClick(this)' class='divClass'>" )
document .write ( "<img src=" + back.closedTabs[k].favicon + " class='imgClass'>" )
var txtName = back.closedTabs[k].name
if (txtName.length > 40)
txtName = txtName.substr(0, 35) + "..."
document .write ( "<span class='labelClass'>" + txtName + "</span>" )
document .write ( "</div>" )
}
* This source code was highlighted with Source Code Highlighter .
ハンドラー：
var divs = document .getElementsByTagName( "div" );
for ( var i = 0; i < divs.length; i++)
{
if (divs[i].id === "toolDiv" ) {
divs[i].onclick = cleanToolClick
} else {
divs[i].onmouseover = mouseOverEvent
divs[i].onmouseout = mouseOutEvent
}
}
* This source code was highlighted with Source Code Highlighter .
開発の特定の時点で、chrome.tabs.create関数を使用してdivClickに新しいタブを作成すると（ちなみに、記事から思い出すよりもドキュメントで覗きやすい引数のオブジェクトを使用する）、タブは自動的にonTabCreatedになると考えました、プログラムで作成されたタブをアクティブな配列に追加することを心配する必要はありません！
藤堂
改善のための提案を書いてください！ 現時点では、タブの最大数を選択してオプションページを作成することは明らかなように見えますが、そのような流行のため、ページを作成したくありません（怠け者に読みます）！
エピローグ
行われた作業の結果として、ブラウザバスケットのような非常に必要な機能を実装する、家庭や日常生活でかなり有用な拡張機能を取得します。 この記事では、タブを操作するための基本的な手法、Google Chrome拡張機能の構造要素の密接な相互作用の原則について説明します。 拡張機能の作成は、非常に興味深くエキサイティングなアクティビティです！ 基本的な要件は、html、css、およびJavaScriptの基本的な知識ですが、必須ではありません-活発な関心の前に立つものは何もありません！
そして、私は自分がJSの新参者だと考えているので、コードに関するコメントを受け入れます！
頑張って、頑張って、実験して、作成してください！