Can someone tell me where can I find the ids of browser elements in Firefox?
I want to put a menupopup in the web developer section in Firefox and I need an id to put into the insertafter attribute.
You can see all the IDs in the source code of browser.xul as well as its include files like browser-sets.inc. Alternatively, you can inspect the browser window at runtime using the DOM Inspector extension.
The web developer menupopup can be found in:
http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser-appmenu.inc#144
<menupopup id="appmenu_webDeveloper_popup">
<menuitem id="appmenu_devToolbox">
...
Alternatively, If you have DOM Inspector, open it and go to menu:
File->Inspect Chrome Document->chrome://browser/content/browser.xul
(browser.xul should usually be the first item (1) with the same title as the browser's taskbar or current tab).
Then search for ID=appmenu_webDeveloper_popup. Many of the other menus can be found at ID=mainPopupSet.
Also, this scratchpad snippet lists the IDs of child elements contained in the web developer menupopup (set scratchpad environment to browser, execute as display to output the result ):
var webdev=document.getElementById("appmenu_webDeveloper_popup");
var idList=Array.prototype.slice.call(webdev.children).map(function(node){
return node.id;
}).filter(function(id)id);
idList.join("\n");
Related
Firebug for Firefox had Breakpoints on DOM (HTML) Mutation Events. Firebug was merged into Firefox developer console. I don't find the feature in the Firefox developer console, can someone help me with that?
Found this:
"You set a DOM Mutation Breakpoint in the Page Inspector. Navigate to the DOM node in which you are interested and use the context menu to set the breakpoint."
"
Attribute Modification
Execution pauses when any of the elements' attributes are modified.
"
from
https://developer.mozilla.org/en-US/docs/Tools/Debugger/Break_on_DOM_mutation
Using DOM Inspector in Firefox, it is easy to find the URI of the resource being inspected, even if that resource is part of Firefox's UI or is an IFRAME.
Using the built-in Firefox developer tools, how can this same task be accomplished?
even if that resource is part of Firefox's UI or is an IFRAME.
If you want to inspect chrome elements you will need the browser toolbox
it is easy to find the URI of the resource being inspected
type document.documentURI in the console. For individual elements, simply look at them in the inspector, iframes will display as <iframe src=...> for example. Or select them and then interrogate their DOM representation in the console as $0, e.g. $0.src for iframes. inspect($0) or context menu -> inspect DOM properties will give you the whole set of dom properties for a node.
is it possible to open a xul page (chrome://myext/content/page.xul) with a blank address page?
I want to have a xul page in a new tab to collect some information to my extension, but i wanted to hide the chrome address.
in chrome, some extension pages are shown without an address, like follows:
Evernote Clearly:
Contextinator:
Is it possible on firefox to open the chrome://myext/content/page.xul without showing this address on the address bar?
In firefox, this is usually done by hiding browser chrome.
If you're using addon-sdk, this can be accomplished by including the addon-page like so:
require("sdk/addon-page");
When not using addon-sdk (ie, XUL based extension), then you might need to look into hideChromeForLocation() and inContentWhitelist members of XULBrowser. Hiding browser chrome is explained here and the source code for the members can be found in browser.js: hideChromeForLocation, inContentWhitelist.
Note: XULBrowserWindow itself is a property of window.
var {XULBrowserWindow}=window;
An example of a location with hidden chrome is the Addon Manager (about:addons), which hides the navigation bar when viewing that particular location.
Developing an extension in Firefox and seems my mistakes are stemming from the fact that I don't understand the differences between what the below mean.
Would be great if someone could point, when exactly to use them.
Can someone who has worked with Firefox explain it please. I've added what I understand and they might very well be completely incorrect -
window
document = XUL elements + ( Web page of the current open tab)
document.content
content.document = The content of the web page of the tab open. Does not include the xul elements.
top.window.content
I'll collect the the correct explanation for the answers and put them in the question as an edit.
In an extension, document is the XUL document for the browser's UI. window is the window for that document (the object used as the script global for the chrome JS, etc). content.document is the document object for the web page in the currently selected tab. content is the window object for the web page in the currently selected tab.
If using Firebug, we can click on the HTML tab, and click to expand each element to see the generated HTML code. Is there a way to expand it all or get a plain text file?
I just accidentally found out that there doesn't even need to be Firebug. We can just press CTRL-A (to select all) on the webpage, and then right click and choose "View Selection Source", then we will get a plain text file of the "current HTML code", even will see a <div> that is the Firebug panel that is before the <body> tag if Firebug is open. But it seems like a weird way to invoke this. Is there any other way?
(Update: generated HTML usually refers to the HTML after JavaScript changes the DOM. It is the current DOM tree instead of the original source code)
In Firebug's HTML tab, right-click the root node and select "copy HTML". Then paste to a text editor.
Without Firefox Add-Ons, you could use a bookmarklet like this:
javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&').replace(/</g, '<') + '</pre></html>'); win.document.close(); void 0;
With the Web Developer toolbar add-on, select View Source - View Generated Source. And if you want to view the original source, select View Source - View Source (or simply press CTRL-SHIFT-U)
Using the Firefox DevTools (integrated in FF since version 35) you can view the generated HTML opening the web inspector (CTRL-shift-C) and selecting the HTML tab.
You can copy the generated HTML by right clicking on <html> and selecting Copy inner HTML.
If you're looking for a programmatic solution, you can just feed the document into an XMLSerializer.
I don't know if I understood your question well, but here is something really simple and you won't need another addon.
Every browser has a native function to view the source-code of the actual page, just right-click and look for something that resembles "source" or "code".
In Firefox for example it's just "Souce-code", in Chrome it is "View Page Source" and so on.
That being said, Web Developer toolbar is indeed a great addon, especially if you do CSS too.