I&#39;m trying to debug a web page that makes heavy use of  events, and so I need to monitor all  events that are fired.

Most of the events are bound using jQuery. Hence, it would be particularly useful if there was a way to specifically monitor only those events.


Using Firefox, how can I monitor all events that are fired?

I was wondering if there is such an addon in firefox where you can test out css paths to check if they are finding the correct element?  I was looking for something similar to xpather for xpath locations.

Is there an addon which you can test css selectors in firefox?

I&#39;m using [WebStorm][1] 7 for [Firefox Add-on SDK][2] development.

WebStorm shows a warning: &quot;Unresolved function or method&quot; for `require()`.

I want to get rid of the warning.

    var pageMod = require(&quot;sdk/page-mod&quot;);

NOTE:I already configured JavaScript-library (refer &lt;addonsdkroot&gt;/lib/sdk globals).

**Environment:**

 - WebStorm 7.0.2
 - Windows 7 64bit
 - Firefox Add-on SDK 1.15beta1


  [1]: https://www.jetbrains.com/webstorm/
  [2]: https://developer.mozilla.org/en-US/Add-ons/SDK

How can I fix WebStorm warning &quot;Unresolved function or method&quot; for &quot;require&quot; (Firefox Add-on SDK)

**EDIT**
After looking at JSHint I found this &#39;**destructuring expression&#39; is available in ES6 (use esnext option) or Mozilla JS extensions (use moz)** and [this][1]  however after reading it I still don&#39;t understand why it is used 


I have come across the following code on [MDN][2]


    
    var ui = require(&quot;sdk/ui&quot;);
    var { ActionButton } = require(&quot;sdk/ui/button/action&quot;);
What do the braces on the second line do and why are they used? Why are there no braces on the first line?


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7
  [2]: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui &quot;MDN&quot;

What do {curly braces} around javascript variable name mean

So now that HTML5 introduces [`history.pushState`][1] to change the browsers history, websites start using this in combination with Ajax instead of changing the fragment identifier of the URL.

Sadly that means that those calls cannot be detect anymore by `onhashchange`.

**My question is:** Is there a reliable way (hack? ;)) to detect when a website uses `history.pushState`? The specification does not state anything about events that are raised (at least I couldn&#39;t find anything).  
I tried to create a facade and replaced `window.history` with my own JavaScript object, but it didn&#39;t have any effect at all.

**Further explanation:** I&#39;m developing a Firefox add-on that needs to detect these changes and act accordingly.  
I know there was a similar question a few days ago that asked whether listening to some [DOM events][2] would be efficient but I would rather not rely on that because these events can be generated for a lot of different reasons.


**Update:**

[Here is a jsfiddle][3] (use Firefox 4 or Chrome 8) that shows that `onpopstate` is not triggered when `pushState` is called (or am I doing something wrong? Feel free to improve it!).

**Update 2:**

Another (side) problem is that `window.location` is not updated when using `pushState` (but I read about this already here on SO I think).


  [1]: http://www.w3.org/TR/html5/history.html#the-history-interface
  [2]: https://developer.mozilla.org/en-US/docs/Web/Events
  [3]: http://jsfiddle.net/fkling/vV9vd/

How to get notified about changes of the history via history.pushState?

What are some resources for getting started writing a Firefox Addon?  Is there an API guide somewhere?  Is there a getting started tutorial somewhere?  Is there a developer discussion board somewhere?

How do I write a Firefox Addon?

I&#39;m trying to parse a bit.ly JSON response in javascript.

I get the JSON via XmlHttpRequest.

    var req = new XMLHttpRequest;  
    req.overrideMimeType(&quot;application/json&quot;);  
    req.open(&#39;GET&#39;, BITLY_CREATE_API + encodeURIComponent(url)
              + BITLY_API_LOGIN, true);  
    var target = this;  
    req.onload  = function() {target.parseJSON(req, url)};  
    req.send(null);

    parseJSON: function(req, url) {  
    if (req.status == 200) {  
        var jsonResponse = req.responseJSON;  
        var bitlyUrl = jsonResponse.results[url].shortUrl;  
    }

I do this in a firefox addon. When I run I get the error &quot;jsonResponse is undefined&quot; for the line `var bitlyUrl = jsonResponse.results[url].shortUrl;`. Am I doing anything wrong in parsing JSON here? Or what is wrong with this code?

Parsing JSON from XmlHttpRequest.responseJSON

I&#39;ve installed Firefox RESTclient add-on but , I&#39;m having hard time figuring out how to pass POST parameters. Is there a specific format to do this? Or is there any other tool which can be used to debug an REST API on Mac OS X ? 

Firefox Add-on RESTclient - How to input POST parameters?

I am developing a new Firefox addon that intercept all Firefox&#39;s network traffic (http(s) requests with `http-on-modify-request`)

With my current code, I am able to separate requests coming from web-pages/tabs and all the other components (RSS feed updates, XHR requests from XPCOM components, extensions, extensions manager, etc.)

I would like to identify who initiate a request other than the tab&#39;s traffic with precision not just the whole group? (RSS, XPCOM components, extensions, extensions manager, etc)

**Example:** a hypothetical custom variable `requestRequestor` would have a value to identify a specific addon or RSS update etc.

I found this similar [question](https://stackoverflow.com/questions/20855939/identify-requests-coming-from-pageworker) but without a solution.

**Current code to identify the whole group ([getting the browser that fires the http-on-modify-request notification][1]) is:** 


    Components.utils.import(&#39;resource://gre/modules/Services.jsm&#39;);
    Services.obs.addObserver(httpObs, &#39;http-on-modify-request&#39;, false);
    //Services.obs.removeObserver(httpObs, &#39;http-on-modify-request&#39;); //uncomment this line, or run this line when you want to remove the observer
    
    var httpObs = {
        observe: function (aSubject, aTopic, aData) {
            if (aTopic == &#39;http-on-modify-request&#39;) {
                /*start - do not edit here*/
                var oHttp = aSubject.QueryInterface(Components.interfaces.nsIHttpChannel); //i used nsIHttpChannel but i guess you can use nsIChannel, im not sure why though
                var interfaceRequestor = oHttp.notificationCallbacks.QueryInterface(Components.interfaces.nsIInterfaceRequestor);
                //var DOMWindow = interfaceRequestor.getInterface(Components.interfaces.nsIDOMWindow); //not to be done anymore because: https://developer.mozilla.org/en-US/docs/Updating_extensions_for_Firefox_3.5#Getting_a_load_context_from_a_request //instead do the loadContext stuff below
                var loadContext;
                try {
                    loadContext = interfaceRequestor.getInterface(Components.interfaces.nsILoadContext);
                } catch (ex) {
                    try {
                        loadContext = aSubject.loadGroup.notificationCallbacks.getInterface(Components.interfaces.nsILoadContext);
                        //in ff26 aSubject.loadGroup.notificationCallbacks was null for me, i couldnt find a situation where it wasnt null, but whenever this was null, and i knew a loadContext is supposed to be there, i found that &quot;interfaceRequestor.getInterface(Components.interfaces.nsILoadContext);&quot; worked fine, so im thinking in ff26 it doesnt use aSubject.loadGroup.notificationCallbacks anymore, but im not sure
                    } catch (ex2) {
                        loadContext = null;
                        //this is a problem i dont know why it would get here
                    }
                }
                /*end do not edit here*/
                /*start - do all your edits below here*/
                var url = oHttp.URI.spec; //can get url without needing loadContext
                if (loadContext) {
                    var contentWindow = loadContext.associatedWindow; //this is the HTML window of the page that just loaded
                    //aDOMWindow this is the firefox window holding the tab
                    var aDOMWindow = contentWindow.top.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebNavigation).QueryInterface(Ci.nsIDocShellTreeItem).rootTreeItem.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindow);
                    var gBrowser = aDOMWindow.gBrowser; //this is the gBrowser object of the firefox window this tab is in
                    var aTab = gBrowser._getTabForContentWindow(contentWindow.top); //this is the clickable tab xul element, the one found in the tab strip of the firefox window, aTab.linkedBrowser is same as browser var above //can stylize tab like aTab.style.backgroundColor = &#39;blue&#39;; //can stylize the tab like aTab.style.fontColor = &#39;red&#39;;
                    var browser = aTab.linkedBrowser; //this is the browser within the tab //this is what the example in the previous section gives
                    //end getting other useful stuff
                } else {
                    Components.utils.reportError(&#39;EXCEPTION: Load Context Not Found!!&#39;);
                    //this is likely no big deal as the channel proably has no associated window, ie: the channel was loading some resource. but if its an ajax call you may end up here
                }
            }
        }
    };


  [1]: https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser#Getting_the_browser_that_fires_the_http-on-modify-request_notification



How to identify who initiated the http request in Firefox?

Is there a recommended add-ons in the firefox, which is has the most features that postman have?  

Postman addon&#39;s like in firefox

Reference: [FileReader.readAsDataURL](https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL)

Considering the following example:

    function previewFile(file) {
      
      var reader  = new FileReader();
    
      reader.onloadend = function () {
        console.log(reader.result);
      }
      reader.readAsDataURL(file);
    }

It states:
&gt; instanceOfFileReader.readAsDataURL(blob);
&gt; 
&gt; blob: The Blob or File from which to read.

 1. How can a local file URL like: `&#39;file:///C:/path-to/root.png&#39;` be
    passed to the `readAsDataURL()`   
 
 2. Is `FileReader()` available in a Firefox Addon?


Convert URL to File or Blob for FileReader.readAsDataURL

Is there an addon that allows you to view, edit, `localStorage` information?
If there is and it works as an extension of Firebug I will be extremely happy.

Something like Google Chrome&#39;s local storage

similar to [Firecookie][1] but for the `localStorage`

![Firecookie][3]
![Firecookie][4]

Is there something like it?


  [1]: https://addons.mozilla.org/en-US/firefox/addon/6683/
  [3]: https://addons.mozilla.org/img/uploads/previews/full/18/18997.png?modified=1204922922
  [4]: https://addons.mozilla.org/img/uploads/previews/full/19/19004.png?modified=1204923534

Firefox addon to view/edit/create localStorage data?

Recently I&#39;ve realised that, some adblocker extensions (such as adBlocker plus) block some Ajax calls. I get that error on the console:

    GET http://localhost/prj/conn.php?q=users/list/ net::ERR_BLOCKED_BY_CLIENT 

Why does it block some Ajax call but not the others and what causes that? Is there any workaround other than telling user to turn off adblocker?

Getting &quot;net::ERR_BLOCKED_BY_CLIENT&quot; error on some AJAX calls

I want to have textboxes related to radiobuttons. Therefore each radio button should enable it&#39;s textbox and disable the others. However when I set the disabled attribute of textbox to true, it changes the editable attribute too. I tried setting editable attribute true again but it did not work.

This was what I tried:

JS function:

    function enable(id)
    {
    	var eleman = document.getElementById(id);
        eleman.setAttribute(&quot;disabled&quot;, false);
        eleman.setAttribute(&quot;editable&quot;, true);
    }

XUL elements:

    &lt;radio id=&quot;pno&quot; label=&quot;123&quot; onclick=&quot;enable(&#39;ad&#39;)&quot; /&gt;
    &lt;textbox id=&quot;ad&quot; editable=&quot;true&quot;  disabled=&quot;true&quot; flex=&quot;1&quot; emptytext=&quot;asd&quot; onkeypress=&quot;asd(event)&quot; tooltiptext=&quot;&quot; &gt;










.setAttribute(&quot;disabled&quot;, false); changes editable attribute to false

I&#39;m curious if anyone knows how I would trigger a function to run if/once the user finishes selecting text on the web page? I would like the user to be able to select text, and after a short delay(or immediately, at this point it doesn&#39;t matter much) an overlay button appears near the text that the user can then click and I go back and run more of my code that is based on the selection. This is for a Firefox extension.

A similar example that I can think of would be like in IE where you can select text and then it brings up the &quot;web accelerators&quot;. I&#39;m 99% sure I know how I would actually overlay the button, and get the position of the selected text, but I have no idea how to check to see if there is anything selected, without doing some sort of infinite loop, which just seems like a terrible idea.


EDIT:

    //In my overlay.js with the rest of my sidebar code
    isTextSelected: function () {	
    		var myText = cqsearch.getSelectedText();
    		var sidebar = document.getElementById(&quot;sidebar&quot;);
    		var sidebarDoc = sidebar.contentDocument || document;
    		
    		var curHighlightedDiv = sidebarDoc.getElementById(&quot;testDiv&quot;);
    		curHighlightedDiv.innerHTML = &quot;Current text selection:&quot; + myText;
    	}
    };
    
    //In my on firefox load function I added this
    document.onmouseup = cqsearch.isTextSelected;
    
So this is what I have come up with using Robert&#39;s suggestion, and it took me some time getting everything in the right spot, but it works great! Now on to position my button. 




On Text Highlight Event?

I&#39;m planning to develop a simple Firefox extension that will shorten URL of a currently active tab, display a popup with the shortened URL, and place it into the clipboard.

In Google Chrome, this would be pretty easy (according to http://developer.chrome.com/extensions/getstarted.html) -- pure JavaScript plus a few calls to JavaScript API-s of interacting with the browser&#39;s UI.

However, after searching around for a good Firefox extensions tutorial, the most officially-looking links I found are:

 * https://developer.mozilla.org/en-US/docs/Extensions
 * https://developer.mozilla.org/en-US/docs/Building_an_Extension
 * https://stackoverflow.com/questions/24772/how-do-i-write-a-firefox-addon

According to them, it looks like I will have to learn the XUL language for even the simplest interactions with the browser&#39;s UI. On top of that, I will have to set up custom Firefox profile so as not to hose my default profile during development, create complicated directory structure, write manifest in obscure XML, figure out how to package and test whatever I implement, etc.

It&#39;s 2013, isn&#39;t there an easier way of building Firefox extensions? 

What is the easiest way to develop Firefox extension?

I can detect when the content of an iframe has loaded using the *load* event. Unfortunately, for my purposes, there are two problems with this:

* If there is an error loading the page (404/500, etc), the load event is never fired.
* If some images or other dependencies failed to load, the load event is fired as usual.

Is there some way I can reliably determine if either of the above errors occurred?

I&#39;m writing a semi-web semi-desktop application based on Mozilla/XULRunner, so solutions that only work in Mozilla are welcome.

Detect failure to load contents of an iframe

I have been reading about how to build plug-ins and this &quot;MIME type&quot; keeps getting discussed in it. I have tried to look into it and know that it is Multipurpose Internet Mail Extensions (MIME) but no suitable explanation of how it relates to browser plug-ins, as in what I need to know about it for building plug-ins, is provided, please explain in clear and simple words. What is it? Why do plug-ins have a MIME type?

What is a MIME type?

I am trying to debug a JavaScript script that gets read in a Firefox extension and executed. I only can see errors via the Firebug console (my code is invisible to Firebug), and it&#39;s reporting a &quot;unterminated string literal.&quot; 

I checked the line and the lines around it and everything seems fine-parentheses, braces, and quotes are balanced, etc. What are other possible causes that I should be looking for?


Common sources of unterminated string literal

I&#39;ve recently set-up a local WebSocket server which works fine, however I&#39;m having a few troubles understanding how I should handle a sudden loss of connection which neither the client or server intentionally initiated, i.e: Server loses power, ethernet cables pulled out etc... I need the client&#39;s to know whether connection has been lost within ~10seconds.

Client side, connection is simply:

    var websocket_conn = new WebSocket(&#39;ws://192.168.0.5:3000&#39;);

	websocket_conn.onopen = function(e) {
		console.log(&#39;Connected!&#39;);
	};

	websocket_conn.onclose = function(e) {
		console.log(&#39;Disconnected!&#39;);
	};

I can manually trigger the connection disconnect which works fine,

    websocket_conn.close();

But if I simply pulled the ethernet cable out the back of the computer, or disabled the connection, `onclose` doesn&#39;t get called. I&#39;ve read in another post that it would eventually get called when [TCP detects loss of connectivity][1], but it&#39;s not in the timely manner that I need as the default for Firefox I believe is 10 minutes, and I don&#39;t really want to go around hundreds of computers `about:config` changing this value. The only other suggestion I&#39;ve read is to use a &#39;ping/pong&#39; keep-alive polling style method which seems counterintuitive to the idea of websockets.

Is there an easier way to detect this kind of disconnect behaviour? Are the old posts i&#39;m reading still up to date from a technical point, and the best method is still &#39;ping/pong&#39; style?

  [1]: https://stackoverflow.com/questions/11809267/how-do-i-know-if-connection-is-alive-with-websockets

Handling connection loss with websockets

I want to use jQuery inside a firefox extension,
I imported the library in the xul file like this:

    &lt;script type=&quot;application/x-javascript&quot; src=&quot;chrome://myExtension/content/jquery.js&quot;&gt; &lt;/script&gt;

but the $() function is not recognized in the xul file neither do the jQuery().

I googled about the problem and found some solutions but no one did work with me:
http://gluei.com/blog/view/using-jquery-inside-your-firefox-extension
http://forums.mozillazine.org/viewtopic.php?f=19&amp;t=989465

I&#39;ve also tried to pass the &#39;content.document&#39; object(which refrences the &#39;document&#39; object) as the context parameter to the jQuery function like this:

    $(&#39;img&#39;,content.document);

but still not working,
does any one came across this problem before?

All Firefox Addon Solutions on Gang of Coders

Total of 21 Firefox Addon Solutions