Illustrator Manipulation with Google Chrome Extension

Benefits of browser-to-Illustrator communication

Often a graphic designer's workflow is based around some sort of a business intranet web application. This could be as basic as obtaining data to enter into a design template from an interface which shows order information. Besides using Adobe ExtendScript to automate such a process, it is in fact possible to create a browser extension for Google Chrome which not only triggers Illustrator action from within the browser's interface, but also passes in data to the Illustrator script and then retrieves any result back to the browser. Effectively, it can be used to super-impose custom buttons to a web-based order report, those would launch the action to process an art document and upon completion mark the items as being processed back in the browser.

Sample Extension: "Colorhunt Ai Colorizer"

The proof-of-concept "Colorhunt Ai Colorizer", the subject of this article, is a Mac-only (at this time) Chrome extension which uses web-data (color data from the website colorhunt.co) to change values of specially-named global swatches within the active Illustrator document which in turn alter the appearance of all art colored with those swatches.

Setup

1. At this time this extension is only working on Macs. Windows users please comment if you'd like to see a cross-platform extension, but no use proceeding to following steps 'as is'.
2. Go to the github link to download the project. These instructions should be present inside the Readme.md file as well.
3. Go to 'chrome://extensions' and drag the Chrome Extension.crx file into the browser to install the extension in your Chrome Browser.
4. Make a link to, or place the file "ColorhuntAiScript-2.jsx" into your "Documents/Adobe Scripts" folder.
5. Place the file "RunAiScriptFromNativeMsg.py" into your "Documents/Adobe Scripts" folder, too.
6. Edit the file "com.vbas.colorhunt_colorizer.json" to change the line "path": "/Users/VasilyHall/Documents/Adobe Scripts/RunAiScriptFromNativeMsg.py", to point to your own .py file in the location from previous step.
7. Place the file "com.vbas.colorhunt_colorizer.json" into the folder "/Library/Google/Chrome/NativeMessagingHosts". If this folder is not in your system, create it. 

Usage

1. Check initial website status. Go to the website [colorhunt.co](https://colorhunt.co) and ensure the extension is properly working: the color palette containers each should have an "Ai" button on the top-right corner.
2. Prepare Illustrator template. Create any Illustrator document with four global swatches whose names are exactly "place c1", "place c2", "place c3", and "place c4". Color some artwork with these swatches. Since the swatch color values are being manipulated by the extendscript, these global colors could be used to change appearance of stacked appearance fills or strokes, effects and graphic styles, and also blends.
3. Action. When clicking the Ai icons on the website, the extension should change the document colors and relay the name of the document back in the browser.

Technical Observations

While it is possible for data to be communicated from the browser to Illustrator and back again, it is necessary to note how this extension accomplishes this task. First, the action call originates from the browser tab where the javascript event sends a message to the python host application. Then, the python script executes an 'osascript' applescript command string. The applescript command is built with string components which are applescript lines concatenated with "-e" to create nextlines inside the single-line command string. The objective of this applescript is to run an extendscript .jsx file, yet just as importantly it is to pass in data from the parent callers and to push a result back up the chain. When each segment of this pipeline is correctly written, the data comes completely around. In the extendscript portion the arguments being passed in rely on the 'arguments' keyword being used as the parameter of a root extendscript function. The extendscript result is passed back to the calling applescript with a return statement at the conclusion of the root function.

Could there be a better way? If there is a way to have the javascript layer directly call the extendscript, or applescript, and be able to get the returned data, it would be the way to go. I was only able to get it to work with this setup though at this time.

Benefit of separate extendscript .jsx file

Some may wonder why an extendscript is called from applescript and not python, and others may wonder why an extendscript is called at all, since Illustrator can also be just as well controlled by applescript. The reason the jsx is called from Applescript and not python is because I couldn't figure out how to run it from python and use the 'stdin', 'stdout' objects. The benefits of a call to jsx from applescript instead of just using applescript for Illustrator control are:

1. Javascript is quicker to write and is cross-platform.
2. JSX files can be tested out independently of non-Illustrator work and easily integrated into the rest of the extension via the 'arguments' keyword and properly written caller applescript.

Conclusion

Browser-supplied data calls to Adobe graphic-oriented & other makes and kinds of applications could yield substantial productivity gains, especially for workflows where an intranet application is used to manage processed related to creation or editing of digital assets. This approach to web data access differs from Adobe CEP extensions by how uncoupled it is from the Adobe software (compared to using in-app browser-enabled CEP panels) and the freedom to start with controlling not just Illustrator, but anything else of interest to a task.