I have modified some code inside my Firefox. Just add on some extra functions for my isolation network. Besides that I also want to create my own FF extension for this particular purpose. I just need some information:
Can the code inside my Firefox, call any function Javascript declared in my extension?
Generally yes, but your question is not specific enough. Both Firefox and an extension can have JS and C code, code in XPCOM components, code running in a specific window, JS modules, etc.
Assuming the "Firefox code" is running in some window (e.g. you edit browser.js) and the "extension function" you want to call also exists in that window (e.g. you overlay chrome://browser/content/browser.xul, which is the URI of the main Firefox window, in which the browser.js code runs), you can just call it as you would normally do.
Related
With VS 2012, Web Essentials, TypeScript 0.8.3
There is a TypeScript file "test.ts". It is compiled into "test.js", having a sourceMappingURL at its end.
//# sourceMappingURL=test.js.map
The Javascript file is loaded dynamically with $.getScript. However, when in Chrome Developer Tools I cannot find the source anywhere, so a breakpoint cannot be set.
If I manually edit the generated Javascript by appending a sourceURL, the situation improves.
//# sourceMappingURL=test.js.map
//# sourceURL=test.ts
The name "test.ts" is offered in Chrome in the Sources tree. However, clicking on it opens the Javascript file "test.js". There breakpoints can be set and used.
Actually it does not matter, whether the correct name "test.ts" or any other name is coded.
What should be done, so debugging a TypeScript file, whose generated Javascript file was dynamically loaded, is possible with Chrome?
I also tried Canary. It made no difference.
I am writing to affirm what WhyMe wrote. Appending tag to using jQuery.append() does not add filename to sources tree, but using DOM element to .appendChild DOES add filename to sources tree.
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", 'Scripts/app/Views/Management/Spock.js');
document.getElementsByTagName("head")[0].appendChild(fileref)
Spock.js will be in the correct folder in Sources tree.
Using //# source=Path_to_file works, but
A. must have the pathing correct, and
B. filename appears under <No Domain>; which is really ugly.
PS - I do not have 50 reputation points, so I cannot reply as a comment next to WhyMe's comment, but I can add an Answer?
Working in Chrome Canary (25.0.1364.172 m), and using require.js to load scripts dynamically, I can set and use breakpoints on the typescript files:
NB that this only works on code which matches some JS output - so (logically enough) you cannot set a breakpoint anywhere inside an interface definition.
I'm not sure if using require.js for your on-demand script loading is an option. If so, it should fix your problem.
$.getScript would probably load the file using xmlhttp and adding the javascript later to the DOM thus the browser cannot map the javascript to the js breakpoint
Requirejs adds a script tag with a src attribute so the browser can still hit the breakpoints
I am looking for a way to get javascript code before SpiderMoney (Firefox JS engine) or V8 (Chrome JS engine) evaluate the it.
I don't mean capturing the traffic and get it before the application does, but "hijacking" the javascript before it reaches the JS engine itself.
Does anyone know how to do it, or at least point me to the correct direction?
I compiled my own build of SpiderMonkey. Once I've done that I called my own function before the compile() function of the engine.
The function is not exported so it cannot be hooked (replaced during runtime), only patched.
Have a pluggin that is installed as part of an app, the pluggin needs to use different overlays depending on what version of FF is being used as it modifies the interface.
I found https://developer.mozilla.org/en/Bundles to specify different files but this only seems to cover which OS/bitness.
Is there a way to specify that an overlay only applies to particular versions of the UI?
ie. This works for FF3.6 and earlier but breaks FF4
<overlay id="myOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<dialog id="commonDialog" onload="commonDialogOnLoad(); myLoad();"
ondialogaccept="myAccept(); return commonDialogOnAccept();">
This is aimed at the Domain Login and the FTP Login dialogs, so an idea on making it more specific could help too.
I haven't done this myself, but I think you can accomplish this effect using flags in your chrome.manifest file. See https://developer.mozilla.org/en/Chrome_Registration#Manifest_flags
Technically, the answer by MatrixFrog is correct, you can use flags in your chrome.manifest file. However, you better consider the fact that your code breaks Firefox 4 a warning - this approach should not be used, it is likely to break browser functionality. Also, what if a second extension tries to do the same thing? You should extend built-in functionality, not overwrite it. Your goal is apparently to run your own code when the common dialog loads. Please consider the following approach:
<overlay id="myOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="text/javascript"><![CDATA[
window.addEventListener("load", function()
{
// Your code here
}, false);
]]></script>
</overlay>
This solves two problems. For one, you no longer need to override the existing handler for the "load" event - addEventListener allows registering as many event handlers as you want, unlike onload attribute/property. The other problem: you were adding a function myLoad() to the global namespace of the common dialog. If Firefox code or some other extension decides to use the same function name in future there will be trouble. The code above completely avoids this problem by using an anonymous function - there can be no naming conflicts.
I'm writing an extension for Firefox, and I need to log some data to Firebug's console. Within the scope of my addon, "console" is undefined, and "window.content.console" is also undefined. So how do I log to the console?
Since you're not writing Javascript that executes within a window, console is not defined.
So you need to reference the Firebug extension first:
Firebug.Console.log(str);
To log to the console from inside a firefox extension’s javascript:
Application.console.log("Hello from my Firefox Extension!");
As far as I know you can only do that if you are creating a JetPack Add-on. Normal debugging is done with Venkman from Mozilla at http://www.mozilla.org/projects/venkman/
Firebug console is associated with a particular page, so it wouldn't be very convenient even if you managed to log messages there. Did you try Chromebug? I didn't use it, but I would expect to find a similar console for extensions to use there.
You could also use the regular Error Console, although you won't get all the niceties Firebug's console provides. You could install Console^2 https://addons.mozilla.org/en-US/firefox/addon/1815 to make using the Error Console a little less painful.
If in your extension you have access to the content Window object, you can unwrap it, and call the console methods directly:
window.wrappedJSObject.console.log('something important');
There are contexts in which even the Firebug object is unknown, like if you're trying to call it from a sidebar... in which case you have to go all the way back to the original window to get the firebug object:
var Firebug = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow).Firebug;
You can then from within your sidebar call Firebug like so:
Firebug.Console.log("foo");
This is documented here: https://developer.mozilla.org/en/Code_snippets/Sidebar
I understand that jQuery is the preferred Javascript framework for Firefox extensions, but I'm comfortable with Prototype and need to implement a simple Firefox extension.
Unfortunately, I'm having trouble invoking a Prototype method. Each method call is resulting in a no-op: there are no errors or other signs the method call occurred.
Here's the overlay code:
<overlay id="liteextension-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
This call to a Prototype method returns an empty array, even though there are divs in the page:
var all_divs = $$('div');
The "prototype.js" file lives in the same dir as the XUL file.
Using libraries like prototype and jquery inside a Firefox extension is a complicated thing. The problem is that the JQuery is not loaded in the same context when loaded from XUL than when loaded from a webpage. So if you are trying to manipulate stuff in a page, a library loaded in XUL will not see the page DOM where it expects it to be. With JQuery (not sure about prototype) you can solve this by pointing to the right context.
Second, importing libraries inside an extension in a browser.xul overlay will put all functions and variables defined in the library in the global namespace, potentially conflicting with other extensions and even the Firefox code. This could cause a big mess.
There is more information in this forum post, it is about JQuery, but the same problems apply... maybe the suggested solutions could be useful for you:
http://forums.mozillazine.org/viewtopic.php?f=19&t=1460255