How do I view & debug contentScriptFile sources in Firefox debugger? - firefox-addon

I'm making an add-on with a simple content script using tab.attach and contentScriptFile:
index.js:
tab.attach({
contentScriptFile: "./doiuse-script.js"
});
data/doiuse-script.js:
if (document.body) document.body.style.border = '5px solid red';
console.log("document.styleSheets: " + document.styleSheets);
I have devtools.chrome.enabled = true and devtools.debugger.remote-enabled = true so I can use the Add-on Debugger.
But, when I open the Add-on Debugger, I don't see my doiuse-script.js source?

I answered my own question while asking it.
As mentioned in the Add-on Debugger docs about content scripts, the Add-on Debugger does not show content script sources unless/until they are loaded. So, the Add-on Debugger won't show the content script source until you reload the page on which the content script activates.

Related

Firefox add-on works with "jpm run", but not whith .xpi file generated with "jpm xpi"

I'm using the Firefox Add-on SDK to develop a Firefox add-on.
I have followed the Getting Started tutorial.
Firefox version : 41.0.2
My Process is :
jpm run --> OK the add-on works fine
jpm xpi --> OK : Create #myAddon.xpi (JPM [info] Successfully created .xpi at ...)
Use of #myAddon.xpi --> NOK
When I tried to install the add-on in my Firefox ( Add-on -> install from file -> #myAddon.xpi ), I have a message "Install successfully". Looks good. BUT, the add-on doesn't work. Nothing happens.
So, why is the test with jpm run OK, but does not work after installing the .xpi file???
I can share the code with you, but how can this situation happen? If it works in test, I expect that it works in "release".
I get no error or warning.
High Level :
Index.js:
pageMod.PageMod({
include: "*",
contentScriptFile: [data.url("jquery-1.11.3.min.js"), data.url("./Compute.js")],
onAttach: function (worker) {
var currentUrl = tabs.activeTab.url;
param = currentUrl;
Request({
url: param,
onComplete: function (response) {
var parsed = JSON.parse(response.text);
worker.port.emit('got-request', parsed);
}
}).get();
}
data/Compute.js
self.port.on('got-request', function (data) {
console.log(data);
});
Edit (moved from comments):
I find something interesting.... Depending on the level of privacy in FireFox the addon will work or not. ( Options->Privacy->History "Remember history " or "Never remember history") - Remember history " --> addOn OK - "Never remember history" --> addOn NOK Any idea why
As you have determined, if you desire your Firefox Add-on SDK add-on to work in Private Browsing mode you need to have add the key private-browsing with a value of true in your package.json file.
If you are using no other permissions, you could add a line to your package.json file that looks like:
"permissions": {"private-browsing": true}
The Firefox documentation on writing SDK add-ons for private browsing mode specifically states that the require("sdk/private-browsing").isPrivate() method will return true when any of the following is the case (emphasis mine):
a private window, or
a tab belonging to a private window, or
a worker that's associated with a document hosted in a private window
any window, tab, or worker if the browser has been configured to never remember history (Options->Privacy->History)
If you do not have "private-browsing": true, then, as the documentation states, the following will be the case (emphasis mine):
the windows module will not list any private browser windows, generate any events for private browser windows, or let the add-on open any private browser windows
the tabs module will not list any tabs that belong to private browser windows, and the add-on won't receive any events for such tabs
any ui components will not be displayed in private browser windows
any menus or menu items created using the context-menu will not be shown in context menus that belong to private browser windows
the page-mod module will not attach content scripts to documents belonging to private browser windows
any panel objects will not be shown if the active window is a private browser window
the selection module will not include any selections made in private browser windows
The net effect will be that your add-on will appear to not work when the profile you are using is configured to never remember history without having the "private-browsing": true permission in your package.json.
If you do put that permission in your package.json file, you must use the private-browsing module, require("sdk/private-browsing").isPrivate(object), to check for being in a private window or tab. If you are in such a window or tab you need to not store any information about such environment.

Firefox sdk styles-file works only partially

I am making firefox addon and I cann't manages styles to show correctly. For example, links color are always what page defines:
main.js:
pageMod.PageMod({
contentStyleFile: self.data.url("style.css"),
contentScriptFile: [self.data.url("jquery.js"), self.data.url("script.js")]
style.css:
#div_id {background:green}
#div_id a.black {color:black}
script.js:
$('body').append("<div id='div_id'><a class='black' href='#'>link</a></div>");
The result is: background:green is working, but #div_id a.black {color:black} is not working.
Page define a color and addon css-file can't change it. The only way to do it is $('#div_id a.black').css({'color':'black'})
What is wrong with addons css files? Why they are working only partially?
I will use this:
var styles = "#div_id {background:green}\
#div_id a.black {color:black}";
$("head").append("<style>"+styles+"</style>");
It is ugly, but it works.

Firefox SDK: how to automatically place the addon version inside a html page at compilation time

I am making an add-on using the Firefox SDK 1.14.
Every time I make a new version of the addon, I have to change the "version" value of the packaje.json file.
In a HTML page inside my addon, called index.html which I use with addon-page module, I'd like to show the addon version. The only way I know to show it, is to manually edit the file before I run cfx xpi. And because I have a horrible memory, I always forget to change it...
Is there any automated way to, just before compile the .xpi file, update the file version in my index.html page?
By the way, I'm using Ubuntu.
The addon version is accessible via the self module.
var {name, id, version} = require("sdk/self");
Then you can set the contentScriptOptions property when attaching a content script to your html file.
var self=require("sdk/self");
var tabs=require("sdk/tabs");
tabs.open({
url: self.data.url("index.html"),
onReady: function(tab){
var pageWorker=tab.attach({
contentScriptFile: self.data.url("contentscript.js"),
contentScriptOptions: {addonID: self.id}
});
}
});
From within the content script, access the contents of contentScriptOptions (above) like so:
var id = self.options.addonID;

Firefox add-on without UI

I want to develop firefox add-on(extension) which shouldn't have UI . I want execute some tasks whenever the webpage loads,, is it possible to achieve this ?
If anyone has useful links plz reply to this post
NIn Firefox add-on sdk tool, you can use page-mod to achieve this:
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.org", // the url matcher of the page you want to modify
contentScriptWhen: 'end', // when to load the tasks
contentScript: '' // the javascript tasks you want to perform on page
});
It does not need to create an UI.
You can find out more about it at the documentation page for firefox add-on sdk (https://addons.mozilla.org/en-US/developers/docs/sdk/latest/).
First result: https://www.google.com.au/search?q=firefox+extension+on+page+load
First two results: https://developer.mozilla.org/en-US/search?q=firefox+extension+on+page+load

Prototypes of the standard classes in a Firefox Addon

Some context: I'm making an add-on for firefox. In firefox add-ons, js scripts can be attached to a webpage at certain events (content scripts). In those scripts I'd like to use the prototype of XMLHttpRequest.
Is it possible to access the prototypes of the available classes in javascript? For example: XMLHttpRequest.toString() returns [object XMLHttpRequest], while XMLHttpRequest.prototype is null. Am I doing anything wrong, or isn't it possible to use prototypes in those scripts?
Yes, you must be doing something wrong. I tried with a minimal SDK-based extension, the main.js file being:
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.google.com",
contentScriptWhen: "end",
contentScript: 'throw "XMLHttpRequest.prototype = " + XMLHttpRequest.prototype'
});
When I load google.com I see the following message in the Error Console:
XMLHttpRequest.prototype = [object XMLHttpRequestPrototype]
So XMLHttpRequest.prototype is definitely not null.

Resources