ANOLE 1.1.0 ― Chrome Extension to Transform Selected Text

Anole is an open source productivity extension for Google Chrome. This extension makes all sorts of string transformations easier. Simply right click a text selection on any web page, choose your desired transformation (e.g. camelCase) and the reformatted text is placed on the clipboard ready to paste.

Anole is available in the Chrome web store as a free extension. Or if you want to hack on it, install the unpacked extension in developer mode directly from the github repo. Instructions for both methods are in the README.md.

Note that one advantage of installing the packed release from the web store is receipt of automatic updates.

Currently Anole can convert any selected string into CamelCase, kebab-case, Start Case, snake_case, and more. The list of cases and formats will be growing and new features for additional flexibility (e.g. transform templates) will be added. The main feature added in this release, granting user more control over Anole's right-click context menu, is important to support this future flexibility.

Anole adds each potential text transformation to the browser's context menu. The plan is to add a sizable collection of these stock transformations. This could have resulted in a context menu becoming quite cluttered or complex to navigate. To continue adding features, it was essential to allow the user to choose which features to include or exclude from the context menu.

Repository

https://github.com/tdreid/anole

About Anole ― The Browser extension that transforms selected text onto your clipboard

Anole was originally born to fill a simple need. Every day, several times a day, at work I found myself creating new git branches. Our convention at this workplace was to name branches after the title of the task worked on―only without spaces or special characters.

So given a task in the web based task list:
#101: Fix the Foo so that it Bars Steel instead of Iron

I would create a branch called:
101-fix-the-foo-so-that-it-bars-steel-instead-of-iron

This was tedious. There were websites where I could paste the task name, click a button, and then cut and paste transformed text into my git client. Too many clicks. I wanted to paste immeidately after copying. I realized, since these tasks were already listed on a web page, that a Chrome extension could do this job for me.

That's what Anole does. Select some text in a web page. Then choose one of several formats to transform that text directly onto the clipboard. Paste it wherever you like.

As the extension took shape it became clear that throughout a workday I did a lot of cutting and pasting of text. Moreover many of those pastes, like naming a variable to represent data described in a specification, could benefit from various forms of string play. As I tinkered with the early versions it seemed like I discovered a new use for this handy shortcut daily.

Pronounce The Name

If you're wondering exactly how to pronounce, A-n-o-l-e, the name of this handy little extension I wrote an earlier article about exactly that. Or just take this hint― "An Oh Lee ."

Either way an Anole is a smallish lizard that can change its color from green to brown and back. This camouflage is very useful for its life in the leaves and on the trunks of trees. Just as it's hoped that this tiny extension's ability to transform text will be handy to you for changing between cases of text.

_{The American Anole has an interesting ability to change its shade of green or brown — just like the Anole browser extension changes text to suit your needs. Image by Erwan Hesry on Unsplash}

Technology Stack

Anole is a Chrome browser extension and so comprised of pure JavaScript, CSS and some HTML. The Chrome Extension API of course plays an important role in how that's all tied together. Skeleton.css provided the foundation for the style of the options page.

To provide a pipeline for transpiling, bundling and minifying the packed extension for the Chrome web store browserify.js, babelify,js, and uglify.js are used. These are all dev dependencies.

Note that a release of the nested dependency cached-path-relative of 1.0.2 or greater should always be specified to mitigate a known vulnerability in earlier versions of the module.

Conventions for transforming from one case to another may have slight variations. For example, some may hold that camel cased text should or shouldn't start with a capital letter (i.e. CamelCase vs. camelCase.) Moreover, there are controversies over the preferred way to write title case. To resolve such idiosyncrasies I took the transformations from Lodash as a canonical starting point.

Thus, Lodash is a final dev dependency, though only a few cherry picked string functions are bundled with the packed extension.

Roadmap

As mentioned above there are many (endless?) variations on the conventional manipulations of text that come in handy. Now that the context menu can be customized to each user's preference the next step will be to include every imaginable transformation. Some examples:

• Copy a selection in one language into another language
• Copy JavaScript code snippets into prettified JavaScript
• Copy inline SQL into indented and formatted SQL
• Please suggest more =) at https://github.com/tdreid/anole/issues.

Ultimately I would also like to provide a feature allowing custom transformation templates.

Contribution Guidelines

Anole is open source, licensed under GPL-3.0 (only). To contribute please make a pull request on github.

Bug reports as well as suggestions for new text transformations are welcome here

Recently Added [ver. 1.1.0]

Anole 1.0.3 has been available in the Chrome web store since last summer. Although there were many transformations that I've wanted to add I've hesitated because of one factor―what is a useful feature for one user may be clutter for another. Since the extension updates automatically it could have been annoying for someone using only one or two of the transformations to then have to find those in a longer list.

So, Anole 1.1.0 adds the ability to select only those menu items that one wishes to use, hiding the rest. This was done by adding an options page to the extension. Selected options are saved using chrome.storage.sync so that a change made on one device will take affect across all of a signed in user's devices.

// in options.js
chrome.storage.sync.set(
    {
      copyToCamelCase: document.getElementById('copyToCamelCase').checked,
      'copy-to-kebab-case': document.getElementById('copy-to-kebab-case')
        .checked,
      'copy to lower case': document.getElementById('copy to lower case')
        .checked,
      copy_to_snake_case: document.getElementById('copy_to_snake_case').checked,
      'Copy To Start Case': document.getElementById('Copy To Start Case')
        .checked,
      'COPY TO UPPER CASE': document.getElementById('COPY TO UPPER CASE')
        .checked
    }, ...);

...

// in anole.js

cases.forEach(c => {
  chrome.storage.sync.get(null, storedSettings => {
    if (storedSettings[c] || storedSettings[c] === undefined) {
      chrome.contextMenus.create({
        title: c,
        id: c,
        contexts: ['selection'],
        onclick: copyTransformation
      });
    }
  });
});

GitHub Account

https://github.com/tdreid