mozilla

リビジョンの比較

タブブラウザ用コード

Change Revisions

リビジョン 64660:

リビジョン 64660 (編集者: satyr / 編集日時: )

リビジョン 64661:

リビジョン 64661 (編集者: woby / 編集日時: )

タイトル:
タブブラウザ用コード
タブブラウザ用コード
URL スラグ:
Code_snippets/Tabbed_browser
Code_snippets/Tabbed_browser
タグ:
Extensions, Add-ons
Extensions, Add-ons
内容:

リビジョン 64660
リビジョン 64661
n14      <a href="/ja/Firefox_2_for_developers" title="ja/Firefox_2_n14      {{ 英語版章題("Multiple meanings for the word 'browser'") }}
>for_developers">Firefox 2</a> はタブでの変更をより簡単に取得可能ですので、Firefox 2 以上向 
>けに開発しているなら、そのバージョン向けのサンプルを利用すべきです。Firefox 1.5 もしくはそれ以下向けのサンプルは、通常 
> Firefox 2 でも正常に動作します。 
15    </p>
16    <h3 id="Getting_access_to_the_browser" name="Getting_access_t
 >o_the_browser">
17      「ブラウザ」という単語の意味
18    </h3>
19    <p>
20      「ブラウザ」という単語はいろいろな使い方をされます。当然、Firefoxのアプリケーション全体は“ブラウザ”と呼ばれま
 >す。Firefoxブラウザの中にはタブがあり、一般のウェブページブラウザのイメージからしても、{{ XULElem("browse
 >r") }}要素というXUL的なイメージからしても、内側のそれぞれのタブもブラウザです。さらに、この文書中や一部のFirefoxの
 >ソースに現れる「ブラウザ」には、FirefoxのXULウィンドウ中の“tabbrowser要素”を意味するものもあります。
n19    <h3 name=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.B8.E3.81n25    <h3 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.B8.E3.81.A
>.AE.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9.E6.96.B9.E6.B3.95">>E.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9.E6.96.B9.E6.B3.95" name=".E
 >3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.B8.E3.81.AE.E3.82.A2.E3.
 >82.AF.E3.82.BB.E3.82.B9.E6.96.B9.E6.B3.95">
n23      ブラウザは、アプリケーションのメインウィンドウ (Firefox では browser.xul) の中に配置された {n29      {{ 英語版章題("From main window") }}
>{ XULElem("tabbrowser") }} 要素です。browser.xul へオーバーレイを出すような拡張機能では普通 
>ですが、ブラウザウィンドウで実行されるコードならば、大域変数 <code>gBrowser</code> を使ってブラウザにアクセ 
>スできます。 
30    </p>
31    <h4 id="メインウィンドウから">
32      メインウィンドウから
33    </h4>
34    <p>
35      browser.xul にオーバーレイするような拡張機能では普通ですが、FirefoxのグローバルなChromeWin
 >dowで実行されるコードならば、大域変数 <code>gBrowser</code> を使って{{ XULElem("tabbro
 >wser") }}要素にアクセスできます。
n30      <code>gBrowser</code> が未定義ならば、あなたのコードはブラウザウィンドウのスコープで実行されていn42      <code>gBrowser</code> が未定義ならば、あなたのコードはブラウザウィンドウのスコープで実行されてい
>ないか、もしくは早段階で実行されすぎています。<code>gBrowser</code> にはブラウザウィンドウが完全にロードさ>ないか、もしくは早すぎる段階で実行されています。<code>gBrowser</code> にはブラウザウィンドウが完全にロードさ
>れた後でのみアクセス出来ます。ウィンドウが開かれたすぐ後に <code>gBrowser</code> に対して何かしたければ、 >れた後でのみアクセス出来ます。ウィンドウが開かれたすぐ後に <code>gBrowser</code> に対して何かしたければ、 
>load イベントを<a href="/ja/DOM/element.addEventListener" title="ja/DO>load イベントを<a href="/ja/DOM/element.addEventListener" title="ja/DO
>M/element.addEventListener">リッスン</a> し、イベントリスナの中で <code>gBrowser<>M/element.addEventListener">リッスン</a> し、イベントリスナの中で <code>gBrowser<
>/code> を使ってください。>/code> を使ってください。
31    </p>
32    <p>43    </p>
33      あなたのコードがサイドバーやダイアログ内で動作している場合、<code>gBrowser</code>を利用するにはま
>ず必要なブラウザウィンドウへのアクセスを取得する必要があります。これについてのより詳細の情報は <a href="/ja/Work 
>ing_with_windows_in_chrome_code" title="ja/Working_with_windows_i 
>n_chrome_code">chrome コードでウィンドウを操作する</a> にあります。 
34    </p>44    <p>
45      {{ 英語版章題("From a sidebar") }}
46    </p>
47    <h4 id="サイドバーから">
48      サイドバーから
49    </h4>
n38    <pre>n53    <pre class="brush: js">
nn64      {{ 英語版章題("From a dialog") }}
65    </p>
66    <h4 id="ダイアログから">
67      ダイアログから
68    </h4>
69    <p>
n51    <pre class="eval">n72    <pre class="brush: js">
n57    <pre class="eval">n78    <pre class="brush: js">
n64      {{ 英語版章題("Opening a new tab") }}n85      {{ 英語版章題("Opening a URL in a new tab") }}
n66    <h3 name=".E6.96.B0.E3.81.97.E3.81.84.E3.82.BF.E3.83.96.E3.82n87    <h3 id=".E6.96.B0.E3.81.97.E3.81.84.E3.82.BF.E3.83.96.E3.82.9
>.92.E9.96.8B.E3.81.8F">>2.E9.96.8B.E3.81.8F" name=".E6.96.B0.E3.81.97.E3.81.84.E3.82.BF.E
 >3.83.96.E3.82.92.E9.96.8B.E3.81.8F">
n77      {{ 英語版章題("Opening a URL in the correct window/tab") }}n98      {{ 英語版章題("Manipulating content of a new tab") }}
n79    <h4 name="Manipulating_content_of_a_new_tab">n100    <h4 id="Manipulating_content_of_a_new_tab" name="Manipulating
 >_content_of_a_new_tab">
n85    <pre>n106    <pre class="brush: js">
n90// よりよい方法n111// よい方法
n92newTab.addEventListener("load", function() { newTab.contentDocumen113newTab.addEventListener("load", function() {
>nt.body.innerHTML = "&lt;div&gt;hello world&lt;/div&gt;"; }, true 
>); 
114  newTab.contentDocument.body.innerHTML = "&lt;div&gt;hello world
 >&lt;/div&gt;";
115}, true);
n94    <h3 name="URL_.E3.82.92.E9.81.A9.E5.88.87.E3.81.AA.E3.82.A6.En117    <p>
>3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.82.84.E3.82.BF.E3.83.96.E3. 
>81.A7.E9.96.8B.E3.81.8F"> 
118      (このonLoadハンドラのイベントターゲットはXULの'tab'要素になります。) 詳しくは<a href="/ja
 >/XUL/tabbrowser#m-getBrowserForTab" title="ja/XUL/tabbrowser#m-ge
 >tBrowserForTab">tabbrowser</a> の getBrowserForTab() を見てください。
119    </p>
120    <p>
121      {{ 英語版章題("Opening a URL in the correct window/tab") }}
122    </p>
123    <h3 id="URL_.E3.82.92.E9.81.A9.E5.88.87.E3.81.AA.E3.82.A6.E3.
 >82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.82.84.E3.82.BF.E3.83.96.E3.81
 >.A7.E9.96.8B.E3.81.8F" name="URL_.E3.82.92.E9.81.A9.E5.88.87.E3.8
 >1.AA.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.82.84.E3.82.
 >BF.E3.83.96.E3.81.A7.E9.96.8B.E3.81.8F">
nn126    <p>
127      簡単にURLをタブで開くことができるメソッドが <code><a class="external" href="htt
 >p://mxr.mozilla.org/mozilla-central/source/browser/base/content/u
 >tilityOverlay.js" rel="external nofollow" target="_blank" title="
 >http://mxr.mozilla.org/mozilla-central/source/browser/base/conten
 >t/utilityOverlay.js">chrome://browser/content/utilityOverlay.js</
 >a></code> にあります。<code>openUILinkIn</code> と <code>openUILink</cod
 >e> です。
128    </p>
129    <dl>
130      <dt>
131        <code>openUILinkIn( url, where, allowThirdPartyFixup, pos
 >tData, referrerUrl )</code>
132      </dt>
133      <dd>
134        <code>where</code>:
135        <ul>
136          <li>"current" 現在のタブ (もしブラウザウィンドウがなければ、代わりに新しいウィンドウで開く)
137          </li>
138          <li>"tab" 新しいタブ (もしブラウザウィンドウがなければ、代わりに新しいウィンドウで開く)
139          </li>
140          <li>"tabshifted" "tab"と同じだが、デフォルトが「新しいタブを選択する」ならバックグラウン
 >ドで開く。逆も同様。
141          </li>
142          <li>"window" 新しいウィンドウ
143          </li>
144          <li>"save" ディスクに保存する (ファイル名は指定できない!)
145          </li>
146        </ul>
147      </dd>
148      <dt>
149        <code>openUILink( url, e, ignoreButton, ignoreAlt, allowK
 >eywordFixup, postData, referrerUrl )</code>
150      </dt>
151    </dl>
n109    <pre>n164    <pre class="brush: js">
n117      {{ 英語版章題("Closing a tab") }}n
118    </p>
119    <h3 name=".E3.82.BF.E3.83.96.E3.82.92.E9.96.89.E3.81.98.E3.82
>.8B"> 
120      タブを閉じる
121    </h3>
122    <p>
123      このサンプルは現在選択されているタブを閉じます。
124    </p>
125    <pre class="eval">
126gBrowser.removeCurrentTab();
127</pre>
128    <p>
129      また、引数として XUL の {{ XULElem("tab") }} 要素を一つだけ取る、より汎用的な <code>
>removeTab</code> というメソッドもあります。 
130    </p>
131    <p>
132      {{ 英語版章題("Changing active tab") }}
133    </p>
134    <h3 name=".E9.81.B8.E6.8A.9E.E3.81.95.E3.82.8C.E3.81.A6.E3.81
>.84.E3.82.8B.E3.82.BF.E3.83.96.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.9 
>9.E3.82.8B"> 
135      選択されているタブを変更する
136    </h3>
137    <p>
138      タブを一つ右へ移動します。
139    </p>
140    <pre>
141gBrowser.mTabContainer.advanceSelectedTab(1, true);
142</pre>
143    <p>
144      こちらは左へ移動します。
145    </p>
146    <pre>
147gBrowser.mTabContainer.advanceSelectedTab(-1, true);
148</pre>
149    <p>
150      {{ 英語版章題("Detecting page load") }}
151    </p>
152    <h3 name=".E3.83.9A.E3.83.BC.E3.82.B8.E8.AA.AD.E3.81.BF.E8.BE
>.BC.E3.81.BF.E3.81.AE.E6.A4.9C.E5.87.BA"> 
153      ページ読み込みの検出
154    </h3>
155    <pre>
156function examplePageLoad(event)
157{
158  if (event.originalTarget instanceof HTMLDocument) {
159    var doc = event.originalTarget;
160    if (event.originalTarget.defaultView.frameElement) {
161      // タブにフレームが読み込まれました。doc はフレームセットのルート
162      // ドキュメントでなければなりません。もし、このウェブページに frame/iframe が
163      // 読み込まれたときに何もしないなら、次の行のコメントアウトを外してください
164      // return;
165      // ルートドキュメントを探索する
166      while (doc.defaultView.frameElement) {
167        doc=doc.defaultView.frameElement.ownerDocument;
168      }
169    }
170  }
171}
172 
173// ブラウザウィンドウが初期化されるまでコールバック関数を追加しようとしないで
174// ください。タブブラウザへのコールバックの追加はブラウザウィンドウが
175// 読み込まれたあとにする必要があります。
176window.addEventListener(
177  "load",
178  function () {
179    // ドキュメントが読み込まれるたびに実行されるコールバック関数を追加する
180    // ドキュメント内部の frame/iframe にも適用されるので注意が必要
181    gBrowser.addEventListener("load", examplePageLoad, true);
182  },
183  false
184);
185 
186...
187// もし、必要なくなれば
188gBrowser.removeEventListener("load", examplePageLoad, true);
189...
190</pre>
191    <p>
192      {{ 英語版章題("Notification when a tab is added or removed (&lt;
>= Firefox 1.5)") }} 
193    </p>
194    <h3 name=".E3.82.BF.E3.83.96.E3.81.8C.E8.BF.BD.E5.8A.A0.E3.83
>.BB.E5.89.8A.E9.99.A4.E3.81.95.E3.82.8C.E3.81.9F.E3.81.A8.E3.81.8 
>D.E3.81.AB.E9.80.9A.E7.9F.A5.E3.81.99.E3.82.8B_.28.3C.3D_Firefox_ 
>1.5.29"> 
195      タブが追加・削除されたときに通知する (&lt;= Firefox 1.5)
196    </h3>
197    <pre>
198function exampleTabAdded(event)
199{ // 新規タブを監視
200  if (event.relatedNode != gBrowser.mPanelContainer)
201    return; 
202      // DOM のどこかになる (インターフェースで変化が捉えられるまで?)
203 
204  var browser;
205  if (event.target.localName == "browser") // SeaMonkey
206    browser = event.target;
207  else if (event.target.localName == "vbox") // Firefox
208    browser = event.target.childNodes[1];
209  // browser は追加された browser の XUL 要素です
210}
211 
212function exampleTabRemoved(event)
213{
214  if (event.relatedNode != gBrowser.mPanelContainer)
215    return;
216 
217  var browser;
218  if (event.target.localName == "browser") // SeaMonkey
219    browser = event.target;
220  else if (event.target.localName == "vbox") // Firefox
221    browser = event.target.childNodes[1];
222  // browser は削除された browser の XUL 要素です
223}
224 
225// 初期化中に
226var container = gBrowser.mPanelContainer;
227container.addEventListener("DOMNodeInserted", exampleTabAdded, fa
>lse); 
228container.addEventListener("DOMNodeRemoved", exampleTabRemoved, f
>alse); 
229 
230// 必要なくなれば
231container.removeEventListener("DOMNodeInserted", exampleTabAdded,
> false); 
232container.removeEventListener("DOMNodeRemoved", exampleTabRemoved
>, false); 
233</pre>
234    <p>
235      {{ 英語版章題("Notification when a tab is added or removed (Fire
>fox 2+)") }} 
236    </p>
237    <h3 name=".E3.82.BF.E3.83.96.E3.81.8C.E8.BF.BD.E5.8A.A0.E3.82
>.82.E3.81.97.E3.81.8F.E3.81.AF.E5.89.8A.E9.99.A4.E3.81.95.E3.82.8 
>C.E3.81.9F.E3.81.A8.E3.81.8D.E3.81.AB.E9.80.9A.E7.9F.A5.E3.81.99. 
>E3.82.8B_.28Firefox_2.2B.29"> 
238      タブが追加もしくは削除されたときに通知する (Firefox 2+)
239    </h3>
240    <pre>
241function exampleTabAdded(event)
242{
243  var browser = event.target.linkedBrowser;
244  // browser は追加された browser をさす XUL 要素です
245}
246 
247function exampleTabMoved(event)
248{
249  var browser = event.target.linkedBrowser;
250  // browser は移動した browser をさす XUL 要素です
251}
252 
253function exampleTabRemoved(event)
254{
255  var browser = event.target.linkedBrowser;
256  // browser は削除された browser をさす XUL 要素です
257}
258 
259// 初期化中に
260var container = gBrowser.tabContainer;
261container.addEventListener("TabOpen", exampleTabAdded, false);
262container.addEventListener("TabMove", exampleTabMoved, false);
263container.addEventListener("TabClose", exampleTabRemoved, false);
264 
265// 必要なくなれば
266container.removeEventListener("TabOpen", exampleTabAdded, false);
267container.removeEventListener("TabMove", exampleTabMoved, false);
268container.removeEventListener("TabClose", exampleTabRemoved, fals
>e); 
269</pre>
270    <p>
271      {{ 英語版章題("Detecting tab selection (&lt;= Firefox 1.5)") }}
272    </p>
273    <h3 name=".E3.82.BF.E3.83.96.E3.81.8C.E9.81.B8.E6.8A.9E.E3.81
>.95.E3.82.8C.E3.81.9F.E3.81.93.E3.81.A8.E3.82.92.E6.A4.9C.E5.87.B 
>A.E3.81.99.E3.82.8B_.28.3C.3D_Firefox_1.5.29"> 
274      タブが選択されたことを検出する (&lt;= Firefox 1.5)
275    </h3>
276    <p>
277      次のコードでブラウザの新たにタブが選択されたことを検出できます。
278    </p>
279    <pre>
280function exampleTabSelected(event)
281{
282  var browser = gBrowser.getBrowserAtIndex(gBrowser.mTabContainer
>.selectedIndex); 
283  // browser はその時に選択された browser の XUL 要素
284}
285 
286// 初期化中に
287var container = gBrowser.mPanelContainer;
288container.addEventListener("select", exampleTabSelected, false);
289 
290// 必要なくなれば
291var container = gBrowser.mPanelContainer;
292container.removeEventListener("select", exampleTabSelected, false
>); 
293</pre>
294    <p>
295      {{ 英語版章題("Detecting tab selection (Firefox 2+)") }}
296    </p>
297    <h3 name=".E3.82.BF.E3.83.96.E3.81.8C.E9.81.B8.E6.8A.9E.E3.81
>.95.E3.82.8C.E3.81.9F.E3.81.93.E3.81.A8.E3.82.92.E6.A4.9C.E5.87.B 
>A.E3.81.99.E3.82.8B_.28Firefox_2.2B.29"> 
298      タブが選択されたことを検出する (Firefox 2+)
299    </h3>
300    <p>
301      次のコードでブラウザの新たにタブが選択されたことを検出できます。
302    </p>
303    <pre>
304function exampleTabSelected(event)
305{
306  var browser = gBrowser.selectedTab.linkedBrowser;
307  // browser はその時に選択された browser の XUL 要素
308}
309 
310// 初期化中に
311var container = gBrowser.tabContainer;
312container.addEventListener("TabSelect", exampleTabSelected, false
>); 
313 
314// 必要なくなれば
315container.removeEventListener("TabSelect", exampleTabSelected, fa
>lse); 
316</pre>
317    <p>
318      {{ 英語版章題("Getting document of currently selected tab") }}
319    </p>
320    <h3 name=".E7.8F.BE.E5.9C.A8.E9.81.B8.E6.8A.9E.E3.81.95.E3.82
>.8C.E3.81.A6.E3.81.84.E3.82.8B.E3.82.BF.E3.83.96.E3.81.AE.E3.83.8 
>9.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.82.92.E5.8F.96. 
>E5.BE.97.E3.81.99.E3.82.8B"> 
321      現在選択されているタブのドキュメントを取得する
322    </h3>
323    <p>
324      次のコードで現在選択されているタブのドキュメントを取得できます。このコードはブラウザウィンドウのスコープで動作します 
>(ブラウザウィンドウへのオーバーレイで動作させる時など) 。 
325    </p>
326    <pre class="eval">
327gBrowser.selectedBrowser.contentDocument;
328</pre>
329    <p>
330      もしくは
331    </p>
332    <pre class="eval">
333content.document
334</pre>
335    <p>
336      ブラウザウィンドウから開かれたウィンドウやダイアログで動作させる場合は、このコードを使って、そのウィンドウを開いたブラ
>ウザウィンドウの、選択されているタブで表示されているドキュメントを取得できます。 
337    </p>
338    <pre class="eval">
339window.opener.content.document
340</pre>
341    <p>
342      ブラウザウィンドウから開かれたものでないウィンドウやダイアログからは、<a href="/ja/nsIWindowMe
>diator" title="ja/nsIWindowMediator">nsIWindowMediator</a> を使って、一 
>番最近使われたブラウザウィンドウの、選択されているタブで表示されているドキュメントを取得できます。 
343    </p>
344    <pre class="eval">
345var wm = Components.classes["@mozilla.org/appshell/window-mediato
>r;1"]. 
346         getService(Components.interfaces.nsIWindowMediator);
347var recentWindow = wm.getMostRecentWindow("navigator:browser");
348return recentWindow ? recentWindow.content.document.location : nu
>ll; 
349</pre>
350    <p>
351      <a href="/ja/Working_with_windows_in_chrome_code#Content_wi
>ndows" title="ja/Working_with_windows_in_chrome_code#Content_wind 
>ows">chrome コードでウィンドウを操作する</a> も参照してください。 
352    </p>
353    <p>
354      {{ 英語版章題("Enumerating tabs") }}
355    </p>
356    <h3 name=".E3.82.BF.E3.83.96.E3.81.AE.E5.88.97.E6.8C.99">
357      タブの列挙
358    </h3>
359    <p>
360      ブラウザで開いている全てのタブを取得するには、最初にブラウザウィンドウへの参照を取得します。もし、Firefox の 
><code>browser.xul</code> オーバーレイから実行されているコード (たとえば、ツールバーボタンやメニューでの 
> <em>click</em> ハンドラなど) なら、現在のウィンドウにすでに定義されている変数である <code>window< 
>/code> でアクセスできます。しかしながら、それ自身のウィンドウから実行されているコード (たとえば、設定やオプションダイアロ 
>グなど) なら、<code><a href="/ja/nsIWindowMediator" title="ja/nsIWindow 
>Mediator">nsIWindowMediator</a></code> をブラウザのウィンドウを取得するのに利用する必要があ 
>ります。 
361    </p>
362    <p>
363      次に、<code>&lt;tabbrowser/&gt;</code>要素を取得します。前の手順で取得したブラウザのウ
>ィンドウを <code>win</code> とすると、<code>win.gBrowser</code> によって取得できます。 
>もし、<code>browser.xul</code> オーバーレイの中で動作しているなら、より簡単に <code>window. 
>gBrowser</code> でなく、<code>gBrowser</code> で取得可能です。 
364    </p>
365    <p>
366      最後に、<code>gBrowser.browsers.length</code> により開いているタブの数を取得し、
><code>gBrowser.getBrowserAtIndex()</code> により <code>&lt;browser/& 
>gt;</code> 要素を取得します。たとえば、 
367    </p>
368    <pre>
369var num = gBrowser.browsers.length;
370for (var i = 0; i &lt; num; i++) {
371  var b = gBrowser.getBrowserAtIndex(i);
372  try {
373    dump(b.currentURI.spec);
374    // 開いている全てのタブの URL をコンソールへ出力
375  } catch(e) {
376    Components.utils.reportError(e);
377  }
378}
379</pre>
380    <p>
381      <code>&lt;browser/&gt;</code> や <code>&lt;tabbrowser/&gt;</
>code> 要素でどんなメソッドが利用できるかについてより詳細は、<a href="/ja/DOM_Inspector" titl 
>e="ja/DOM_Inspector">DOM Inspector</a> を利用するか、<a class="external" 
> href="http://lxr.mozilla.org/seamonkey/source/toolkit/content/wi 
>dgets/browser.xml">browser.xml</a> や <a class="external" href="ht 
>tp://lxr.mozilla.org/seamonkey/source/toolkit/content/widgets/tab 
>browser.xml">tabbrowser.xml</a> の対応する XBL バインディングを参照してください。 
382    </p>
383    <p>
n386    <h3 name=".E3.82.BF.E3.83.96.E3.81.AE.E5.86.8D.E5.88.A9.E7.94n174    <h4 id="Reusing_tabs" name="Reusing_tabs">
>.A8"> 
n388    </h3>n176    </h4>
n395    <h4 name="URL.2FURI_.E3.81.AB.E3.82.88.E3.82.8A.E5.86.8D.E5.8n183    <h5 id="URL.2FURI_.E3.81.AB.E3.82.88.E3.82.8A.E5.86.8D.E5.88.
>8.A9.E7.94.A8.E3.81.99.E3.82.8B">>A9.E7.94.A8.E3.81.99.E3.82.8B" name="URL.2FURI_.E3.81.AB.E3.82.88
 >.E3.82.8A.E5.86.8D.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B">
n397    </h4>n185    </h5>
398    <p>
399      さまざまな拡張機能で共通する機能として、拡張機能のボタンやリンクをユーザがクリックしたときに、ブラウザウィンドウで <
>code><a class=" external" href="chrome://" rel="freelink">chrome: 
>//</a></code> URI (ヘルプや about 情報など) や外部の (オンラインの <code>http(s):// 
></code>) HTML 文書を開くようにしています。次のコードは、すでに必要な URL や URI を表示しているタブを再利用 
>する方法を示しています。もし、存在しなければ、指定された URL や URI を新しいタブで開きます。 
400    </p>186    <p>
187      さまざまな拡張機能で共通する機能として、拡張機能のボタンやリンクをユーザがクリックしたときに、ブラウザウィンドウで <
 >code>chrome://</code> URI (ヘルプや about 情報など) や外部の (オンラインの <code>ht
 >tp(s)://</code>) HTML 文書を開くようにしています。次のコードは、すでに必要な URL や URI を表示して
 >いるタブを再利用する方法を示しています。もし、存在しなければ、指定された URL や URI を新しいタブで開きます。
401    <pre>188    </p>
189    <pre class="brush: js">
n410    var browserInstance = browserEnumerator.getNext().gBrowser;n198    var browserWin = browserEnumerator.getNext();
199    var tabbrowser = browserWin.gBrowser;
n413    var numTabs = browserInstance.tabContainer.childNodes.length;n202    var numTabs = tabbrowser.browsers.length;
414    for(var index=0; index&lt;numTabs; index++) {203    for (var index = 0; index &lt; numTabs; index++) {
415      var currentBrowser = browserInstance.getBrowserAtIndex(inde204      var currentBrowser = tabbrowser.getBrowserAtIndex(index);
>x); 
n419        browserInstance.selectedTab = browserInstance.tabContainen208        tabbrowser.selectedTab = tabbrowser.tabContainer.childNod
>r.childNodes[index];>es[index];
n421        // この browser にフォーカスを移すn210        // *この*ブラウザウィンドウにフォーカスを移す
n437      // すでに開いている browser ウィンドウがないので、新たに開くn226      // すでに開いているブラウザウィンドウがないので、新たに開く
n446    <h4 name=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E6.9D.A1.E4.BBn235    <h5 id="Reusing_by_other_criteria" name="Reusing_by_other_cri
>.B6.E3.81.AB.E3.82.88.E3.81.A3.E3.81.A6.E5.86.8D.E5.88.A9.E7.94.A>teria">
>8.E3.81.99.E3.82.8B"> 
n448    </h4>n237    </h5>
449    <p>
450      すでにどのような URL/URI が開かれているかにかまわず、既存のタブを再利用したいということがあるでしょう。これは
>、タブがブラウザのほかのコンポーネントにでなく、あなたの拡張機能により開かれたときを想定しています。最初にタブを開いたときに何らか 
>の属性をつけておくことで特定のタブを再利用することが可能です。後に、タブを再利用したくなったとき、われわれは全てのタブについてつけ 
>た属性を持っているかどうかを調べるのです。もし、属性を持つタブが見つかれば、その URL/URI を変更して focus/sele 
>ct します。もし、そういったタブが見つからなければ (たとえば、タブがユーザによって閉じられた場合や、最初に開こうとしたときなど 
>)、新しいタブを何らかの属性をつけて開きます。 
451    </p>238    <p>
239      すでにどのような URL/URI を開いているかにかかわらず、既存のタブを再利用したいということがあるでしょう。そのタ
 >ブがほかのブラウザコンポーネントにでなく、あなたの拡張機能により開かれたとします。最初にタブを開くときに独自の属性を付加しておくこ
 >とで、タブを再利用できます。後々そのタブを再利用したい時には、開かれているすべてのタブからその独自の属性をもったタブを探します。そ
 >のようなタブがあれば、そのタブのURL/URIを変更し、そのタブを選択してフォーカスします。そうでなければ (ユーザがタブを閉じた
 >か、そもそもそのようなタブを開いていないかでしょう)、独自の属性をもった新しいタブを作ります。
452    <pre>240    </p>
241    <pre class="brush: js">
n455           .getService(Components.interfaces.nsIWindowMediator);n244                     .getService(Components.interfaces.nsIWindowM
 >ediator);
456  for (var found = false, index = 0, browserInstance = wm.getEnum245  for (var found = false, index = 0, tabbrowser = wm.getEnumerato
>erator('navigator:browser').getNext().gBrowser;>r('navigator:browser').getNext().gBrowser;
457       index &lt; browserInstance.mTabContainer.childNodes.length246       index &lt; tabbrowser.tabContainer.childNodes.length &amp;
> &amp;&amp; !found;>&amp; !found;
n460    // 次のタブを取得するn249    // 次のタブを取得
461    var currentTab = browserInstance.mTabContainer.childNodes[ind250    var currentTab = tabbrowser.tabContainer.childNodes[index];
>ex]; 
462 251  
463    // タブがつけた属性を持っているかどうかを調べる252    // このタブは独自の属性をもっているかな?
n466      // 持っている -- なら select して focus しますn255      // Yes -- それを選択・フォーカス
467      browserInstance.selectedTab = currentTab;256      tabbrowser.selectedTab = currentTab;
n469      // 他のものに focus がされているならこの browser に focus しますn258      // 他のブラウザウィンドウがフォーカスされている場合、*この*ウィンドウをフォーカス
470      browserInstance.focus();259      tabbrowser.ownerDocument.defaultView.focus();
n476    // われわれのタブは開かれてませんので開きますn265    // ここから開かれたタブはない。新規に開く。
n478    var browserInstance = browserEnumerator.getNext().gBrowser; n267    var tabbrowser = browserEnumerator.getNext().gBrowser;
479 268  
n481    var newTab = browserInstance.addTab(url);n270    var newTab = tabbrowser.addTab(url);
482    newTab.setAttribute("myextension-myattribute", "xyz");271    newTab.setAttribute(attrName, "xyz");
483 272  
484    // タブに focus273    // タブを選択・フォーカス
485    browserInstance.selectedTab = newTab;274    tabbrowser.selectedTab = newTab;
486 275    
487    // 他のものに focus がされているならこの browser に focus します276    // 他のブラウザウィンドウがフォーカスされている場合、*この*ウィンドウをフォーカス
488    browserInstance.focus();277    tabbrowser.ownerDocument.defaultView.focus();
nn279}
n492      この関数は次のように呼べます&nbsp;:n282      この関数は以下のように呼びます。
tt288      {{ 英語版章題("Closing a tab") }}
289    </p>
290    <h3 id=".E3.82.BF.E3.83.96.E3.82.92.E9.96.89.E3.81.98.E3.82.8
 >B" name=".E3.82.BF.E3.83.96.E3.82.92.E9.96.89.E3.81.98.E3.82.8B">
291      タブを閉じる
292    </h3>
293    <p>
294      このサンプルは現在選択されているタブを閉じます。
295    </p>
296    <pre class="eval">
297gBrowser.removeCurrentTab();
298</pre>
299    <p>
300      また、引数として XUL の {{ XULElem("tab") }} 要素を一つだけ取る、より汎用的な <code>
 >removeTab</code> というメソッドもあります。
301    </p>
302    <p>
303      {{ 英語版章題("Changing active tab") }}
304    </p>
305    <h3 id=".E9.81.B8.E6.8A.9E.E3.81.95.E3.82.8C.E3.81.A6.E3.81.8
 >4.E3.82.8B.E3.82.BF.E3.83.96.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.
 >E3.82.8B" name=".E9.81.B8.E6.8A.9E.E3.81.95.E3.82.8C.E3.81.A6.E3.
 >81.84.E3.82.8B.E3.82.BF.E3.83.96.E3.82.92.E5.A4.89.E6.9B.B4.E3.81
 >.99.E3.82.8B">
306      選択されているタブを変更する
307    </h3>
308    <p>
309      タブを一つ右へ移動します。
310    </p>
311    <pre>
312gBrowser.tabContainer.advanceSelectedTab(1, true);
313</pre>
314    <p>
315      こちらは左へ移動します。
316    </p>
317    <pre>
318gBrowser.tabContainer.advanceSelectedTab(-1, true);
319</pre>
320    <p>
321      {{ 英語版章題("Detecting page load") }}
322    </p>
323    <h3 id=".E3.83.9A.E3.83.BC.E3.82.B8.E8.AA.AD.E3.81.BF.E8.BE.B
 >C.E3.81.BF.E3.81.AE.E6.A4.9C.E5.87.BA" name=".E3.83.9A.E3.83.BC.E
 >3.82.B8.E8.AA.AD.E3.81.BF.E8.BE.BC.E3.81.BF.E3.81.AE.E6.A4.9C.E5.
 >87.BA">
324      ページ読み込みの検出
325    </h3>
326    <p>
327      <a href="/ja/Code_snippets/On_page_load" title="ja/Code_sni
 >ppets/On_page_load">Code snippets:On page load</a> も参照してください。
328    </p>
329    <pre class="brush: js">
330function examplePageLoad(event) {
331  if (event.originalTarget instanceof HTMLDocument) {
332    var win = event.originalTarget.defaultView;
333    if (win.frameElement) {
334      // タブにフレームが読み込まれました。winはフレームセットのtop windowで
335      // なければなりません。もし、このウェブページに frame/iframe が
336      // 読み込まれたときに何もしないなら、次の行のコメントアウトを外してください
337      // return;
338      // ルートドキュメントを探索する
339      win = win.top;
340    }
341  }
342}
343 
344// ブラウザウィンドウが初期化されるまでコールバック関数を追加しようとしないで
345// ください。タブブラウザへのコールバックの追加はブラウザウィンドウが
346// 読み込まれたあとにする必要があります。
347window.addEventListener("load", function () {
348  // ドキュメントが読み込まれるたびに実行されるコールバック関数を追加する
349  // ドキュメント内部の frame/iframe にも適用されるので注意が必要
350  gBrowser.addEventListener("load", examplePageLoad, true);
351}, false);
352 
353...
354// もし、必要なくなれば
355gBrowser.removeEventListener("load", examplePageLoad, true);
356...
357</pre>
358    <p>
359      {{ 英語版章題("Notification when a tab is added or removed") }}
360    </p>
361    <h3 id=".E3.82.BF.E3.83.96.E3.81.8C.E8.BF.BD.E5.8A.A0.E3.82.8
 >2.E3.81.97.E3.81.8F.E3.81.AF.E5.89.8A.E9.99.A4.E3.81.95.E3.82.8C.
 >E3.81.9F.E3.81.A8.E3.81.8D.E3.81.AB.E9.80.9A.E7.9F.A5.E3.81.99.E3
 >.82.8B_.28Firefox_2.2B.29" name=".E3.82.BF.E3.83.96.E3.81.8C.E8.B
 >F.BD.E5.8A.A0.E3.82.82.E3.81.97.E3.81.8F.E3.81.AF.E5.89.8A.E9.99.
 >A4.E3.81.95.E3.82.8C.E3.81.9F.E3.81.A8.E3.81.8D.E3.81.AB.E9.80.9A
 >.E7.9F.A5.E3.81.99.E3.82.8B_.28Firefox_2.2B.29">
362      タブが追加もしくは削除されたときに通知する
363    </h3>
364    <pre class="brush: js">
365function exampleTabAdded(event) {
366  var browser = gBrowser.getBrowserForTab(event.target);
367  // browser は追加された browser をさす XUL 要素です
368}
369 
370function exampleTabMoved(event) {
371  var browser = gBrowser.getBrowserForTab(event.target);
372  // browser は移動した browser をさす XUL 要素です
373}
374 
375function exampleTabRemoved(event) {
376  var browser = gBrowser.getBrowserForTab(event.target);
377  // browser は削除された browser をさす XUL 要素です
378}
379 
380// 初期化中に
381var container = gBrowser.tabContainer;
382container.addEventListener("TabOpen", exampleTabAdded, false);
383container.addEventListener("TabMove", exampleTabMoved, false);
384container.addEventListener("TabClose", exampleTabRemoved, false);
385 
386// 必要なくなれば
387container.removeEventListener("TabOpen", exampleTabAdded, false);
388container.removeEventListener("TabMove", exampleTabMoved, false);
389container.removeEventListener("TabClose", exampleTabRemoved, fals
 >e);
390</pre>
391    <div class="geckoVersionNote">
392      <p>
393        {{ gecko_callout_heading("1.9.1") }}
394      </p>
395      <p>
396        Gecko 1.9.1 {{ geckoRelease("1.9.1") }} から、簡単に <a href="/
 >En/Listening_to_events_on_all_tabs" title="https://developer.mozi
 >lla.org/en/Listening_to_events_on_all_tabs">すべてのタブのイベントをlistenする<
 >/a> 方法が使えます。
397      </p>
398    </div>
399    <p>
400      {{ 英語版章題("Notification when a tab's attributes change") }}
401    </p>
402    <p>
403      {{ h2_gecko_minversion("タブの属性が変更されたときに通知する", "2.0") }}
404    </p>
405    <p>
406      Gecko 2.0 以降では、<code>TabAttrModified</code> をlistenすることでタブの
 >属性の変更を検知することができます。以下の属性が変更されると、このイベントが送られます。
407    </p>
408    <ul>
409      <li>{{ xulattr("label") }}
410      </li>
411      <li>{{ xulattr("crop") }}
412      </li>
413      <li>{{ xulattr("busy") }}
414      </li>
415      <li>{{ xulattr("image") }}
416      </li>
417      <li>{{ xulattr("selected") }}
418      </li>
419    </ul>
420    <pre class="deki-transform">
421function exampleTabAttrModified(event) {
422  var tab = event.target;
423  // ここで、タブに何の変更があったのかチェックする
424}
425 
426// 初期化時に
427var container = gBrowser.tabContainer;
428container.addEventListener("TabAttrModified", exampleTabAttrModif
 >ied, false);
429 
430// 必要なくなったとき
431container.removeEventListener("TabAttrModified", exampleTabAttrMo
 >dified, false);
432</pre>
433    <p>
434      {{ 英語版章題("Notification when a tab is pinned or unpinned") }
 >}
435    </p>
436    <p>
437      {{ h2_gecko_minversion("タブがアイコン化したとき、解除されたときに通知する", "2.0") 
 >}}
438    </p>
439    <p>
440      Gecko 2.0 以降では、タブはアイコン化(<span style="color:#008000;">pin</s
 >pan>)できます。すなわち、タブは特別なアプリケーションタブ (アイコンタブ) となって、タブバーの先頭に固定され、ファビコンだ
 >けを表示します。<code>TabPinned</code> と <code>TabUnpinned</code> イベントを監視
 >することで、タブがアイコン化したり解除されたりしたときに検知できます。
441    </p>
442    <pre class="brush: js">
443function exampleTabPinned(event) {
444  var browser = gBrowser.getBrowserForTab(event.target);
445  // browser はアイコン化したブラウザのXUL要素
446}
447 
448function exampleTabUnpinned(event) {
449  var browser = gBrowser.getBrowserForTab(event.target);
450  // browser はアイコン化したブラウザのXUL要素
451}
452 
453// 初期化
454var container = gBrowser.tabContainer;
455container.addEventListener("TabPinned", exampleTabPinned, false);
456container.addEventListener("TabUnpinned", exampleTabUnpinned, fal
 >se);
457 
458// 必要なくなったとき
459container.removeEventListener("TabPinned", exampleTabPinned, fals
 >e);
460container.removeEventListener("TabUnpinned", exampleTabUnpinned, 
 >false);
461</pre>
462    <p>
463      {{ 英語版章題("Detecting tab selection") }}
464    </p>
465    <h3 id=".E3.82.BF.E3.83.96.E3.81.8C.E9.81.B8.E6.8A.9E.E3.81.9
 >5.E3.82.8C.E3.81.9F.E3.81.93.E3.81.A8.E3.82.92.E6.A4.9C.E5.87.BA.
 >E3.81.99.E3.82.8B_.28Firefox_2.2B.29" name=".E3.82.BF.E3.83.96.E3
 >.81.8C.E9.81.B8.E6.8A.9E.E3.81.95.E3.82.8C.E3.81.9F.E3.81.93.E3.8
 >1.A8.E3.82.92.E6.A4.9C.E5.87.BA.E3.81.99.E3.82.8B_.28Firefox_2.2B
 >.29">
466      タブが選択されたことを検出する
467    </h3>
468    <p>
469      次のコードでブラウザの新たにタブが選択されたことを検出できます。
470    </p>
471    <pre class="brush: js">
472function exampleTabSelected(event) {
473  var browser = gBrowser.<span><span>selectedBrowser</span></span
 >>;
474  // browser はその時に選択された browser の XUL 要素
475}
476 
477// 初期化中に
478var container = gBrowser.tabContainer;
479container.addEventListener("TabSelect", exampleTabSelected, false
 >);
480 
481// 必要なくなれば
482container.removeEventListener("TabSelect", exampleTabSelected, fa
 >lse);
483</pre>
484    <p>
485      {{ 英語版章題("Getting document of currently selected tab") }}
486    </p>
487    <h3 id=".E7.8F.BE.E5.9C.A8.E9.81.B8.E6.8A.9E.E3.81.95.E3.82.8
 >C.E3.81.A6.E3.81.84.E3.82.8B.E3.82.BF.E3.83.96.E3.81.AE.E3.83.89.
 >E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.82.92.E5.8F.96.E5
 >.BE.97.E3.81.99.E3.82.8B" name=".E7.8F.BE.E5.9C.A8.E9.81.B8.E6.8A
 >.9E.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B.E3.82.BF.E3.83.9
 >6.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.
 >E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B">
488      現在選択されているタブのドキュメントを取得する
489    </h3>
490    <p>
491      次のコードで現在選択されているタブのドキュメントを取得できます。このコードはブラウザウィンドウのスコープで動作します 
 >(ブラウザウィンドウへのオーバーレイで動作させる時など) 。
492    </p>
493    <pre class="eval">
494gBrowser.contentDocument;
495</pre>
496    <p>
497      もしくは
498    </p>
499    <pre class="eval">
500content.document
501</pre>
502    <p>
503      ブラウザウィンドウから開かれたウィンドウやダイアログで動作させる場合は、このコードを使って、そのウィンドウを開いたブラ
 >ウザウィンドウの、選択されているタブで表示されているドキュメントを取得できます。
504    </p>
505    <pre class="eval">
506window.opener.content.document
507</pre>
508    <p>
509      ブラウザウィンドウから開かれたものでないウィンドウやダイアログからは、<a href="/ja/XPCOM_Inter
 >face_Reference/nsIWindowMediator" title="ja/nsIWindowMediator">ns
 >IWindowMediator</a> を使って、一番最近使われたブラウザウィンドウの、選択されているタブで表示されているドキュメ
 >ントを取得できます。
510    </p>
511    <pre class="brush: js">
512var wm = Components.classes["@mozilla.org/appshell/window-mediato
 >r;1"].
513         getService(Components.interfaces.nsIWindowMediator);
514var recentWindow = wm.getMostRecentWindow("navigator:browser");
515return recentWindow ? recentWindow.content.document.location : nu
 >ll;
516</pre>
517    <p>
518      <a href="/ja/Working_with_windows_in_chrome_code#Content_wi
 >ndows" title="ja/Working_with_windows_in_chrome_code#Content_wind
 >ows">chrome コードでウィンドウを操作する</a> も参照してください。
519    </p>
520    <p>
521      {{ 英語版章題("Enumerating tabs") }}
522    </p>
523    <h3 id=".E3.82.BF.E3.83.96.E3.81.AE.E5.88.97.E6.8C.99" name="
 >.E3.82.BF.E3.83.96.E3.81.AE.E5.88.97.E6.8C.99">
524      タブの列挙
525    </h3>
526    <p>
527      ブラウザで開いている全てのタブを取得するには、最初にブラウザウィンドウへの参照を取得します。もし、Firefox の 
 ><code>browser.xul</code> オーバーレイから実行されているコード (たとえば、ツールバーボタンやメニューでの
 > <em>click</em> ハンドラなど) なら、現在のウィンドウにすでに定義されている変数である <code>window<
 >/code> でアクセスできます。しかしながら、それ自身のウィンドウから実行されているコード (たとえば、設定やオプションダイアロ
 >グなど) なら、<code><a href="/ja/XPCOM_Interface_Reference/nsIWindowMed
 >iator" title="ja/nsIWindowMediator">nsIWindowMediator</a></code> 
 >をブラウザのウィンドウを取得するのに利用する必要があります。
528    </p>
529    <p>
530      次に、<code>&lt;tabbrowser/&gt;</code>要素を取得します。前の手順で取得したブラウザのウ
 >ィンドウを <code>win</code> とすると、<code>win.gBrowser</code> によって取得できます。
 >もし、<code>browser.xul</code> オーバーレイの中で動作しているなら、より簡単に <code>window.
 >gBrowser</code> でなく、<code>gBrowser</code> で取得可能です。
531    </p>
532    <p>
533      最後に、<code>gBrowser.browsers.length</code> により開いているタブの数を取得し、
 ><code>gBrowser.getBrowserAtIndex()</code> により <code>&lt;browser/&
 >gt;</code> 要素を取得します。たとえば、
534    </p>
535    <pre class="brush: js">
536var num = gBrowser.browsers.length;
537for (var i = 0; i &lt; num; i++) {
538  var b = gBrowser.getBrowserAtIndex(i);
539  try {
540    dump(b.currentURI.spec); // 開いている全てのタブの URL をコンソールへ出力
541  } catch(e) {
542    Components.utils.reportError(e);
543  }
544}
545</pre>
546    <p>
547      <code>&lt;browser/&gt;</code> や <code>&lt;tabbrowser/&gt;</
 >code> 要素でどんなメソッドが利用できるかについてより詳細は、<a href="/ja/DOM_Inspector" titl
 >e="ja/DOM_Inspector">DOM Inspector</a> を利用するか、<a class="external"
 > href="http://lxr.mozilla.org/seamonkey/source/toolkit/content/wi
 >dgets/browser.xml">browser.xml</a> や <a class="external" href="ht
 >tp://lxr.mozilla.org/seamonkey/source/toolkit/content/widgets/tab
 >browser.xml">tabbrowser.xml</a> の対応する XBL バインディングを参照してください。
548    </p>
549    <p>
550      {{ 英語版章題("Getting the browser that fires the http-on-modify
 >-request notification") }}
551    </p>
552    <h3 id="http-on-modify-request_通知が発火されたブラウザを取得する">
553      http-on-modify-request 通知が発火されたブラウザを取得する
554    </h3>
555    <p>
556      HTTP リクエストの中にはタブと関係ないものもあることに注意してください。例えば、RSS フィードの更新、拡張機能マ
 >ネージャのリクエスト、XPCOMからの XMLHttpRequest などです。それらの場合、次のコードはnullを返します。
557    </p>
558    <pre class="brush: js">
559observe: function (subject, topic, data) {
560  if (topic == "http-on-modify-request") {
561    subject.QueryInterface(Components.interfaces.nsIHttpChannel);
562    var url = subject.URI.spec; /* リクエストされたurl。きっと必要になるでしょう。 */
563    var browser = this.getBrowserFromChannel(subject);
564    if (browser != null) {
565      /* 何かの処理 */
566    }
567  }
568},
569 
570getBrowserFromChannel: function (aChannel) {
571  try {
572    var notificationCallbacks = 
573      aChannel.notificationCallbacks ? aChannel.notificationCallb
 >acks : aChannel.loadGroup.notificationCallbacks;
574 
575    if (!notificationCallbacks)
576      return null;
577 
578    var domWin = notificationCallbacks.getInterface(Components.in
 >terfaces.nsIDOMWindow);
579    return gBrowser.getBrowserForDocument(domWin.top.document);
580  }
581  catch (e) {
582    dump(e + "\n");
583    return null;
584  }
585}
586</pre>
587    <p>

前に戻る