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

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.

Related

How do I use WebStorm for Chrome Extension Development?

I just bought WebStorm 5 and so far have been really enjoying its Inspection features. One hitch I've run in to when developing my Chrome extension is that it doesn't recognize the chrome variable:
Is there a way I can add the chrome variable to the Inspector so that it can autocomplete as I type? I'm guessing I would need to add Chromium as an External Library but I'm unsure where to start.
First Time Setup
Open the Settings dialog (File > Settings)
Click Languages & Frameworks > Javascript > Libraries
Click Download
Make sure TypeScript community stubs is selected
Select chrome from the list (you can find it quickly by just typing chrome)
Click Download and Install
Click OK to close the Settings dialog.
Steps 2-6 illustrated below:
In Subsequent Projects
In any subsequent project, you just:
Open the Settings dialog again (File > Settings)
Click Languages & Frameworks > Javascript > Libraries again
Check chrome-DefinitelyTyped
Click OK to close the dialog.
Steps 2-4 shown below:
UPDATE 2:
It's now supported out of the box, see the complete answer below.
UPDATE:
There is a more complete stub file that can be added as a library to get code completion. It's a part of the Closure Compiler project. Download chrome_extensions.js.
See also the feature request for WebStorm to add this library automatically from the IDE.
You need to get the JavaScript library for the Chrome API somewhere, or use a stub to get basic completion.
Library or a stub can be configured in WebStorm.
I found the JSON files with the Extension API. One can write a script that will build JS stubs from these JSON files, the stubs can look like the basic version linked on GitHub above, but with the automatic generation they will contain almost complete API and JSDoc comments so that documentation like here can be viewed directly in the IDE.
JSON => JavaScript object stubs mapping is pretty straightforward in this case and writing this kind of converter should not take more than a day (or several hours for the skilled coder).
If someone goes ahead and implements it, please post the link to the results here.
WebStorm should one day accept json definitions directly to enable autocomplete for the functions defined. Meanwhile, you can use the program at https://github.com/QuickrWorld/jsgen to convert the json files to js to enable auto-complete for the chrome extension APIs.
For writing AppScript, functions and classes such as DriveApp, SpreadsheetApp, there is a plugin in WebStorm or Intellij called google-app-script.
The installation method is the same as above. On the other hand, you should mark or open the .gs file as JavaScript. (July 2017)

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 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.

browser extension to replace JavaScript file on a live site for testing

I'm looking for a browser extension (Firefox, Chrome) allowing to replace a Javascript file on a live Web site to do some testing/hacking.
Basically, it should take a URL and load another one instead (locally or on a HTTP development server).
Any idea?
Try http://www.fiddler2.com/fiddler2/version.asp
It does that and much more. But it's not a browser extension.
I think this is a task for a personal proxy. You can sniff traffic on the proxy and apply rules to modify requests/content
The Opera browser has similar functionality:
View source code of the page (Ctrl+U).
Make some changes. Or paste and replace the entire file.
Press Apply Changes in the toolbar (Ctrl+R).
For editing linked resources (such as javascript or CSS files), use the following approach:
Open the linked resource in a new tab.
View "source code" of the resource (Ctrl+U).
Make some changes.
Press Apply Changes in the toolbar (Ctrl+R).
Return to the tab with the webpage and realod (Ctrl+R).
Alternatives:
Using chrome you can change code on the fly (Developer tools -> Sources tab) and just save it (command + s)
Use the LiveReload app that actually attaches an extension (that kind of does what you want) http://livereload.com/
This may not be the "exact" answer to your question, yet I almost sure one of those will do what you want to do.
Not sure if this helps or not, but I just encountered a chrome plugin called Resource Override, which sounds like it does something similar. Im trying out the Fiddler which someone else mentioned, but I think i'm also going to try this one at some point. https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii?hl=en
You can intercept and block requests in browsers. For example in Chrome you can use the beforeload event check if it's a JS (event.target is script tag or event.url ends in .js) call event.preventDefault() and then load your own script instead.
I'm pretty sure there's a similar way to do this in FF.
There is https everywhere which lets you define rules for url rewrites. This should work on all request, including script requests.
Tamper data might do the job, but I don't know how automated/permanent you can set it up.
And there is also an extension called redirector. I didn't test that one. Potentially it only works on the address bar.
Update:
That is unfortunate. In that case probably a proxy is you only way. What about a firefox extension that is a proxy, like Foxyproxy
ColBeseder correctly brings up Fiddler (http://www.fiddler2.com/fiddler2/version.asp) as a solution to your issue.
Fiddler is perfectly capable of handling and decrypting HTTPS traffic as well - see the documentation on the page for how to configure it.
To directly answer the OP question, you can use the autoresponder feature in Fiddler to hack your production JS for testing.
Enable the autoresponder tab in Fiddler, making sure to leave pass through for unmatched requests checked, entering the URL of the JS files you want to substitute as the pattern. Select the response file from your local filesystem, and go to town!
See http://yuiblog.com/blog/2008/06/27/fiddler/ (bottom of article is most relevant) for an example.
You should probably consider robohydra, since it is specifically developed for your case. They do not support https yet, but they are open to including it in the future.
Disclaimer: I'm the author of the software :-)
A different approach that might suit your usecase better is to use a RoboHydra-based development proxy. The idea here would be that you want to keep ALL Javascript files in your machine, and use another server simply as a backend. It's great for eg. front-end developers that don't want to have the whole backend installed in their machines.
You can see the documentation, tutorials and such at http://robohydra.org/, and have an article describing exactly that usecase at http://dev.opera.com/articles/view/robohydra-a-new-testing-tool-for-client-server-interactions/.
However, as of now it can't proxy to HTTPS URLs, but that should be a trivial change that I intend to do soon anyway.
How about Greasemonkey?
That should be the thing you're searching for!

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.

Categories