Goita

guaitar (first-person singular present guaito, first-person singular preterite guaití, past participle guaitat)

to observe, look to pay attention

Borrowed from Frankish *wahtōn, *wahtjan (“to watch, guard”), derivative of *wahta (“guard, watch”), from Proto-Germanic *wahtwō (“guard, watch”), from Proto-Indo-European *weǵ- (“to be fresh, cheerful, awake”).

---

An extension to take and annotate screenshots.

It can also be used in a standalone way by visiting https://www.mostlymaths.net/goita/ To annotate an image you have in your clipboard, press q, otherwise you can paste pieces of images using v. Depending on the browser you may need to click "paste", or accept some clipboard access permissions. Use m to have fun with memes. You can see all memes available here (it's also available from within the extension or the standalone help).

All images and text are processed locally, no data is sent anywhere.

Note It has not been thoroughly tested (manually) on Safari, but all seems to work:

• Tests pass.
• Pasting and adding arrows and stuff works.

Demo video for version 2.0

Click the image to open the video (youtube).

Why? Aren't there a million like this?

Yes, but this is mine.

Also, two features I have wanted for a while:

1. Adds (visible, draggable) the URL the screenshot has been taken from. On a Mac, that is enough to go back to the source.

2. In addition to an image, it can export the screenshot as a data:base64 encoded URL, where the image is clickable (combines with point 1). I can't embed an example in a README (github seems to throw such a long URL away) but you can find it in media/data-url-example, copy that blob of text in the URL of your browser (tested in Chrome and Safari) and you should see a screenshot as the one above, clickable.

Features and functionality

Taken from the extension's help modal. These are the default shortcut keys.

• a: draw an arrow
• r: draw a rectangle
• p: draw an ellipse
• s: highlight an area
• t: write text
  • ctrl .: Make text larger (for this text block)
  • ctrl ,: Make text smaller (for this text block)
  • ctrl /: Cycle through fonts (Monoid, Reforma, Inter, Roboto)
  • ctrl + scrollwheel: Resize the text bounding box
  • ctrl + c: Center the text
• v: paste images or text from the clipboard
  • ctrl + scrollwheel: Resize the pasted image while selected
• k: clip the screenshot
  • drag: dragging moves the clipped image
  • shift+drag: dragging moves the clipping rectangle
• q: swap the screenshot for whatever image there is on the clipboard (or go back to the screenshot)
• c: choose color for the next operations
  • r: red (default)
  • y: yellow
  • b: blue
  • g: green
  • o: orange
  • w: white
  • x: black (and highlight then redacts)
• m: enter meme selection, it will be placed on the last click and behave as a pasted image
  • type: to dynamically search through the list of memes
  • tab: to display meme thumbnails
  • enter: to select the topmost meme
  • click: on the image or name to select it
  • paste: an external meme URL (should be valid) to use that instead
  • esc: to dismiss
• z: switch between the screenshot and a white canvas (better for tweaking memes or diagrams)
• backspace: delete anything selected

Installation

Download/clone this repository somewhere and load the extension in Chrome via Extensions -> Load unpacked. I only could get it to fully work once I enabled "enable in Incognito". If you don't feel like doing that, that's okay. I wrote this for my own use anyway…

Tests?

It is kind of tested, at least the editing functionality, which is the "easiest" to test. I took a leaf out of the development of Weave and added Chai/Mocha in-browser tests. They try to reproduce human behavior by sending browser events. I think it is neat, because I need no headless browser or anything.

You can see them (in separate iframes) here.

If you want to run them locally, start a local web server of some sort in the root folder of the repository (like running python3 -m http.server 8000) and open the tests/ link there. The main index holds several iframes with the individual suites per "functionality" (arrow, rect, etc), you can also open the individual pages instead, or add new ones.

The way the tests work is:

• They "run" in a webpage that is pretty much like the one the extension presents, but with chai/mocha in-browser running.
• The div where the screenshot is shown is hidden behind a div, or just display: none (depends on the test).
• If you are changing stuff or developing a new test/functionality, you can display that and explore what is added and what not, confirming stuff works as expected "live", in the test page itself.

There is no testing of the Chrome specific APIs, because there is little of them, and it's kind of untestable.

• Generating images in popup.js when pressing the extension button.
• Changing the extension and badge title in screenshot.js (behind a try with no catch to let this run in tests out of extension sandboxing).

Local development, contributing

The most straightforward route if you want a feature or change stuff:

• Clone this somewhere.
• Load unpacked, as if you were to use it (it's assumed you want to).
• Make sure you can run the tests as in the previous section.
• Start changing code and trying changes. If you have a screenshot page (i.e. the one you can draw in after pressing the extension) open, refreshing it loads the most current version of your edited code.

As for contributing, this is one of my personal projects, and like many others I have, I have a clear idea of what I want (or a clear idea of what I don't). So this is likely to follow whatever my whim is (in other words, I may reject pull requests for no good reason), but as an open source project, please fork, play with this and make it your own.

Credits

• Icon: Gemini via Imagen 3.
• Gemini helped fight with Chrome permissions, but I ended up having to read (again) too much of its documentation.
• Added the following open source fonts:
  • Roboto Mono
  • Reforma 1969 (or from FontSquirrel to see the license)
  • Inter
  • Monoid
  • Special Elite
  • BlackCasper
  • Chicago Kare