In my code I have a line that dumps the current window (which happens to be a youtube video page):
Firebug.Console.log(myWindow);
It can be seen that window object contains "yt" property, which is another object that can be easily inspected in debugger:
http://i.imgur.com/lHHns.png
Unfortunately, calling
Firebug.Console.log(myWindow.yt);
logs "undefined" - why is that, and how can I access this "yt" property?
Edit: one addidtion that might be important: the code I'm writing is part of a firefox extension, so it's not really running inside a pgae, but in chrome - I'm starting to think that it may be the cause. Can chrome scripts be somehow limited in what they can see/acces as opposed to code in script tags?
For security reasons, Firefox extensions don't access web page objects directly but via a wrapper. This wrapper allows you to use all properties defined by the DOM objects but anything added by page JavaScript will be invisible. You can access the original object:
Firebug.Console.log(XPCNativeWrapper.wrappedJSObject.yt);
However, if you want to interact with the web page from an extension you should consider alternatives where the web page cannot play tricks on you (e.g. running unprivileged code in the content window: myWindow.location.href = "javascript:...").
Firefox and Chrome extensions can't access JavaScript within the page for security reasons.
I have seen confusion like this using asynchronous APIs.
console.log(obj); shows the contents of an object all filled in, but when accessing the object properties in code, they aren't really populated yet due to the call being asynchronous.
Why Chrome and Firefox shows them all filled in is probably just a timing issue as they probably process the console.log() asynchronously as well.
Related
I've got a weird issue with one of my clients , In the client website some code that runs before my code overrides the "window.console" so i can't use it. i tried to create an invisible iframe and use its contentWindow but somehow its also hooked.
So 2 question:
Can i create a new window from its constructor?
Can i extend the "Window.prototype.constructor" so when i will create a new iframe i can protect the properties i want.
No. If the client website runs code before you that overrides window.console, you cannot circumvent that (it appears that the same thing happens when you create an iframe as well), and you cannot recover the console functionality.
Depending on your needs, there may be other ways to achieve what you need. Before window.console was implemented in browsers, developers made their own consoles in HTML and JS, logging messages to an HTML element instead.
I'm trying to understand how a webpage works. When you click a button, they call a function from javascript, with some arguments, just like this <a href="javascript:ShowListing('24343434', 22, '2', '434331')" class="btn">. The function (in an external .js) looks like this:
function ShowListing(id1,id2,id3,id4) {
somecode here
Dialog.Show( id1, assets[id2][id3][id4] );
}
My question is, what's assets? I looked for the declaration of the variable in all the scripts and I couldn't find it. Maybe it's defined in a .php?
Is there any way of knowing the value it has given some specific [ids]?
Thanks!
My question is, what's assets?
A variable containing an object of some sort. We can't tell any more than that from the code you've supplied.
I looked for the declaration of the variable in all the scripts and I couldn't find it. Maybe it's defined in a .php?
It has to be defined by client side JavaScript (unless it is a browser built-in which I don't recognise, but seems highly unlikely given the context it is used in). That JS could be in a .php file.
Is there any way of knowing the value it has given some specific [ids]?
Just about every modern browser has a Developer Tools feature.
Developer Tools come with a JavaScript debugger that lets you set breakpoints.
Set a breakpoint to that line and then you can examine the variables in it using the debugger.
Search terms such as how to use the chrome developer tools debugger will help you learn to use those tools for your browser.
First hit F12 if you're on firefox (i think the same goes for chrome) the console panel should be visible, then add the console.log() and refresh the page to see what is asset use
console.log(assets);
the same goes for the other ids and the value of each array in assets
I want to read a value of DOM element. I am new to browser extensions. I came across codes which provided help in executing a code in browser context but how do I fetch a value and use in extension's context?
var value = document.getElementById('id1'); // Here document should be of browser context.
Try
var value = document.getElementById('id1').value;
// note the extra .value.
You have to access the DOM from content scripts.
If you are looking to get the currently active tab, you would do this: https://developer.chrome.com/extensions/activeTab
How this will work will depend on whether you are in browser context, content scripts or background though.
I highly recommend reading the chrome extension guides: https://developer.chrome.com/extensions/getstarted. They help quite a bit, and the different scopes of the chrome extension are crucial to understand to successfully develop on it.
I am creating a Firefox extension, and one feature of it that I would like is the ability for the user to inject a script or stylesheet into a specific website, rather like Greasemonkey (except that this will only be for one site). I am adding some functions for the scripts to make use of, which I intended to add from the Content Script into the main (unsafe) window. On the MDN blog, it says that they have made changes to how it should be implemented, so I have based my code on the new implementation as advised in the post, so this is what I have:
var $jq = jQuery.noConflict();//Yes, I am also injecting jQuery at the same time
console.log("created jquery object"); //This works
exportFunction($jq, unsafeWindow, {defineAs: "$jq"});
console.log("This will never be called");
But execution of the script just stops, and in the console it prints Message: TypeError: window is null.
I am testing in Firefox 28 predominantly (I can't seem to get Firefox for Ubuntu to update beyond that right now, and a whole load of issues are forcing me to use Ubuntu in a VM for this), but in Nightly 31a1 (Win7) nothing is ever injected, including a hardcoded style (that works on FF28) so I will have to figure that out at some point. (The PageMod code is here:
var lttWorker = sdk.pageMod.PageMod({
include:["*"],
/*contentScriptFile: [sdk.data.url("jquery.large.js"), sdk.data.url("scripts/bootstrapper.js")],
contentScriptWhen: "ready",*/ //This is commented to test whether it was an issue with the script. It's not.
contentStyle: "#header_bar{background-color:green;}", //This is injected in FF28 but not 31
attachTo: ["existing", "top"],
onAttach: function(){desktopNotifications({title:"attached content worker", text:"The content worker has been successfully attached"})} //This is called in FF28 but not 31
});
lttWorker.on("error", function(){callError("pageWorker failed");}); //This never gets called. Ever.
if anybody is interested)
EDIT: I have now tried it on Firefox 30b and there are still a load of issues, although they seem to be slightly different to both FF28 and 31...
First of all: These new functions are supported in Firefox 30 and later. See #canuckistani answer.
The exportFunction API is way too limited to actually inject something like jQuery with all the complex objects being or containing DOM nodes. That simply won't fly with the structured-clone algorithm that is applied to arguments.
The API is meant as a way for add-ons to communicate with pages bi-directionally, and not to inject complex libraries.
Your best bet is actually creating a script tag using the DOM APIs and putting jQuery there.
I've been doing some scraping and at some websites I found references to JS like this:
<script type="text/javascript">
unescape("%3Cscript src='Scriptdir/pr.asp?id=123456' language='javascript'%3E%3C/script%3E"));
</script>
In such cases, it is trivial to retrieve the script code (just go to the link). But how do I retrieve the code in cases like this:
<select ID="Spinner" class="text" onchange="javascript:IWantTheCodeOfThis();">
Is it even possible, or are they stored server-side without an acces for the client?
JavaScript is always stored server-side but executed client-side, so the browser has to get hold of it at some time (unlike to e.g. PHP-code).
What you posted is a JS-function-call so the function "IWantTheCodeOfThis" must be in one of the include-files which are "trivial to retrieve" :)
You could use Chrome or Safari to use the console and look at the resources. You could also type IWantTheCodeOfThis (without ()) in the console, and you will probably see the source code for the function.
Not at all. Any access to Javascript has to be on the client already.
To lookup where the function is located, it's a good idea to use a debugger like Firebug or the Chrome developer tools. Both explicitly show you all available javascript sources on the current site.
JavaScript is executed on the client side. Always.
IWantTheCodeOfThis() is a function that would be in one of the JavaScript downloaded by the browser. Most of the new browsers has some time of "inspector", "develop menu", or "developer tools" from which you can see all of the scripts that were loaded and even search them. Safari, Chrome and Internet Explorer 8/9 all have this. In Firefox, you can use Firebug.
You could go through the scripts by hand but that would be difficult as some websites may load some of their JavaScripts dynamically.