Develop Reference

Javascript and Chrome's New Tab (and alternate solutions)

I'm looking to either run javascript in a new tab of Chrome, or some alternative. The issue here is that it won't run, and I'm stuck, even after doing a bit of looking.
I've searched on here, and there was only one response saying it's not possible, however I don't fully understand this. After looking, I haven't found much more information on this matter.
As for any specifics - I want to toy around making a new tab extension for chrome, perhaps something fully fledged soon. Part of it includes a clock and some other things (at least for now), and I've got a clock working on the normal page if I view it normally, but this is where things get annoying. Load the extension into chrome, and.... nothing. Point is, I want to make a new tab replacement for chrome that uses JavaScript, and currently I cannot get it to run any javascript, even something simple as a clock script.
Now the initial information I found says that javascript does not work, but here's some things that would appear to contradict this:
https://developer.chrome.com/extensions/override states:
"...In addition to HTML, an override page usually has CSS and JavaScript code."
Nowhere further down do I see it making any kind of 'exception' for new tab pages where you cannot use JavaScript.
Additionally, consider the new tab page called Cardboard - it's a really pretty Google Now styled new tab page.... yet it isn't incredibly static. In fact, it has scripts, when I inspect the page! Specifically, things like google-analytics-bundle.js, dependencies.min.js and cardboard.min.js (which other than the first two, this certainly looks like a script intended for the plugin, and not from google specifically so I would assume this isn't google-approved only code or something like that).
At this point, I'm stumped. How would I be able to get javascript running on my new tab page? Is there a difference in functionality between an unpacked and packed extension that I don't see any information about? If this isn't possible, is there any other option I can have to substitute this?

Source Code Appears to Be Hidden

I'm trying to debug a particular website (that I do not control, but I'm helping to debug) and I did find the problem, but ran into something I've not seen before and hoping someone can explain it. When viewing the source code of the page using Chrome's Javascript Console I see more code than when viewing the source with the built in browser "View Source" function.
I've searched around and think this may have something to do with "Javascript Encryption", but I'm not sure.
I really appreciate the help!

You cannot "view source" with Chrome's JavaScript console. You can only view the current state of the DOM. Any elements added by JavaScript will appear there, but not in the "view source" of page, hence the difference you're seeing.
Completely, totally unrelated to "Javascript Encryption".

It looks like they're built in https://www.legalshield.com/assets/js/video-library.js . Specifically, var thumbnail_hostname = 'http://www.legalshield.com'; near the top of that script would need to be changed.

debugging jQuery snippet

I was trying to take a working jQuery snippet (it's an example to another SO answer) and improve it.
The original snippet can show a good and a bad way of doing something, by having to comment/un-comment some code. I tried to modify the HTML and the JS so that both examples can be run independently, without modifying JS code (by basically cloning sample HTML into a copy with different IDs).
Original JSFiddle worked fine: http://jsfiddle.net/thangchung/LVAaV/
My "improved" version doesn't seem to work at all: http://jsfiddle.net/dvkdvk/C2YBE/19/
(doesn't work means that when you push any button, nothing happens).
I don't know how to debug it with jQuery (with regular JS I would just sprinkle alert() everywhere). I ran "JSHint" on JSFiddle and it was OK.

Your new fiddle did not select a library. Select it from the left side of the form and click Run.
I found this by using Firebug's script debugger in Firefox. Turn on script debugging with the developer tools in your browser of choice. Otherwise, Javascript fails silently. You can then set breakpoints, look at variables, etc. That is much more efficient than using Alerts and console logs (although they do have their place).

Your main problem is with your JSFIDDLE setup. On the left hand side of the page, make sure you include the jQuery library and select onDomReady from the frameworks and extensions panel.

I tried running this script in FireFox, Firebug. The scrips runs fine here with me. Kindly see the environment in which you are trying to run this script.

Edit opened HTML Page, with Javascript

I was looking into making Firefox addons, and I need some help.
Is it possible to edit an HTML page that is open in the browser with javascript?
For example:
User types in "google.com"
Addon is activated
Javascript changes contents of "google.com" to maybe say "Hello!" at the bottom.
Of course this isn't specifically what I want to do, but a push in the right direction on how to accomplish such a task would be great.
~Carpetfizz

From within a Firefox addon this is obviously possible as many extensions do this.
If you, however, simply want to modify the DOM and nothing else than I would recommend taking a look at greasemonkey. Loads of example scripts around to do this: http://userscripts.org/
And the added benefit, if written correctly they also work in Chrome and other browsers.

Yes, it is. You must find a tutorial about javascript DOM manipulation

Easier way of testing and adding Javascript to a page in Firefox?

I am trying to extend some Javascript in one of my pages and for quick "will this work" code it's a huge pain. Basically it consists of editing code in my IDE and save, switch to Firefox, reload page, set breakpoint in Firebug, examine and repeat
Are there any Firefox extensions that will aid me in this respect?
The only thing I can find is using javascript: ... in the address bar, but that's a huge pain, can only hold a single line, and there is no way of making the test code persist across a page reload.

Try jsfiddle.net. You can experiment with html, css and code within your browser and debug that with firebug for example. You can use a diversity of js-frameworks (or none), simulate XHR, and add your own (js/css)resources. It's not ideal, but much better than the practice you described.
You can also try using KomodoEdit, which offers 'view in browser' functionality, even for URLS and with a preset browser.

just use the js console that comes with firebug. You can write all manner of code in there and even declare functions and variables that can be referenced. if you need more than one line, firebug can do that too.
EDIT: except page reload.... if you need to do page reload it needs to be saved somewhere. I would use a Greasemonkey script

You can use the Web Console (new in Firefox 4 and higher) - press Ctrl-Shift-K to open it for a particular page. The command line is at the bottom, press Shift-Enter on the command line to enter more than one line.