Learn to Code via Tutorials on Repl.it!

← Back to all posts
Fixing Replit Problems with Mac Automator


This is probably just a weird thing that only annoys me, but I really think that the replit command textarea box should expand as you write, because even if you write a really long comment, it only let’s you see like three lines of it.
This isn’t really annoying in share, as I usually don’t write large comments there, but in Ask, when I am trying to make a detailed answer it can get annoying.
For example, maybe I write out a long piece of code and forget what I named a variable up at the top (happens all the time to me). Instead of just being able to look up and see, since I can only see two lines above what I am typing, I have to scroll all the way up to see what I named the variable, and then scroll all the way back down.
Because of this, and because I had just discovered Mac Automator, I sort of came up with a solution, and a more complicated one than is really necessary.

How to:

First off, you need these four things:

  1. A Mac (sorry Windows and Linux)
  2. Fingers (Unless you can type with your toes)
  4. Safari (I’m sure you could get it to work on other browsers, but I only know how to do it in safari)

Ok, let’s get started.

Step 1

Open up automator, then click on New Document

Next, double click on “Quick Action”

Then you need to change Automatic (text) and any application to no input and safari

Now you’ll need to search through the actions on the left side for Run Javascript and then select it.
Under you action it should open up a little place for you to code.

The default code should look like this:

We don’t need to change any of that, except for the comment if you want.

The first thing we’ll do is get access to the safari application, like this:

Then we need to include the standard additions for safari, to let us do stuff

Then we add the code that we want run into a string, like this:

Then below that code we run it with:

Which runs the code in the current tab of Safari (only if one is open)

We can run this a few times just to be sure it works, if it does, then good, if it doesn’t… well then I must of done something wrong.

Moving on, to make it actually do stuff we can replace var code = “alert(‘Hello, World!’;”; with this:

Basically, broken down what this block of code is doing is creating the divs you need via document.createElement(tag);
And then styling them and stuffing them all inside of each other.
After the code has created all of the div’s in attaches them to the end of the html of whatever page you are on.

It has a textarea which allows you to write and see what you are writing to a certain extent without having to scroll all the way up.
Once you press done it selects the text you have written and copies it to the clipboard, before removing the HTML from the website page so you don’t see it anymore.
It then looks through the replit code for the chat textarea and pastes whatever was copied.
Works quite well in my opinion, and although I need to fix the styling a bit it get’s the job done.

Down below is a simpler version of the code less condensed so you can see what the popup looks like:


Note: This tutorial is trash, but hopefully you learn something about automator...