Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 972891 of Listen for Page Load

  • Revision slug: Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load
  • Revision title: Listen for Page Load
  • Revision id: 972891
  • Created:
  • Creator: groovecoder
  • Is current revision? No
  • Comment Add note about finding addon console output in Browser Console; not Web Console
Tags: 

Revision Content

To follow this tutorial you'll need to have learned the basics of jpm.

You can get notifications about new pages loading using the tabs module. The following add-on listens to the tab's built-in ready event and just logs the URL of each tab as the user loads it:

require("sdk/tabs").on("ready", logURL);
 
function logURL(tab) {
  console.log(tab.url);
}

You will find this console output in the Browser Console, not the Web Console.

You don't get direct access to any content hosted in the tab.

To access tab content you need to attach a script to the tab using tab.attach(). This add-on attaches a script to all open tabs. The script adds a red border to the tab's document:

require("sdk/tabs").on("ready", runScript);
 
function runScript(tab) {
  tab.attach({
    contentScript: "if (document.body) document.body.style.border = '5px solid red';"
  });
}

(This example is only to show the idea: to implement something like this, you should instead use page-mod, and specify "*" as the match-pattern.)

Learning More

To learn more about working with tabs in the SDK, see the tabs API reference. You can listen for a number of other tab events, including open, close, and activate.

To learn more about running scripts in tabs, see the tutorial on using tab.attach().

Revision Source

<div class="note"><span>To follow this tutorial you'll need to have learned the <a href="/en-US/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29">basics of <code>jpm</code></a>.</span></div>

<p>You can get notifications about new pages loading using the <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a> module. The following add-on listens to the tab's built-in <code>ready</code> event and just logs the URL of each tab as the user loads it:</p>

<pre class="brush: js">
require("sdk/tabs").on("ready", logURL);
 
function logURL(tab) {
  console.log(tab.url);
}
</pre>

<div class="note">
<p>You will find this console output in the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>, not the <a href="/en-US/docs/Tools/Web_Console">Web Console</a>.</p>
</div>

<p>You don't get direct access to any content hosted in the tab.</p>

<p>To access tab content you need to attach a script to the tab using <code>tab.attach()</code>. This add-on attaches a script to all open tabs. The script adds a red border to the tab's document:</p>

<pre class="brush: js">
require("sdk/tabs").on("ready", runScript);
 
function runScript(tab) {
  tab.attach({
    contentScript: "if (document.body) document.body.style.border = '5px solid red';"
  });
}
</pre>

<p>(This example is only to show the idea: to implement something like this, you should instead use <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>, and specify "*" as the match-pattern.)</p>

<h2 id="Learning_More">Learning More</h2>

<p>To learn more about working with tabs in the SDK, see the <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> API reference</a>. You can listen for a number of other tab events, including <code>open</code>, <code>close</code>, and <code>activate</code>.</p>

<p>To learn more about running scripts in tabs, see the <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">tutorial on using <code>tab.attach()</code></a>.</p>
Revert to this revision