How to run your own javascript in google chrome - javascript

So there's an online quiz which uses flash, and my friend claims he has a script which pulls the answers from the flash app and displays them. I want to test this out, but I have a question:
How can I add or run this script to chrome so that this happens? In general, how can you run your javascript on a certain site on chrome? This concept interests me, and I didn't know it was possible to force sites to do stuff.

You can open the developers tools by pressing your F12 key or Ctrl+Shift+i. You can also right click on any element in the page and select "inspect element".
Once the developers tools are open, you can navigate to the right most tab called "console". There you can enter arbitrary JavaScript code to be executed on the currently open page.
Be careful what you paste into that console though! Someone might give you some malicious code to run. When you open the console while you browse Facebook, they actually display this warning:
Facebook is just an example. The same warning is applicable for any site.

It's quite a broad question. However. there are 3 main answers:
For one-time fiddling, you have the power of Dev Tools at your fingertips. You can run code in the context of the page, examine and debug its own code, make realtime modifications to the DOM etc.
To make a script execute every time you load some page, the traditionally used approach is Userscripts, a notion that came from Firefox. Google Chrome is able (or at least used used to be able) to handle them directly, but now most people use an extension, TamperMonkey, that runs userscripts for you.
Finally, if you need more powerful tools for interacting with your browser, you have Chrome Extensions. They are, basically, JavaScript scripts empowered with access to Chrome APIs. In this context, JS code injected into pages is called Content Scripts.

Related

How to create auto-executing script for Chrome console

The idea is that when I open a certain site in Chrome using a desktop shortcut, I want a certain script to be automatically executed via the console. It is desirable that it starts executing when the page loads. This can be done? Through the properties of the shortcut or maybe a .bat file?
I want to make a shortcut for a quick reboot of the router, which, after opening the settings page, will log into the account and click on the necessary buttons to reboot. In manual mode, everything works, but I don’t know how to automate.
You can create your own chrome extension that does certain actions depending on what happens in the browser, it is actually quite easy to do and there are multiple guides out there on how to do it.
I will shamelessly plug my own guide on how to create one with react, be aware there are many other and probably better guides out there:
Guide

Ability to load init script in Firefox?

I have a long time stick with Conkeror as my default web browser and get used to configuring/adding new features to my browser using js code with all the XUL Api through the .conkerorrc file. I'm migrating to Firefox since it has better support and is actively maintained by Mozilla. However, one of the feature that I've been missing so much is the dot file, which I can easily configure anything that I like, back up all of them through git and eval the code directly (using Mozrepl) while I'm coding to see the result.
Is there any way that I can inject/execute a sciprt on Firefox startup, for example ~/.firefox/index.js?
There is no functionality in stock Firefox to execute JavaScript code supplied by the user at startup. Functionality like this has been something that has been requested of Firefox since 2006-04-02.
It is trivial to write an add-on in any of the different Firefox add-on types (XUL/Overlay, Restartless/Bootstrap, Add-on SDK, or WebExtensions) which would run whatever JavaScript you desire upon Firefox startup. This could be done to either run code that was included in the add-on (simple), or that runs the JavaScript contained in a file that is loaded from a location external to the add-on (more complex). Which add-on type you used to implemented this would impact which interfaces you had available within the code you write. One drawback of writing your own extension which runs code included in the add-on is that in order to use it with a release, or beta version of Firefox is that you would need to have it signed by Mozilla. While this is a quick and easy process, it does add some additional overhead to the development/test cycle.
You have not specified any of the firefox-addon tags in your question. In addition, you have not described the functionality you desire, except as generalities. It also does not appear to be the intent of your question to ask how you would implement such an add-on. Given those and the fact that there are already multiple add-ons that implement the functionality of running arbitrary JavaScript (including XUL) code supplied by the user, I am not going to supply code here which performs this function.
However, if you are interested in using an already existing add-on, here are a few options:
userChromeJS: This extension was derived from the code originally provided as an example of how to implement the functionality requested in bug 332529. Its first feature listed is: "Complete chrome customization is possible by running custom javascript code or overlaying chrome with .xul overlays." This is an Overlay based add-on with which you can use XUL. This sounds like the functionality what you are interested in obtaining.
uc: "A userChromeJS clone with built-in subscript/overlay loader capability."
Greasemonkey: "Customize the way a web page displays or behaves, by using small bits of JavaScript." This is a commonly used add-on which permits writing more complex JavaScript code. The code is executed in a sandbox, not in the scope of an extension. This is done for security reasons.
Custom Style Script (Inject desired CSS or JS): "Add Custom JavaScript Codes or Styles (CSS) to an specific page or all pages."

Remote Debug Website

Is there a way to remotely debug a website?
I've just finished putting together a website that has some jquery animations. The site works fine on every machine/configuration I've tested it on.
One of the people the site needs to work for, however, reports that the animations don't work; which effectively breaks the website.
I strongly suspect his companies' network is the root of the problem; however diagnosing this is challenging as he is not a technical user and guiding him through the webkit inspector/console, etc. is not really an option.
Ideally I'd like to be able to 'capture' the network/javascript logs from IE or Chrome so that I can inspect them and attempt to work out what's gone wrong.
Aside:
I'm using an off-the-shelf Wordpress theme (http://theme.co/x/) for the site; so I expect the code is good.
While it doesn't seem possible to remotely capture and inspect the network or javascript logs from another machine's browser; there are a number of services that allow you to add automatic error reporting to your javascript code, which you can then inspect to find the root of the problem.
Examples of these are Errorception and Raygun.
As far as I have found, there aren't any similar tools to do so for monitoring network performance / loading specifically- although a similar approach with a custom script to detect if specific items have been loaded could be written.

bookmarklet javascript to get URL of all open tabs

Is there any additional DOM exposed that a bookmarklet can access to get a list of the URLs of all the tabs that are currently open in a browser? I have done some searching but have found very little documentation on what can be done in a bookmarklet which cannot be done in a normal web page - although having written some bookmarklets already it seems they have a bit more privileged status than a normal web page (although this seems to vary by browser).
I have done some searching but have found very little documentation on what can be done in a bookmarklet which cannot be done in a normal web page
That is because there is essentially none. For all practical purposes, running a bookmarklet is exactly the same as running script on the page. It is almost precisely equivalent to clicking a link on the page that has href="javascript:.."
although having written some bookmarklets already it seems they have a bit more privileged status than a normal web page (although this seems to vary by browser).
I've have also written and researched a lot about bookmarklets (check my SO history). I have found only 2 significant differences.
1.) You can use %s in the bookmark's URL in combination with a bookmark keyword for argument substitution via the URL bar.
2.) There is a weird hack in Chrome (which could easily get closed with some future update) which lets a bookmarklet open a URL in a new tab and then run code in that tab if and only if the user does CTRL+click on the bookmarklet. But that still doesn't let you do anything to tabs which are already open.
If you know others, let me know.
The only solution is to create a browser extension. If you can write a bookmarklet, it isn't much more complicated to write a very basic extension.
A bookmarklet is a javascript code that is being injected within a webpage;
If multiple tabs are available, the bookmarklet will be injected within the webpage of the current active tab.
The power of a bookmarklet is limitless, but it has effect only on 1 webpage, on the page that has been injected;
What you need here is a browser extension.
The extension gives you access to the browsers features;

Understanding Firefox extension structure

I'm trying to write a Firefox extension that intercepts a certain HTTP request and return static content without the request making it to the actual server (similar to AdBlock).
I've looked up the tutorials and I've got a basic file layout. I've also worked out that I need to use the nsITraceableChannel API and add an observer to do what I want and I have example code for that.
Problem is, where do I actually put this code? And when is my extension actually loaded and executed? Is it running constantly and asynchronously in the background or is it loaded per page view?
The documentation doesn't seem very clear on this. This extension won't need a GUI so I don't need the layouting XUL files (or do I?). I tried writing some XPCOM (I don't think I did it right though) component, registered it in chrome.manifest but it doesn't seem to run.
Can anyone explain exactly how the Firefox extensions work and where should I put my actual JavaScript code to monitor requests? Or have I got the whole idea of what an extension is wrong? Is there a difference between add-ons, extensions and plugins?
Concerning the difference between add-ons, extensions and plugins you should look at this answer. But in general, you seem to have the correct idea.
The problem is, there are currently three very different types of extensions:
Classic extensions (not restartless): these will typically overlay the browser window and run code from this overlay. Since there is one overlay per window, there will be as many code instances as browser windows. However, classic extensions can also register an XPCOM component (via chrome.manifest as of Gecko 2.0). This component will be loaded on first use and stay around for the entire browsing session. You probably want your component to load when the browser starts, for this you should register it in the profile-after-change category and implement nsIObserver.
Restartless extensions, also called bootstrapped extensions: these cannot register overlays which makes working with the browser UI somewhat more complicated. Instead they have a bootstrap.js script that will load when the extension is activated, this context will stay around in background until the browser is shut down or the extension is disabled. You can have XPCOM components in restartless extensions as well but you will have to register them manually (via nsIComponentRegistrar.registerFactory() and nsICategoryManager.addCategoryEntry()). You will also have to take care of unregistering the component if the extension is shut down. This is unnecessary if you merely need to add an observer, nsIObserverService will take any object implementing nsIObserver, not only one that has been registered as an XPCOM component. The big downside is: most MDN examples are about classic extensions and don't explain how you would do things in a restartless extension.
Extensions based on the Add-on SDK: these are based on a framework that produces restartless extensions. The Add-on SDK has its own API which is very different from what you usually do in Firefox extension - but it is simple, and it mostly takes care of shutting down the extension so that you don't have to do it manually. Extensions here consist of a number of modules, with main.js loading automatically and being able to load additional modules as necessary. Once loaded, each module stays around for as long as the extension is active. They run sandboxed but you can still leave the sandbox and access XPCOM directly. However, you would probably use the internal observer-service module instead.

Categories

Resources