Situation : I am writing a chrome extension that works on any page.
Problem Question : I can not load jQuery into Facebook and I would like to understand what is happening.
Hypotheses : Facebook possess some ultra advanced tech that somehow detects both :
DATA
How do I know jQuery is not loading?
I ⌘⌥j to bring up the console in Chrome. When I do :
> jQuery
>> ReferenceError : jQuery is not defined.
> $('body')
>> Error : Tried to get element "body" but it is not present on the page.
How do I attempt to load jQuery in facebook?
Method 1 (required but fails):
Via the following code in the manifest.json file :
"content_scripts" : [
{
"matches" : ["<all_urls>"],
"js" : [
"javascript/jq/jquery-1.9.1.min.js",
"javascript/jq/non-standard.js"
],
"all_frames": true // (or false, same failure)
}
]
Method 2 (works, but insufficent):
Via the method described in this SO answer (load jQuery into console), modified to permit the correct protocol :
var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();
Summary
Hypothesis 1 seems very unlikely, because over-riding the separate execution contexts of a web browser would be a major security vulnerability (break that sandbox), and not likely to be sanctioned. Therefore, I am probably being paranoid and overlooking the obvious, which hopefully one of you will see.
Appendix (other relevant code)
All of non-standard.js :
$.fn.in_groups_of = function( countPerGroup ) {
var groups = [], offset = 0, $group;
while ( ($group = this.slice( offset, (countPerGroup + offset) )).length ) {
groups.push( $group );
offset += countPerGroup;
}
return groups;
};
More of manifest.json :
"manifest_version" : 2,
"permissions" : [
"http://*/",
"https://*/",
"tabs",
"storage",
"unlimitedStorage"
],
facebook doesn't use jQuery (or any other framework) for a reason, that i am asking for. This is pretty subjective by nature.
Be sure to import the jQuery library before your custom script is loaded. You will need to go the jQuery CDN and suss out a recent version 1 minified CDN URL. Go to the page “View all versions” (or something like that) and copy the link address of the minified version for 1.9. 3 or 1.10.
You may experience the “jQuery is not defined error” when jQuery is included but not loaded. Make sure that it's loaded by finding the script source and pasting the URL in a new browser or tab. The snippet of text you should look for to find the URL to test.
The Chrome console does not appear to have access to the content script's execution context.
Wrong, it does. You need to look at the correct place:
The previous screencast shows that the Console tab of the Chrome developer tools has two dropdown boxes at the bottom, which can be used to change the execution environment for the developer tools' console.
The left side can be used to change the frame context (top frame, so iframe, ...), and the right side can be used to change the script context (page, content script, ...).
The Answer
It seems my 'experimental method' was flawed. The assumption about the Chrome console's omniscience is incorrect. The Chrome console does not appear to have access to the content script's execution context. So although console was reporting that jQuery did not have access to the page, it actually did, from the content script's execution context.
This was verified by adding a content script, test.js, to manifest.json :
"content_scripts" : [
{
"matches" : ["<all_urls>"],
"js" : [
"javascript/jq/jquery-1.9.1.min.js",
"javascript/jq/non-standard.js",
"javascript/test.js" // <-- add
],
The content of test.js is :
var jtest = $('body');
alert(jtest);
alert(jtest.text());
Now whatever page I navigate to, the two alert boxes pop up as expected.
It works!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With