We Keep Coding

Is there any way to inject code into a website via vscode

I found this question in stackoverflow, which is a bit similar but did not help me.
I would like to find some extension/plugin for vscode that would inject a JS and CSS code into a given URL.
For example, after setting a url in vscode, I create a js and when saving the file this script is injected into google chrome in the url mapped or in the tab that is open in chrome.
There is an extension to chrome that does just that: User JavaScript and CSS

This is non-trivial but definitely possible.
I sadly cannot provide you with all the necessary information as I am not sufficiently familiar with the way VSCode extensions function.
First of all, there is this project which you should take a look at. It's source code will have useful information.
Alternatively, and my personal recommendation, you should go with abusing the remote debugger which chrome provides. This project is a good example of how it can be used. It connects to the chrome remote debugger and exposes a REPL.
There is readily available documentation on how to use the remote debugger to execute arbitrary javascript.
The next part will be to make an actual extension which takes the above, ties it together and listens to a "on file save" event or something of the sort.

What's a simple way in Google Chrome to insert Javascript into sites?

I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.

The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo

Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...

Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.

Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.

Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets

Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.

What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.

How to identify the javascript canvas library

How to identify the javascript canvas library used by a certain website? (e.g. processingjs or ...)

Well, install firebug. On the net tab, and js subtab, you will find all the library loaded. And also install library-detector add-on to determine which library is used.
And make sure, net is enabled.

View source or use firebug to view the included scripts. If you see 'processing.js', for example, it may be used. If you don't see it, well, it still may be used.
You have to dig into the included scripts to be sure.
EDIT:
Loos like IXL uses YUI to for general javascript utilities/DOM help/namespacing. As far as I can tell, no canvas library was used -- basic shapes aren't that hard to draw with canvas.

How to substitute a content of certain javascript reference with local script for debugging?

I need to debug jasvascript loaded by page. Loaded page are not locally placed.
Loaded js is packed. I want to substitute it with unpacked version.
Is there any tricks or browser options to make it?

It looks like Fiddler's AutoResponder tab will do this for you.
You say you want to replace the JS with the "unpacked" version--if you just want to insert line breaks so you can step through in a debugger, the Venkman debugger has a "Pretty Print" button which does that.

It sounds like you are asking for after the application is already deployed somewhere so this might not be as helpful.
If your application already goes through a regular build script or process for debug or at least for release then you could do it there. You could leave the Javascript files as the un-minified/optimized scripts and when building for debug it just copies them over, but for release it runs them through your minifier/optimizer first before copying them over.
I know that jQuery uses a Google Compiler to package the framework up, but there are other tools that just minify the code. Also it gives you a chance to run any kind of quality checking tools (such as JSLint) on your Javascript when you already have it as part of your build process.
Other then that the AutoResponder idea from above sounds promising.

You could use Charles Web Debugging Proxy to map the requested JS file to a local unpacked JS file (or any other location). It costs money, but you can use the trial for 30 minute periods.

Firebug is a really good Firefox extension that lets you manipulate the DOM and you can see the changes as they happen. This will let you insert <script> tags to the page.
Just Edit the <head> piece of html through Firebug and insert the <script src="http://site.com/unpacked.js"></script> somewhere in the page.

Javascript, Firebug: How do I have multiple views or what is the right of way of doing development?

Most of my javascript work is done with Firebug and I feel annoying most of the times having to switch between the HTML mode and console mode (which again I split into output mode and input mode). When I switch to a different page to see the HTML and come back, I lose the code that I write. What is the best way to go about developing javascript applications using firebug?
Something like a mini IDE would be awesome: It just has to let me insert some code, examine the current page and then let me execute it. Any suggestions?

I use a simple text editor (vim) to write Javascript and HTML, and I check the result every now and then in Firefox. I have always two windows open: one for my text editor, and one with the current page open in Firefox. After saving a change in the Javascript, I switch to the browser and refresh the page to observe results. That was my workflow until recently.
A couple of weeks ago, I discovered the Combiner tool by Nicholas C. Zakas. To release my Javascript code, I am now using a complete build process based on Apache Ant, similar to what I was using while doing Java development previously.
The first step is to check the Javascript code with the JSLint tool by Douglas Crockford. I used to painfully copy and paste my Javascript code in the online version of the tool, once in a while; being able to run it on all my Javascript files at once with this Ant script is a huge convenience.
The second step is to combine all my Javascript files into a single file using the Combiner tool. The third step is to minify the Javascript code using YUI Compressor by Yahoo!. These last two steps allow to optimize the delivery of Javascript code to reduce page loading.
You can find an example Ant build file that you may adapt to your own needs. I am currently using this file to build my own Javascript library, bezen.org.

The other answers so far have been correct: I've never heard of anyone actually developing inside Firefox/Firebug, because it's a tool designed for debugging, not coding. To do your coding, you should use a tool designed for it (either a text editor or a full-fledged IDE).
But that being said, you might want to check out FireEclipse (Link). It will allow you to integrate Firebug with the Eclipse IDE (which itself has at least three different JS plug-ins to choose from). Alternatively I think the main (aka Web Standard Toolkit, aka WST) JS editor for Eclipse has some functionality which is similar to Firebug, but I've never used it so I don't know the details.
Hope that helps.

Write your HTML in an editor/IDE
Save your changes
Preview it in your browser
Debug using Firebug
Make your code edits in your SOURCE CODE
Repeat
Firebug is for debugging and allows you to do some "what if" fiddling while the page is live. This is not a replacement for an IDE.