Using workers in extensions

  • Revision slug: Using_workers_in_extensions
  • Revision title: Using workers in extensions
  • Revision id: 101575
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 335 words added, 3 words removed

Revision Content

This article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface.

If you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series:

 Download the sample

You may download the complete example:

 How this differs from previous versions

This version of the stock ticker extension moves the XMLHttpRequest call that fetches updated stock information into a worker thread, which then passes that information back to the main body of the extension's code to update the display in the status bar.  This demonstrates not only how to use workers in an extension, but also how to perform XMLHttpRequest in a worker, and how workers and main thread code can pass data back and forth.

The worker

The worker thread's job in this example is to issue the XMLHttpRequest calls that fetch the updated stock information.  That's all it does.  Every 10 minutes, it calls XMLHttpRequest, and, when the results are received, sends an event back to the main thread with the received data.

So we need to move the refreshInformation() method from the stockwatcher2.js file into a separate file that will host the worker thread.  That file, ticker_worker.js, is shown here:

var symbol = "";

function refreshInformation() {
  if (!symbol) {
    throw "No symbol set!";
  }

  var fullUrl =
    "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol;

  function infoReceived()
  {
    var output = httpRequest.responseText;
    if (output) {
      postMessage(output.trim());
    }
    httpRequest = null;
  }

  var httpRequest = new XMLHttpRequest();
  httpRequest.open("GET", fullUrl, true);
  httpRequest.onload = infoReceived;
  httpRequest.send(null);
}

setInterval(function() {
  refreshInformation();
}, 10*60*1000);

onmessage = function(event) {
  if (event.data) {
    symbol = event.data.toUpperCase();
  }
  refreshInformation();
}

Revision Source

<p>This article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface.</p>
<p>If you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series:</p>
<ul> <li><a href="/en/Creating_a_status_bar_extension" title="en/Creating_a_status_bar_extension">Creating a status bar extension</a></li> <li><a href="/en/Creating_a_dynamic_status_bar_extension" title="en/Creating_a_dynamic_status_bar_extension">Creating a dynamic status bar extension</a></li> <li><a href="/en/Adding_preferences_to_an_extension" title="en/Adding_preferences_to_an_extension">Adding preferences to an extension</a></li> <li><a href="/en/Localizing_an_extension" title="en/Localizing_an_extension">Localizing an extension</a></li> <li><a class="internal" href="/en/Updating_an_extension_to_support_multiple_Mozilla_applications" title="En/Updating an extension to support multiple Mozilla applications">Updating an extension to support multiple Mozilla applications</a></li>
</ul>
<h2> Download the sample</h2>
<p>You may download the complete example:</p>
<ul> <li>  <a class="internal" href="/@api/deki/files/3145/=stockwatcher2%2540example.com.zip" title="/@api/deki/files/3145/=stockwatcher2@example.com.zip">Download the example.</a></li>
</ul>
<h2> How this differs from previous versions</h2>
<p>This version of the stock ticker extension moves the <a class="internal" href="/En/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> call that fetches updated stock information into a worker thread, which then passes that information back to the main body of the extension's code to update the display in the status bar.  This demonstrates not only how to use workers in an extension, but also how to perform <code>XMLHttpRequest</code> in a worker, and how workers and main thread code can pass data back and forth.</p>
<h2>The worker</h2>
<p>The worker thread's job in this example is to issue the <code>XMLHttpRequest</code> calls that fetch the updated stock information.  That's all it does.  Every 10 minutes, it calls <code>XMLHttpRequest</code>, and, when the results are received, sends an event back to the main thread with the received data.</p>
<p>So we need to move the <code>refreshInformation()</code> method from the <code>stockwatcher2.js</code> file into a separate file that will host the worker thread.  That file, <code>ticker_worker.js</code>, is shown here:</p>
<pre class="brush: js">var symbol = "";

function refreshInformation() {
  if (!symbol) {
    throw "No symbol set!";
  }

  var fullUrl =
    "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&amp;e=.csv&amp;s=" + symbol;

  function infoReceived()
  {
    var output = httpRequest.responseText;
    if (output) {
      postMessage(output.trim());
    }
    httpRequest = null;
  }

  var httpRequest = new XMLHttpRequest();
  httpRequest.open("GET", fullUrl, true);
  httpRequest.onload = infoReceived;
  httpRequest.send(null);
}

setInterval(function() {
  refreshInformation();
}, 10*60*1000);

onmessage = function(event) {
  if (event.data) {
    symbol = event.data.toUpperCase();
  }
  refreshInformation();
}

</pre>
Revert to this revision