Question

I’m developing an add-on for the first time. It puts a little widget in the status bar that displays the number of unread Google Reader items. To accommodate this, the add-on process queries the Google Reader API every minute and passes the response to the widget. When I run cfx test I get this error:

Error: The page has been destroyed and can no longer be used.

I made sure to catch the widget’s detach event and stop the refresh timer in response, but I’m still seeing the error. What am I doing wrong? Here’s the relevant code:

// main.js - Main entry point
const tabs = require('tabs');
const widgets = require('widget');
const data = require('self').data;
const timers = require("timers");
const Request = require("request").Request;

function refreshUnreadCount() {
    // Put in Google Reader API request
    Request({
        url: "https://www.google.com/reader/api/0/unread-count?output=json",
        onComplete: function(response) {
            // Ignore response if we encountered a 404 (e.g. user isn't logged in)
            // or a different HTTP error.
            // TODO: Can I make this work when third-party cookies are disabled?
            if (response.status == 200) {
                monitorWidget.postMessage(response.json);
            } else {
                monitorWidget.postMessage(null);
            }
        }
    }).get();
}

var monitorWidget = widgets.Widget({
    // Mandatory widget ID string
    id: "greader-monitor",

    // A required string description of the widget used for
    // accessibility, title bars, and error reporting.
    label: "GReader Monitor",
    contentURL: data.url("widget.html"),
    contentScriptFile: [data.url("jquery-1.7.2.min.js"), data.url("widget.js")],

    onClick: function() {
        // Open Google Reader when the widget is clicked.
        tabs.open("https://www.google.com/reader/view/");
    },

    onAttach: function(worker) {
        // If the widget's inner width changes, reflect that in the GUI
        worker.port.on("widthReported", function(newWidth) {
            worker.width = newWidth;
        });

        var refreshTimer = timers.setInterval(refreshUnreadCount, 60000);

        // If the monitor widget is destroyed, make sure the timer gets cancelled.
        worker.on("detach", function() {
            timers.clearInterval(refreshTimer);
        });

        refreshUnreadCount();
    }
});

---

// widget.js - Status bar widget script

// Every so often, we'll receive the updated item feed. It's our job
// to parse it.
self.on("message", function(json) {
    if (json == null) {
        $("span#counter").attr("class", "");
        $("span#counter").text("N/A");
    } else {
        var newTotal = 0;
        for (var item in json.unreadcounts) {
            newTotal += json.unreadcounts[item].count;
        }

        // Since the cumulative reading list count is a separate part of the
        // unread count info, we have to divide the total by 2.
        newTotal /= 2;
        $("span#counter").text(newTotal);

        // Update style
        if (newTotal > 0)
            $("span#counter").attr("class", "newitems");
        else
            $("span#counter").attr("class", "");
    }

    // Reports the current width of the widget
    self.port.emit("widthReported", $("div#widget").width());
});

Edit: I’ve uploaded the project in its entirety to this GitHub repository.

Answer 1

I think if you use the method monitorWidget.port.emit("widthReported", response.json); you can fire the event. It the second way to communicate with the content script and the add-on script.

• Reference for the port communication
• Reference for the communication with postMessage