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.
Related
I developed a firefox bootstrapped extension (without add-on sdk). I need to display a popup with html content, something like panel in add-on sdk. Also, it is necessary that the extension could interact with content in the popup. Also, I need a way to display html content in separate tab and interact with this content. So what can I use to implement what I need?
You can append an iframe to that panel, and then load a page into that iframe. That's what I did in this simple addon here - https://github.com/Noitidart/AwesomeBar-Power-Tip/
Here's another gist that does something similar - https://gist.github.com/Noitidart/9445992
I think this is how the SDK does it as well.
but I can not understand how it is possible to implement the interaction between expansion and content inside the panel.
The panel or its frameLoader property should have a messageManager, which can be used to load frame scripts and pass messages to them.
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");
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.
I'm building a scraper in ruby using nokogiri and I noticed that sometimes the dom created by parsing the source and the dom when the browser parses the source are different.
For example, the browser adds in tbody tags, the browser can modify tags if the document is not well formed or if javascript makes runtime changes.
The problem is that I am getting the desired element path from the browser dom (using an element inspector at this stage) but when I search for that element in the dom from parsing the source nothing is found because of these differences.
Is it possible to get the same dom as the browser and if so, how?
you can USE a browser and get the dom from the rendered source. there are several drivers like selenium, webkit-headless, poltergeist etc that can drive headless or real browsers.
all browsers will probably render different versions, cause there is no official standard implementation, so you will need to find the one that is the best fit for you.
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.