Chrepl: A Chrome extension that injects a ClojureScript Figwheel repl into arbitrary webpages

[John_Newman]

Hey folks! Gotta new thing here I’m calling chrepl which you can find in the Chrome Web Store here: https://chrome.google.com/webstore/detail/chrepl/ablpgchfbbfachdiakmieocbdgflgfjj

chrepl is a Chrome extension that injects a ClojureScript Figwheel repl into arbitrary webpages.

I’d love to get your feedback and opinions on it!

You can also find further discussion on #chrepl in Clojurians Slack and on zulip at: https://clojurians.zulipchat.com/#narrow/stream/187685-chrepl

Current pricing: $3/month per seat, free for non-commercial / open source development (more details on revenue sharing to come)

Example project: https://github.com/johnmn3/chrepl-example

Roadmap: smooth existing experience; allow connection from more tools; convert tampermonkey scripts that users can use, change and share; build browser testing tools for testing against live sites

Again, let me know if you have any questions or comments and thanks for checking it out!

[HolyJak]

Hi John, could you please provide a few examples of when / why I might want to use it? I am sure it is awesome but I do not see how would I use it… Thank you!

[John_Newman]

I can think of 3 different use cases off the top of my head:

First, client presentations:

So, imagine you work for Acme Chat Systems, Inc. You’re on a Zoom call with a potential client. They say, “Yeah, so our website uses this really old chat system. It doesn’t integrate with our site well and the theming just isn’t right. It’s a legacy codebase and we just want to patch it up for now. We like your portfolio and we heard you’re able to prototype quickly with ClojureScript. Can you help us out?”

You say, “Sure, whats the address of your website.” And, in the Zoom call, you show them their website in your browser. You fire up your generic-acme-chat-module project and then connect to it with chrepl. You inspect the element of the existing chat module, copy its selector, and then, from the repl, replace that element with Acme Chat Systems module. You change some of the css theming on the fly to match the website and show the chat module in action.

The potential client says, “Wow. I can’t believe you’re already showing me a finished product, on my own website, before we’ve even finished negotiating.”

Normally, the client would need to give you access to their codebase and you would need to spend hours or days rebuilding their system, just so that you can finally integrate a repl into it and start building your integration. With chrepl, you can build your artifact directly against your client’s live, running website.

In my case, I sometimes provide clients with specialized analytics toolkits, similar to Google Analytics, but built with ClojureScript. I’m looking forward to presenting to clients in the future what our analytics toolkits can do for their platforms, live on their sites, while on the conference call.

Second potential use case: Tampermonkey

Any of these scripts could be converted to clojurescript and shared among chrepl users. Change themes to existing websites. Add new functionality. Customize Youtube. Etc, etc.

Third: Testing and automation

And then there’s general web scraping and browser automation with casper.js.

And there’s probably lots and lots of other possible use cases for chrepl. It’s basically just another bridge between your repl server and a web page - just like your usual figwheel connection. Technically, you could develop your own web app using this method - and there may be constrained situations where you might prefer to, rather than initially delivering your client repl assets via a server.

I’m sure there are other affordances enabled by taking this route that I’m not thinking of. If anyone discovers any other cool use cases, I’d love to hear about them!

[HolyJak]

Thank you!

So the main use case would be interactive cljs development on a page you do not really control? I see how that could be useful for a demonstration or a quick exploration.

I don’t understand the Tampermonkey-like use case. I use Tampermonkey to automatically change sites, while REPL I see as an interactive tool, i.e. for performing manual changes (which, in addition to the browser, requires that I run an editor with a REPL that can connect to the browser). Am I missing something?

[John_Newman]

Yeah, well, if we were to take it in a tampermonkey direction, things should be tweaked a little.

In an earlier iteration of this tool, I had it injecting a repl into every tab, indiscriminately. It was a little overwhelming though, cause I tend to have like 50 to a hundred tabs open at a time, and that’s a lot of repls getting updated on each namespace refresh. It was super powerful, but I figured the initial version of chrepl would be more useful if it only injected in tabs you manually choose.

So if I turn that back on, I’d need a white listing feature that only enables scripts for urls on an opt in basis.

But yes, for the tampermonkey flow to work, you need to have a constantly running repl, dedicated to serving repls to whitelisted sites.

If that proved useful, I could probably build a little script selector on an options page for the extension that allows you to add in CLJS scripts that should be run even without REPL connection. Perhaps these could be provided by the user or I could surface some authorized list from GitHub.

If that use case ends up being useful for customers, I may build out those features. In the meantime, though, it’s quite easy to convert tamper scripts for use on a one-off basis, for downloading video or audio from YouTube, automating a user interactions, etc.

[John_Newman]

Chrepl Project Update 2019.03.08

Well the app has been on the Chrome Web Store for about a week and a half and here is an update on the performance so far.

Web Store Listing

The Web Store product page shows that chrepl has 18 users. The Store dashboard tells me 21. Please give the app five stars in the Web Store when you get a chance!

Dashboard Stats

The approximate number of Chrome browsers that loaded the item in the past seven days. This includes enabled, disabled, and unknown statuses of the item.

The Web Store analytics shows the app having “86 impressions.” I didn’t have GA installed until about a week ago but this Audience > Geo > Location table shows 58 Web Store and chrepl.app website visitors:

Google Analytics Stats

Probably 5 or 6 of those US IPs are mine, from development and testing. So it looks like about a third of the traffic is coming from the US and the other two thirds are fairly well spread out internationally.

The Clojurians Slack channel now has 12 users. Hard to say with Zulip.

No purchases yet, but I can’t see them until after they clear, seven days after purchase. (Price has now dropped from $3 to $0.99)

Overall, I’m pretty impressed with how quickly the user base has been growing in under two weeks, with minimal marketing and announcements. I may provide more statistics updates like this in the future, if folks are interested in the development. If so, let me know what stats from GA folks are most interested in.

Updates to the App

I pushed out an update to the app last night (from version “0.4.0” to “0.5.0”) but a feature update expanded the permissions to <all_hosts> which caused it to trigger an “App Review” in the Chrome Web Store. What this means is that someone from the Chrome Web Store team has to review and approve the updated permissions. Hopefully that all goes well.

Here are the updates in chrepl 0.5.0:

• Price dropped to $0.99/month (was $3/month)
• Tab persistent REPL sessions (reload or navigate and the REPL reconnects)
• Optional REPL ejection (REPL won’t reconnect on reload)

How tab persistence works

As discussed previously, getting tab persistence to work involves enabling content access in chrepl for <all_hosts>. Before chrepl injects into content (a tab’s web content), it will first check if the user has established the injection. If not, no injection will occur. If the user has established an injection with the “Inject” button, all subsequent page loads and navigations will include chrepl injections. If the user clicks the “Eject” button, subsequent page loads and navigations will not include chrepl injections.

Next Steps

The next update will remove the popup altogether. When a tab is in the default, un-injected state, the chrepl icon will be a subdued, gray-scale color. When a user clicks the icon, it will inject chrepl and change the icon to the current colored one. When the user clicks the icon again, it will eject chrepl and the icon will return to the subdued color. The option to upgrade to a commercial license will move to a new options page. This may reduce the number of purchases but that is probably worth the usability benefit.

Once things stabilize a bit, I’ll be building a project template, similar to figwheel-main-template, that adds an extra startup option of clj -A:fig:chrepl which will launch a REPL that targets chrepl.

Longer term, an idea is to put a Script Store in the options page where users can upload or download pre-compiled CLJS scripts that will run even when a REPL is not connected, similar to TamperMonkey.

Etc.

Let me know if you have any questions or comments. Is this a good place to post updates or should I set up a blog on the website? Does $0.99 a month seem like a fair deal? I could go lower by using a yearly subscription. A one-time, life-time purchase is another option too. Thanks for tuning in, and keep your figwheels chreplin!

[John_Newman]

0.5.0 has been approved!