Chrome REPL (first O2 Platform Chrome Extension)

I was doing some browser automation and it was driving crazy the fact that I was not able easily write code directly on Chrome. Basically what I needed was a Chrome REPL, and since after looking for one, I couldn't find one that suited my needs, I decided to write one :)

It was quite easy to write (about 1 day's work) since Chrome is quite an easy platform to develop for.

You can get this extension from the Chrome Web Store or from the Chrome-REPL Github repo (you can install from the code if you enable 'developer mode')

Here is how to install it from the Web Store and run a couple of the provided test scripts

1) In chrome open the install page which should look like this:

2) click on the blue 'Free' top right button, and when prompted click on 'Add'

3) if all goes well the extension should now be installed (note the new icon on the top-right of the location bar

4) if you click on that icon you will see a popup window that gives you access to the chrome REPL :)

5) you can open that page directly (using the link located after the execution results, or by opening this link chrome-extension://ojmdmeehmpkpkkhbifimekflgmnmeihg/options.html (which you can also get from the chrome://extensions/ page)

When in stand alone mode you can experiment more with the kind of javascript you can execute (for example if you trigger an alert while in the extension 'popup mode' (shown above) you will lose that popup window))

6) this page contains a number of test scripts that should give you a flavour for the types of scripts you can write:

7.a) The first example shows how to how to programatically open a new tab window using chrome.tabs.create:

Note the 'new tab id' since that value will be needed for the next set of scripts (in this case that value is 483)

7.b) Now that we have a new tab opened (and we know its id), we can call chrome.tabs.get to find out more details about it:

7.c) We can use chrome.tabs.executeScript to ...

... open a alert box in the chrome window

7.d) A more interesting usage of this 'tab execution capabilities' is to inject jQuery into Google's search page and trigger a search...

... which looks like this (note the 'Chrome repl' search value, that was programmatically inserted)

7.e)  Finally we can also manipulate the current extension UI in real time. Here is how to change the Chrome REPL extension logo text using the chrome.browserAction.setBadgeText (note how in the screenshots above it is 'REPL' and in the screenshot below it is 'TEXT')

Ok that's it for now, please have a go a let me know what you think of it.

Btw, if you find an issue, please add it to https://github.com/o2platform/chrome-repl/issues


[Update]: see this gist for more code snippets