Question

The resize event doesn’t work on content scripts in the Add-on SDK (1.8)
this script: https://builder.addons.mozilla.org/package/142401/latest/

main.js:

var Widget = require("widget").Widget;
var tabs = require('tabs');
var self = require('self');
var data = self.data;
var PageMod = require('page-mod').PageMod;

exports.main = function() {

    PageMod({
        include: [data.url("thepage.html")],
        contentScriptWhen: 'start',
        contentScriptFile: [data.url('thescript.js')],
        onAttach: function(worker) {
                console.log("attaching...")
        },
    });

    new Widget({
        id: "my-widget-1",
        label: "Widget",
        contentURL: "http://www.mozilla.org/favicon.ico",
        onClick: function(event) {
            tabs.open(data.url("thepage.html"));
        }
    });
};

thescript.js

console.log('started')
window.onresize = function(){console.log('resized!!!');}; //not working, never calls

How can I make an resize event triggers inside the content script ?

Answer 1

It is generally not recommendable to use window.onfoo to attach event listeners. There can be an issue if some other code tries to attach an event listener the same way (one event listener will win and you don’t know which one), and it won’t work if you access window through a wrapper rather than directly. So it is always better to use addEventListener method instead:

window.addEventListener("resize", function() {
  console.log('resized!!!');
}, false);

In your case this actually fixes the problem – the event listener fires when the window is resized.