在不带SDK的Firefox扩展中导入内容脚本

Question

I'm trying to develop a restartless firefox extension without the sdk, and I would like to be able to manipulate the DOM of the page, but either the document, content.document or unsafeWindow.document are returning undefined.

My bootstrap.js code:

Components.utils.import("resource://gre/modules/Services.jsm");
function startup(data,reason) {
    Components.utils.import("chrome://myextension/content/plugin-min.js");
}
function shutdown(data,reason) {
    Components.utils.unload("chrome://myextension/content/plugin-min.js");
}
function install(data,reason) { }
function uninstall(data,reason) { }

and my plugin-min.js code:

document.addEventListener('keydown',activate); // document undefined
content.document.addEventListener('keydown',activate); // content undefined
unsafeWindow.document.addEventListener('keydown',activate); // unsafeWindow undefined

And Mozilla published solution only for SDK users, and google searches I've done brought only these SDKs solutions. :/

But in my case, Does anyone know what I'm missing?

Thank you very much.

Answer 1

Main extension script has no direct access to document. You should inject to document own content-script, and exchange with it via async messaging (port object).

Also, you can provide an array of context script -in that case all of them will be imported:

var panel = panels.Panel({
        contentURL: self.data.url("page.html"),
        contentScriptFile: [self.data.url("script.js"), self.data.url('libs/jss.js')],
        contentStyleFile: self.data.url("style.css"),
        onHide: handleHide
    });

Not sure about loading order, but after documentready evrything accessible.

More reading in official documentation .