I am trying using code
// This is an active module of the goelvivek (8) Add-on
exports.main = function() {
var httpRequestObserver =
{
observe: function(subject, topic, data)
{
if (topic == "http-on-examine-response") {
if(console)
console.log(data);
}
}
};
var {Cc, Ci, Cr} = require("chrome");
var observer = require("observer-service");
observerService = Components.classes["#mozilla.org/observer-service;1"].
getService(Components.interfaces.nsIObserverService);
observerService.addObserver(httpRequestObserver, "http-on-examine-response", false);
};
but line console.log(data); is not printing any thing in console log. why ?
In addition to the issue noted by Nickolay, an observer needs to implement a QueryInterface() function (typically by means of XPCOMUtils.generateQI()). Here is how one would do it with the Add-on SDK:
var {Cc, Ci, Cr, Cu} = require("chrome");
var {XPCOMUtils} = Cu.import("resource://gre/modules/XPCOMUtils.jsm");
var httpRequestObserver =
{
QueryInterface: XPCOMUtils.generateQI([Ci.nsIObserver, Ci.nsISupportsWeakReference]),
...
};
However, since you already require observer-service package, it would be easier to use it:
var observer = require("observer-service");
observer.add("http-on-examine-response", onHttpRequest);
function onHttpRequest(subject, data)
{
...
}
The downside of this approach is that observer-service is an internal package and its API might change in future Add-on SDK versions.
Is it the real snippet? You should see an error about Components being undefined in the Error Console. Either get it from require('chrome') or use the object from require("observer-service").
Related
I need to create an about: page, to display addon options. I have seen ti done before, but there seems to be no option in the SDK that allows you to do that.
Is there another way I could let users type about:pagename and get to my page?
I would prefer not to redirect all tabs with a URL of about:pagename to another options page.
Thanks in advance
This is the index.js file for a restartless add-on developed using jpm:
const { Cc, Ci, Cr, Cu, Cm, components } = require("chrome");
Cm.QueryInterface(Ci.nsIComponentRegistrar);
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
Cu.import("resource://gre/modules/Services.jsm");
// globals
var factory;
const aboutPage_description = 'This is my custom about page';
const aboutPage_id = '6c098a80-9e13-11e5-a837-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen
const aboutPage_word = 'foobar';
const aboutPage_page = Services.io.newChannel('data:text/html,hi this is the page that is shown when navigate to about:foobar', null, null);
function AboutCustom() {};
AboutCustom.prototype = Object.freeze({
classDescription: aboutPage_description,
contractID: '#mozilla.org/network/protocol/about;1?what=' + aboutPage_word,
classID: components.ID('{' + aboutPage_id + '}'),
QueryInterface: XPCOMUtils.generateQI([Ci.nsIAboutModule]),
getURIFlags: function(aURI) {
return Ci.nsIAboutModule.ALLOW_SCRIPT;
},
newChannel: function(aURI) {
let channel = aboutPage_page;
channel.originalURI = aURI;
return channel;
}
});
function Factory(component) {
this.createInstance = function(outer, iid) {
if (outer) {
throw Cr.NS_ERROR_NO_AGGREGATION;
}
return new component();
};
this.register = function() {
Cm.registerFactory(component.prototype.classID, component.prototype.classDescription, component.prototype.contractID, this);
};
this.unregister = function() {
Cm.unregisterFactory(component.prototype.classID, this);
}
Object.freeze(this);
this.register();
}
exports.main = function() {
factory = new Factory(AboutCustom);
};
exports.onUnload = function(reason) {
factory.unregister();
};
Basically it registers a custom about page that will be loaded when you access about:foobar. The loaded page is just a line of text.
This is how it looks like:
You can see a working example here: https://github.com/matagus/about-foobar-addon
I think this is a better solution if you are using the addons-sdk:
Credit goes here:
https://stackoverflow.com/a/9196046/1038866
var pageMod = require("page-mod");
pageMod.PageMod({
include: data.url("options.html"),
...
});
var tabs = require("tabs");
tabs.open(data.url("options.html"));
But there are other ways. You could take a look at the Scroll to Top addon which implements this: https://addons.mozilla.org/firefox/addon/402816
I'm dealing with a huge javascript codebase that I'm trying to reorganize. I'm not really an expert and I just started studying good javascript coding practices. So, one thing I'm trying to do is to divide all the code in modules. In this particular case I'm trying to create a module that would help me to optimize video embeds. I would like to pass the module an id and receive some html code or an image out of it.
I'm not putting the whole code here, but it's enough for the example:
var videoIframe = (function($) {
'use strict';
var id,
setVideoId = function(videoId) {
id = videoId;
console.log(id);
},
getVideoThumbnail = function(videoId) {
setVideoId(videoId);
},
test = function() {
console.log(id)
},
getVideoEmbedCode = function() {
};
return {
test: test,
getVideoThumbnail: getVideoThumbnail
};
})(jQuery);
In another module I assign it to two variables:
var video1 = videoIframe;
var video2 = videoIframe;
video1.getVideoThumbnail(123);
video2.getVideoThumbnail(456);
video1.test();
video2.test();
And, of course, I'm not getting what I expected. After the second getVideoThumbnail call, it always prints 456.
Doing some research I understood that I'm creating a singleton, a single instance, and I'm only changing values inside that instance. I think I need a constructor for my module, but I'm not sure how to create it in combination with the IIFE pattern. And is it the right approach?
And is it the right approach?
No. IIFEs are for things you want to do exactly once.
If you want to do something multiple times, then use a regular function and call it multiple times.
var videoIframe = (function($) {
function videoIframe() {
'use strict';
var id,
setVideoId = function(videoId) {
id = videoId;
console.log(id);
},
getVideoThumbnail = function(videoId) {
setVideoId(videoId);
},
test = function() {
console.log(id)
},
getVideoEmbedCode = function() {
};
return {
test: test,
getVideoThumbnail: getVideoThumbnail
};
}
return videoIframe;
})(jQuery);
var video1 = videoIframe();
var video2 = videoIframe();
video1.getVideoThumbnail(123);
video2.getVideoThumbnail(456);
video1.test();
video2.test();
The problem is that you are initializing object when assigning to videoIframe variable:
var videoIframe = (function($) {
// ...
})(jQuery);
You can try with:
var videoIframe = (function($) {
// ...
});
var video1 = videoIframe(jQuery);
var video2 = videoIframe(jQuery);
Just keep videoIframe as a function that returns your IIFE, instead of reusing the singleton. I kept the IIFE so the id and the inner functions keep being encapsulated and hence, not reachable if they're not in the returned interface object. If you are planning to create alot of these, it might be more efficient to just use a constructor and a prototype, so the inner functions don't get recreated for every instance.
var videoIframe = function() {
'use strict';
return (function() {
var id,
setVideoId = function(videoId) {
id = videoId;
console.log(id);
},
getVideoThumbnail = function(videoId) {
setVideoId(videoId);
},
test = function() {
console.log(id)
},
getVideoEmbedCode = function() {
};
return {
test: test,
getVideoThumbnail: getVideoThumbnail
};
}());
};
I did some minor modification. Hope it will be helpful
var videoIframe = (function($) {
'use strict';
var id;
function _setVideoId(videoId) {
id = videoId;
alert(id);
};
function _getVideoThumbnail(videoId) {
_setVideoId(videoId);
};
function _test(){
console.log(id)
}
function _getVideoEmbedCode() {
};
return {
test: _test,
getVideoThumbnail: _getVideoThumbnail
};
})(jQuery);
Now you can call like this
videoIframe.getVideoThumbnail(123);
videoIframe.getVideoThumbnail(561);
jsfiddle
I am unable to use imagemagick in meteorjs. I am working on a small svg->png converter which contains a rest api to provide the converted images. I implemented the rest api with meteor-router. The imagemagick convertion works. But, I am not able to write the result of the convertion into the http response. I tried to fix this by getting rid of the asynchronisity by using fiber. But this still doesn't work. Basically, all request.write calls are ignored after the yield execution. Here is my code:
Meteor.Router.add({
'/image/:hash' : function(hash) {
var svg = Images.findOne({'hash' : hash}).svg;
var request = this.request;
var response = this.response;
Fiber(function() {
var fiber = Fiber.current;
response.writeHead(200, {'Content-Type':'image/png'});
var convert = imagemagick.convert(['svg:-', 'png:-']);
convert.on('data', function(data) {
response.write("doesn't work");
//response.write(data);
});
convert.on('end', function() {
response.write("doesn't work");
//response.end();
fiber.run({});
});
convert.stdin.write(svg);
convert.stdin.end();
response.write("works");
Fiber.yield();
response.write("doesn't work");
}).run();
}
});
I am pretty new to meteorjs. Therefore, I might use Fiber completely wrong. Or I should not use fiber at all. Can someone help?
Thanks to the author from meteor-router, I was able to fix the problem. I was using fiber the wrong way. As described at https://github.com/laverdet/node-fibers#futures, it's not recommended to use fiber without an abstraction between your code and the raw API.
Fortunately, fiber provides one abstraction called future which can be used for my use case! Here is the working code:
var require = __meteor_bootstrap__.require,
Future = require('fibers/future');
Meteor.startup(function() {
Meteor.Router.add('/image/:hash', function(hash) {
var response = this.response;
var fut = new Future();
response.writeHead(200, {'Content-Type':'text/plain'});
setTimeout(function(){
response.write("hello hello");
fut.ret();
}, 1);
fut.wait();
});
});
I did some more investigation. The issue is orthogonal to imagemagick. E.g.: the following code snippets do not work too in meteor-router:
Example 1:
Meteor.startup(function() {
Meteor.Router.add({
'/image/:hash' : function(hash)
var request = this.request;
var response = this.response;
response.write("outside");
setTimeout(function(){
response.write("inside");
response.end();
}, 1);
}
});
Example 2:
Meteor.startup(function() {
Meteor.Router.add({
'/image/:hash' : function(hash)
var request = this.request;
var response = this.response;
response.write("outside");
Fiber(function() {
var fiber = Fiber.current;
setTimeout(function(){
response.write("inside");
response.end();
}, 1);
Fiber.yield();
}).run();
}
});
I think it's general issue of meteor-router. Because both examples do work with pure nodejs.
I have a FF extension that I want notified when the lightweight theme list is changed. Here's the code:
var PesonaSwitcherObserver = {
register: function() {
PersonaSwitcher.log ("in register");
var observerService =
Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.addObserver(PesonaSwitcherObserver,
"lightweight-theme-list-change", false);
},
observe: function (subject, topic, data) {
PersonaSwitcher.log ("in observe");
switch (topic) {
case 'lightweight-theme-list-change':
PersonaSwitcher.subMenu();
break;
}
},
unregister: function() {
PersonaSwitcher.log ("in unregister");
var observerService =
Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.removeObserver(PesonaSwitcherObserver,
"lightweight-theme-list-change");
}
}
window.addEventListener("load", PesonaSwitcherObserver.register, false);
window.addEventListener("unload", PesonaSwitcherObserver.unregister, false);
The log receives the "in register", but no "in observes" when I add or remove personas. I've even looked at LightweightThemeManager.jsm and
function _updateUsedThemes(aList) {
calls
Services.obs.notifyObservers(null, "lightweight-theme-list-changed", null);
Anyone know why or have a hint?
I guess that the call to observerService.addObserver() fails - please check the Error Console (press Ctrl-Shift-J to open it). Your observer doesn't implement QueryInterface function and the observer service will explicitly check whether nsIObserver is implemented. This function is easiest to implement using XPCOMUtils.jsm. If you don't want to import it into the global scope (you probably don't since your code seems to run from an overlay) you can do it like this:
var PesonaSwitcherObserver = {
QueryInterface: Components.utils.import("resource://gre/modules/XPCOMUtils.jsm", null)
.XPCOMUtils
.generateQI([Components.interfaces.nsIObserver]),
...
What I'm doing right now is:
When <browser src="..." /> loads, I attach data into its .contentWindow:
frame.addEventListener("load",function(){
this.contentWindow.someMethod = function(){};
},true);
Now I want to know if there is a way to do this earlier, into the <browser>'s window prototype, or any Window prototype, as for example I can do in the "current" window:
// [W]indow is the constructor
Window.prototype.test = function(){ alert("hello"); };
// [w]indow is the instance
window.test();
There are currently two ways to inject properties into a window before any JavaScript code runs. Usually, content-document-global-created notification is simpler. The other is implementing nsIDOMGlobalPropertyInitializer interface. Both allow you to get notified when a new window loads and before that window runs JavaScript code.
Here is the approximate code for doing it with the observer notification:
const Cc = Components.classes;
const Ci = Components.interfaces;
const Cu = Components.utils;
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
var myObserver =
{
QueryInterface: XPCOMUtils.generateQI([Ci.nsIObserver, Ci.nsISupportsWeakReference]),
observe: function(subject, topic, data)
{
if (topic == "content-document-global-created" &&
subject instanceof Ci.nsIDOMWindow &&
subject.location.hostname == "example.com")
{
XPCNativeWrapper.unwrap(subject).someMethod = function() {};
}
}
};
var observerService = Cc["#mozilla.org/observer-service;1"]
.getService(Ci.nsIObserverService);
observerService.addObserver(myObserver, "content-document-global-created", true);