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
Related
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.
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.
I am building Firefox extension, that creates single XMPP chat connection, that can be accessed from all tabs and windows, so I figured, that only way to to this, is to create connection in javascript module and include it on every browser window. Correct me if I am wrong...
EDIT: I am building traditional extension with xul overlays, not using sdk, and talking about those modules: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules
So I copied Strophe.js into js module. Strophe.js uses code like this:
/*_Private_ function that creates a dummy XML DOM document to serve as
* an element and text node generator.
*/
[---]
if (document.implementation.createDocument === undefined) {
doc = this._getIEXmlDom();
doc.appendChild(doc.createElement('strophe'));
} else {
doc = document.implementation
.createDocument('jabber:client', 'strophe', null);
}
and later uses doc.createElement() to create xml(or html?) nodes.
All worked fine, but in module I got error "Error: ReferenceError: document is not defined".
How to get around this?
(Larger piece of exact code: http://pastebin.com/R64gYiKC )
Use the hiddenDOMwindow
Cu.import("resource://gre/modules/Services.jsm");
var doc = Services.appShell.hiddenDOMWindow.document;
It sounds like you might not be correctly attaching your content script to the worker page. Make sure that you're using something like tabs.attach() to attach one or more content scripts to the worker page (see documentation here).
Otherwise you may need to wait for the DOM to load, waiting for the entire page to load
window.onload = function ()
{
Javascript code goes here
}
Should take at least diagnose that issue (even if the above isn't the best method to use in production). But if I had to wager, I'd say that you're not attaching the content script.
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;
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.