In Firefox dev tools, it seems the XUL iframes won't fire after the initial onload. For example, see the bottom of this file, where the extension makes the selected element in the inspector more easy to see. This is working when you open the inspector, but when you click to another page it reverts to the old inspector tree style. I even tried frame.contentWindow.addEventListener('load',styleit);, but it doesn't fire when a link is clicked on the web page, and page has loaded.
a) get a reference of the InspectorPanel object
b) listen for the ready event
var ip = window.ownerDocument.defaultView.inspector;`
ip.on("ready", styleit)
Related
I'm working on chrome extension and I want to have 2 pages one main popup and then on click on specific button I want to replace it with other one(some settings page) so far I managed to change it using
chrome.action.setPopup({ popup: "settings.html" })
but problem is in fact that it's not immediately propagated, I have to click on extension to close it and click again to open it to be able to see settings page, did I missed something or what is the preferred way in such case?
I'm working on trying to find a defect in an angular application in the javascript being used to scroll a page. Person clicks link, page scrolls. Simple.
Alas, I have no idea what functions are actually being called when a user clicks the link and given this app consists of dozens and dozens (and dozens) of separate files, I'm having trouble finding what's going on.
I've read about using breakpoints and setting them up via the SOURCES tab in devtools. However, regardless of which of the many JS files I open in there, I never get any breakpoint options to check.
Is there a way to see what JS is getting fired with a particular event on the page within Chrome's Devtools?
Go to Sources tab.
Unfold Event Listener Breakpoints
Unfold Control, check scroll checkbox.
Scroll the page.
Javascript runtime will stop on event listener bound to page scroll and place will be showed in main window under Sources tab. If it's library file (in You case Angular files), right click on the file and Blackbox script. Scroll page again ;)
You can see my attempts at selecting elements in the screenshot below. The first two do not work, but the third attempt, which is the same as the second, works. I can't figure out if this is...
1) An expected JavaScript behavior that I'm not aware of
2) A bug in Chrome DevTools
3) Something to do with this page's DOM because of the fact it's loading as an Iframe (though I'm entering these commands after the page has loaded)
Added code:
<select _optionid="6AFR69NF" _optionname="Reserving with a Pass?" class="option_p" onchange="boptions_onchange(this);cb_onContentHeightChanged();">
You should check execution context in console. When you open DevTools it's set to "top" by default, but when you call "inspect element" inside of iFrame it changes to your iFrame automatically. You can just select necessary context from this dropdown.
I am new to HTML/JS and I'm making a Safari extension for the first time. I want to enable my toolbar button only when the current page has a .gif open. How do I write my validate function for this?
Also, is the "validate" event fired every time the page reloads? Are there other triggers for it?
You can't be sure that the content of the current page is a GIF, but you can check whether the URL of the current tab ends with ".gif". In a global page script, use safari.application.activeBrowserWindow.activeTab.url to get the current URL.
In addition, you can use an injected script to inspect the DOM of the page. In Safari, if a document's body has a single node, and that node is an <img>, then the resource located at the tab's URL is probably an image. Use document.body.childNodes to check the body contents.
Validate events happen whenever Safari thinks you might want to update an extension element (like a toolbar button). This includes when a tab is opened, closed, focused, or blurred; when its URL is changed; and when its contents are reloaded. BTW, tab focus and blur happens also when Safari itself is focused or blurred, not just when you switch tabs.
Currently my Firefox add-on uses
require("sdk/tabs").on("ready", runScript);
to attach a script to the document (tab.attach()). But my target website opens a link as a new dialog window (minimal window with no tabs) and my add-on doesn't seem to run on it. How do I make it run on minimal window too?
Usually, you either attach a script to a page when the user presses a button (using tab.attach), which means that the page has already loaded and you don't need to wait for a ready event. Or you attach your script to specific pages based on the URL, in which case you should be using a pagemod which waits for the page to be ready by default.