Develop Reference

How do I load javascript with the firebug console?

I'm trying to load a script with the firebug console like this:
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-latest.js'; //example
document.getElementsByTagName("head")[0].appendChild(script);
When I run that code the firebug console gives me the error,
Blocked loading mixed active content "http://code.jquery.com/jquery-latest.js"
Is there a way to get around that?
I don't necessarily need to load jquery. The ability to insert scripts with firebug would be useful for development.

As an alternative solution, Firebug's command line allows you to do
include("http://code.jquery.com/jquery-latest.js");
(But https is a good idea in any case.)

Mixed content suggests that you are loading your script from an external source served over http onto your page which is server over https
So, you can use this
script.src = https://code.jquery.com/jquery-latest.min.js;
Here
is a related mozilla documentation.

For security reasons, you cannot load scripts from HTTP in an HTTPS page.
Change the script URL to HTTPS.

Consider the include() command, with which you can do what you want and you can even manage aliases to include your favorite scripts.
Note that by default, include() proposes the "jquery" alias to get jquery-latest. So would just have to use this command:
include("jquery")
Here is the documentation: https://getfirebug.com/wiki/index.php/Include
Florent

include script to page

I am trying to include script to any client's page. I create firefox extension which find tag and appendChild there with my script. And that works fine.
And it works when client use http pages (It load properly and execute)
But that doesn't work when client use https pages (it load properly but not execute).
I have the same code for http and https. In my code I haven't special http and https conditions. Anyone know what can be wrong ?
I think code is ok, but ok, examples:
Injecting script (in extension):
var myScript = top.window.content.document.createElement('script');
myScript.type = 'text/javascript';
myScript.setAttribute('src','http://path/to/my/script.js');
myScript.setAttribute('onload', 'firefoxInit()');
top.window.content.document.getElementsByTagName('body')[0].appendChild(myScript);
Code to execute:
var manipulate = (function(){
alert('duper execute');
}());

https will not let you run insecure content like scripts from a non-secured url, so your http-hosted script.js won't be allowed to run. Mixed content is blocked by default in the current versions of Firefox and Chrome (not checked IE)

Google Chrome extension run as if in console?

I'm trying to make a Google Chrome extension that pauses/plays the payer in DEEZER (www.deezer.com). I i manually run the code "playercontrol.doAction('next')" in the Google chrome JavaScript console, I can manipulate the deezer player, so i looked at the possibility of injecting the code into the Deezer web page with an extension but I haven't managed to do so successfully.
Is it possible to run JavaScript code in Deezer web page as if it were coming from the console in Google Chrome?
If so how?

The problems that you are facing here are the following:
You need to use content_scripts instead of running code from the background page.
Code run from the background page and code run as content scripts are "Sandboxed". This means that your code doesn't have access to the global variables created by the page. Your extension doesn't have access to it. THE GOOD NEWS IS that you can still do it. You have to be clever, though.
In your extension, you have to inject a new Script tag into the "head" of the page. You have to create a new script tag and append it to the head of the page. Before you append it, you need to set the "innerHTML" of the script tag to be the JavaScript that you want to run. Here is the gist of what you need to do.
var myJavaScript = "alert('hey guys');"; //You need to put your JS here.
var scriptTag = document.createElement("script");
scriptTag.innerHTML = myJavaScript;
document.head.appendChild(scriptTag);
This will put the new script tag into the head, which bypasses the security of the Chrome Extension. This will give the new script access to the regular global variables on the page, ie: you will have access to the 'playercontrol' object.

This feature has been deprecated by Chrome's security policy.

CKEditor variable is available in console, but not from a Chrome userscript?

I'm writing a Chrome userscript to locally auto-save content in a CKEditor. I'm using this CKEditor auto-save plugin as inspiration.
I have written a function that fires every half second (via an interval) to register the CKEditor event handler:
var intervalId = window.setInterval(function() {
if (CKEDITOR) {
window.clearInterval(intervalId);
CKEDITOR.plugins.add("user-script-auto-save", {
init : function(editor) {
editor.on('key', startTimer);
}
});
}
}, 500);
However, it never properly completes, and complains that "CKEDITOR is undefined" on the if (CKEDITOR) statement.
Meanwhile, if I drop into Chrome's console and type CKEDITOR, the console prints out the expected object.
What am I missing? The editor is embedded within an iframe; might that have an impact on scoping? Or am I fighting against Chrome's sandboxing here? And if so, is there some other way I can dig into CKEditor to pull out the content every second or something to do the auto-saves?
I have not yet tried the script in Firefox; that's next on my list.
Worth noting: I'm a long-time JavaScript novice. So I could easily be doing something dumb with scoping or something like that.

According to this little tutorial video on YouTube, all the 3 "devices" are separated from each other in order to prevent XSS attacks from the user script to the browser / website and vice versa. Although the user scripts / content scripts are running in the website's context, they are still kept separated from the actual website script context. You can easily acknowledge this by simply trying to access for example jQuery from a content script. Just as the CKEditor, it will not be available.
So what I've come up with in order to deal with this is using the content script to include external JavaScripts in the head tag. AFAIK, this is not possible for files directly in the extension's root directory, so I've taken a remote server to host my files.
I'm not sure if this is the best approach and I think it is an ugly bypass, possibly way to powerfull and disabled by the Chromium Project some time.
(Edited by OP, so I can select this answer and route karma appropriately)
This answer, combined with some of the suggestions and links in the comments, ended up getting me to where I needed to be.
I ended up with the following function:
var insertScriptIntoDocument = function(scriptUrl, doc) {
// inspired by http://blog.afterthedeadline.com/2010/05/14/how-to-jump-through-hoops-and-make-a-chrome-extension/
var scriptText = doc.createTextNode(
'(function(loc) { \
var embeddedScript = document.createElement("script"); \
embeddedScript.type = "text/javascript"; \
embeddedScript.src = loc; \
document.getElementsByTagName("head")[0].appendChild(embeddedScript); \
})("' + scriptUrl + '");');
var injectorElement = doc.createElement('script');
injectorElement.appendChild(scriptText);
doc.body.appendChild(injectorElement);
};
Usage looks like so:
var embeddedScriptUrl = chrome.extension.getURL("embedded-script.js");
insertScriptIntoDocument(embeddedScriptUrl, document);
For now, I'm executing this from within a Chrome extension, but I suspect that the pattern might work in a GreaseMonkey script deployed via the Chrome TamperMonkey extension provided that the URL of the script to be embedded was hosted somewhere reachable.
FTR, as it turns out, I did not actually need to get to the iframe -- the CKEDITOR variable was defined in the top-level document, but was simply not visible because of the rules of the Chrome sandbox

Google Search API Inside Firefox Extension

I am developing a firefox extension and I need to include the Google Search API. But I am encountering an error in the google.load('search','1') line. Can anyone tell what the problem is
Thanks.

I have the same problem, but according to what I can see in Google's JS code, it tries to add variable 'google' to window, but the extension is loaded when there is no window yet! So there will be no global google variable and therefore an error occurs when you try to fire google.load().
I think the solution is to load the script dynamically. I have just found an existing addon for transliteration:
h t t p s : / / addons.mozilla.org/pl/firefox/addon/8960
Look how they have solved the problem:
onPageLoad: function(event) {
var doc = event.originalTarget;
var ele = doc.createElement('script');
ele.setAttribute('type', 'text/javascript');
ele.setAttribute('src', 'h t t p : / / www.google.com/jsapi?key=internal');
}
onPageLoad is loaded when DOMContentLoaded event occures, so when the whole tree of the page is loaded (it seems it's a DOM equivalent to onLoad)
(Forgive me inserting spaces in links, but otherwise I would not be permitted to post them :])

If you've gathered all the JavaScript files and are packaging them with your Firefox extension locally, and google's load function was designed for loading JavaScript from a server then your problem is that you can't use the load mechanism in that library. Instead use Components.utils.import or mozIJSSubScriptLoader depending on the version of Firefox you're targeting.
This might require editing, extending or overwriting the code in Google's library.