This one's perhaps a duplicate of "variable not recognized inside contentscript" under the same section. I got part of my query solved there from the answer to that question. Yeah, I understand that
The content script context is entirely disconnected from the addon script context. Content scripts are run in the context of the document, while addon scripts aren't.
But does that mean we can never access a variable in the content script context in the addon script context? If by any means we could access them, please do let me know. My requirement needs objects to be sent as parameters to functions in another script(data/utilities.js) and possibly get the returned object. There was no difficuty in doing the former but am stuck with the latter cos of the aforementioned context problem. I am able to return the value from the content script context but unable to access the same in the addon context. Can anyone please help me out with a little example of this?
PS I could as well discussed it there but I read that I shouldn't as this ain't a discussion forum.
You cannot get direct access to variables in the content script from the addon script context directly. You can pass the variable back to the add-on from the content script using
self.port.emit('send-some-var', some_var)
You would then receive the variable's value in the add-on script by listening for the same event:
worker.port.on('send-some-var', function(data) { console.log(data) })
The main limitation however is that the data being passed through must be JSON-serializable, so you could not have a complex object with methods, etc. Only data.
Related
With copy("text") in the developer tools console of Chrome and Firefox you can copy a "text" without an user interaction. Is this also possible if the website I've opened also has a function named copy? If yes, how?
If you refer to window overriding:
Unfortunately, once website overrides methods from window object, they are basically gone for good.
There are some workarounds, for instance you could use proxy interceptor like Charles, inject something like <script> window.copy_saved = window.copy; </script> on the very top of the <head> tag and then use copy_saved method with preserved original functionality.
If you refer to accessing functions defined in website's script tags:
It really depends on implementation, if the method is wrapped in structure accessible in window object, then yes, you can find a way to invoke the method. Methods however, can be stored in closure-like objects and thus being inaccessible by outside environment. It usually takes thorough reverse engineering to find a way into minified closures.
I'm trying to define the property jQuery on the window object from a content script with code in the setter. That way, when the actual jQuery object is defined, I can use it right away. I seem to be unable to get it right, though.
The target website is Outlook.com. That's the webmail version of Outlook.
I tried to put the code in the content script directly, but even if I put "all_frames": true in the content_scripts section of the manifest (so the code gets injected into every frame), it isn't working.
function afterInit(){
var _jQuery;
console.log('This gets logged');
Object.defineProperty(window, 'jQuery', {
get: function() { return _jQuery; },
set: function(newValue) {
_jQuery = $ = newValue;
console.log('This is never logged!');
$(document.body).append($('<span>I want to use jQuery here</span>'));
}
});
}
afterInit();
I verified that window.jQuery is properly defined afterwards by the actual jQuery function/object, but my setter code is never executed.
I also tried it with message passing: I send a message with the code as a string to a background script, and use executeScript to execute it on the correct tab, but this also doesn't work.
chrome.runtime.sendMessage(
{action:'jQueryPreInit', value: '('+afterInit.toString()+')();'});
And in my background script:
chrome.runtime.onMessage.addListener(function(message, sender, callback) {
switch (message.action){
case "jQueryPreInit": chrome.tabs.executeScript(sender.tab.id, {code: message.value});
}
});
If I put something else than the Object.defineProperty code in the executeScript code, that works fine. I only have problems defining the property.
(quotes are from a comment)
I want to use the jQuery provided by the page itself. I could try inserting the same jQuery file as Outlook does and hope it gets loaded from cache, but I'd rather just keep my extension as clean as possible, and use what is already available.
Your attempt at optimizing the extension is not workable / not recommended.
First off, you will not be able to use the page's code anyway because of the isolation between content script and webpage code. You cannot obtain a reference to page's own jQuery/$.
But let's for a moment suppose that you could. And then the site updates jQuery to another version, renames the jQuery object or stops using it entirely, which is outside your control. Result: your extension is broken. This is, partially, the rationale behind the isolation in the first place.
As a result of the context isolation, you are guaranteed there are no conflicts between your copy of jQuery and whatever runs on the site. So you don't need to worry about that: use your copy, and use the standard $ to access it.
Bundling a <100 KB file with your extension as a one-time download that makes sure code is available 100% of the time and with at worst disk-access latency is not making it less "clean", quite the opposite. It's a common practice and is enshrined in the docs.
Looking at your actual code, it executes in the content script context (regardless whether it's through manifest or executeScript), not in the page context. As such, no matter what the page does, $ will not be defined there.
I verified that window.jQuery is properly defined afterwards by the actual jQuery function/object [...]
I assume that you tried to execute window.jQuery in the console; by default, that executes it in the page context, not in your content script context (therefore, not reflecting the state of the content script context and not invoking your getter/setter). If you want to test your content script, you need to change top in the context drop-down above the console to your extension's context.
All that said, however,
When all is said and done, I want to use jQuery's ajaxSuccess function to execute code every time an e-mail is opened in the read pane.
Here we've got a problem. Since the content script code and webpage code are isolated, your code will never know about AJAX executing in the page's copy (not through ajaxSuccess, anyway).
Possible courses of action:
Rely on other methods to detect the event you want. Perhaps monitoring the DOM.
Inject some code into the page itself; the only way to do so is by injecting a <script> tag into the page from the content script. There, you can access the page's copy of jQuery, attach your listener and message your content script when something happens.
Rely on the background page to detect activity you need with webRequest API. This will likely intercept the AJAX calls, but will not give you the reply contents.
Final note: this may not be as simple as AJAX calls; perhaps the page maintains a WebSocket connection to get realtime push updates. Tapping into this is trickier.
Thanks to Xan, I found there are only two ways to do this.
The first is by adding a <script> element to the DOM containing the appropriate code. This is a pretty extensive StackOverflow answer on how to do that: https://stackoverflow.com/a/9517879/125938.
The second is using Javascript pseudo-URLs and the window.location object. By assigning window.location a bookmarklet-style URL containing Javascript, you also bypass certain security measures. In the content script, put:
location = 'javascript:(' + (function(){
var _jQuery;
Object.defineProperty(window, 'jQuery', {
get: function() { return _jQuery; },
set: function(newValue) {
_jQuery = $ = newValue;
console.log('totally logged!');
$('<span>jQuery stuff here</span>');
}
});
}).toString().replace(/\n/g, ' ')+')();';
The reason I/you were originally failing to define it, was because both methods of code injection we were using, caused our code to be sandboxed into isolated worlds: https://developer.chrome.com/extensions/content_scripts#execution-environment. Meaning, they share the page's DOM and could communicate through it, but they can't access each other's window object directly.
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.
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.
is it possible for Firefox extension (toolbar) to access document's variables? detailed explanation follows..
loaded document:
<script type="text/javascript">
var variableForExtension = 'something';
</script>
extension:
var win = window.top.getBrowser().selectedBrowser.contentWindow;
alert(win.variableForExtension); // undefined
it was first thing to try, and it's inaccessible this way because of security mechanisms (XPCNativeWrapper). i've read about accessing it trough wrappedJSObject and using events (adding listener to document and dispatching event from extension), but no luck. didn't try too hard, though. so, before i dig deeper ('events method' sounds like a way to go) i'd like to know is this even possible?
thanks
Yes, accessing a JS variable in content is and always was possible. Doing this the naive way wasn't safe (in the sense that a malicious web page could get chrome privileges) in older Firefox versions.
1) If you control the web page and want to pass information to the extension, you should indeed use the events technique. This worked and was/is safe in all Firefox versions.
2) If you want to read a value from the content document, you can just bypass the XPCNativeWrapper:
var win = window.top.getBrowser().selectedBrowser.contentWindow;
// By the way, this could just be
// var win = content;
// or
// var win = gBrowser.contentWindow;
alert(win.variableForExtension); // undefined
win.wrappedJSObject.variableForExtension // voila!
This was unsafe prior to Firefox 3. In Firefox 3 and later it is OK to use, you get another kind of wrapper (XPCSafeJSObjectWrapper), which looks the same as the object from the content page to your code, but ensures the content page won't be able to do anything malicious.
3) If you need to call a function in a content web page or run your own code in the page's context, it's more complicated. It was asked and answered elsewhere many times, but unfortunately never documented fully. Since this is unrelated to your question, I won't go into the details.
not so hard :)
in extension:
var jso=window.content.document.defaultView.wrappedJSObject;
now you can access any function or global variable in the webpage from the extension:
alert(jso.pagevar);
jso.pagefunction("hey");
If you are working with the new High-Level SDKs then accessing the variable via content scripts is a little different. You can't access the JavaScript objects directly from the add on code, but you can reach them from content scripts that have been attached to an open page via the unsafeWindow object. For example:
require("sdk/tabs").open({
url: 'http://www.example.com/some/page/',
onOpen: function(tab) {
var worker = tab.attach({
contentScript: 'unsafeWindow.variableForExtension = 1000;'
});
}
});
To read the variables you'll need to use the port methods on the worker variable as described in Mozilla's content script article.
Note that there are some security restrictions when dealing with objects and functions. See the articles for details.