Skip to content

Commit 13eca86

Browse files
author
amandah
committed
Created documentation for UXP Scripting
1 parent d719d5e commit 13eca86

File tree

11 files changed

+563
-24
lines changed

11 files changed

+563
-24
lines changed

.vscode/settings.json

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

gatsby-config.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -261,15 +261,16 @@ module.exports = {
261261
pages: require("./reference-design.js"),
262262
},
263263
{
264-
title: "Getting Started",
264+
title: "Overview",
265265
path: "/scripting/",
266-
pages: [
267-
{
268-
269-
title: "Creating your first script",
270-
path: "/script/getting-started/creating-your-first-script/"
271-
},
272-
],
266+
},
267+
{
268+
title: "Quickstart Guide",
269+
path: "/scripting/getting-started/"
270+
},
271+
{
272+
title: "How It Works",
273+
path: "/scripting/how-it-works/"
273274
},
274275
{
275276
title: "Samples",
@@ -279,6 +280,7 @@ module.exports = {
279280
title: "Reference",
280281
path: "/scripting/reference/"
281282
},
283+
282284
],
283285
},
284286
plugins: [`@adobe/gatsby-theme-aio`],

src/pages/community/index.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ Join the worldwide community of Creative Cloud Developers who are building plugi
1919

2020
Here are a few ways to get involved:
2121

22-
- Join the [Creative Cloud Developer Forums](https://forums.creativeclouddeveloper.com/) to meet other developers, ask questions, and offer help
22+
- Join the [Creative Cloud Developer Forums](https://forums.creativeclouddeveloper.com/) to meet other developers, ask questions, and offer help.
2323
- Contribute issues and pull requests to our open source repos, including:
2424
- [UXP for Photoshop documentation repo on GitHub](https://github.com/AdobeDocs/uxp-photoshop)
2525
- [UXP for Photoshop sample code repo on GitHub](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples)
26+
- Follow our [Eventbrite](https://www.eventbrite.com/o/adobe-creative-cloud-platform-amp-ecosystem-team-32572092711) page to stay up to date with events geared towards developers in our ecosystem.
27+
- Subscribe to the [Adobe Creative Cloud Developer Newsletter](https://www.adobe.com/subscription/ccdevnewsletter.html).
28+
- Join the [Adobe Creative Cloud Platform and Ecosystem LinkedIn group](https://www.linkedin.com/groups/12425244/).

src/pages/index.md

+18-12
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ keywords:
1010
- C++
1111
- Scripting
1212
title: Documentation-UXP for Adobe Photoshop
13-
description: Build UXP plugins for Adobe Photoshop with HTML, CSS, and JavaScript. Automate workflows, build new features, and more.
13+
description: Build UXP plugins and scripts for Adobe Photoshop with HTML, CSS, and JavaScript. Automate workflows, build new features, and more.
1414
---
1515

1616
import Community from "./community/index.md"
@@ -21,42 +21,49 @@ import Community from "./community/index.md"
2121

2222
# UXP for Adobe Photoshop 2022
2323

24-
UXP is the modern way to create plugins for Adobe Creative Cloud - Automate workflows, add functionality, and connect to other software and services.
24+
UXP is the modern way to create plugins and scripts for Adobe Creative Cloud - Automate workflows, add functionality, and connect to other software and services.
2525

2626
<Resources slots="heading, links"/>
2727

2828
#### Resources
2929

30-
- [Photoshop Quickstart guide](guides/)
30+
- [Plugin Quickstart guide](guides/)
3131
- [Photoshop API reference](ps_reference/)
3232
- [UXP API reference](uxp/reference-js/)
33+
- [Scripting Quickstart guide](scripting/getting-started/)
3334
- [Creative Cloud Developer Forums](https://forums.creativeclouddeveloper.com/)
3435

3536
## Overview
3637

37-
Welcome to the world of Adobe Photoshop and UXP (**U**nified E**x**tensibility **P**latform). UXP is powered by a modern JavaScript engine, offers a curated selection of UI components and a more streamlined workflow for plugin developers.
38+
Welcome to the world of Adobe Photoshop and UXP (**U**nified E**x**tensibility **P**latform). UXP is powered by a modern JavaScript engine, offers a curated selection of UI components and a more streamlined workflow for developers.
3839

3940
Never has there been a better time to see the future of extending and enhancing Photoshop. Integrate with other connected services, automate and customize workflows, and add brand new features - then easily share them with other Photoshop users.
4041

4142
<DiscoverBlock slots="heading, link, text"/>
4243

4344
## Get Started with Basics
4445

45-
[Photoshop Quickstart guide](guides/)
46+
[Plugin Quickstart Guide](guides/)
4647

47-
Start building on UXP for Adobe Photoshop.
48+
Start building plugins for Adobe Photoshop.
4849

4950
<DiscoverBlock slots="link, text"/>
5051

5152
[Photoshop API Reference](ps_reference/)
5253

53-
Interact with Photoshop through UXP.
54+
Interact with the Photoshop DOM using the Photoshop API.
5455

5556
<DiscoverBlock slots="link, text"/>
5657

5758
[UXP API Reference](uxp/reference-js/)
5859

59-
UI APIs, file and network I/O and more.
60+
Access file APIs, UI APIs, network I/O and more.
61+
62+
<DiscoverBlock slots="link, text"/>
63+
64+
[Scripting Quickstart Guide](scripting/getting-started/)
65+
66+
Start writing scripts for Adobe Photoshop.
6067

6168
## Discover
6269

@@ -86,12 +93,11 @@ Learn key design principles for UXP plugins in Photoshop.
8693

8794
<DiscoverBlock slots="link, text"/>
8895

89-
[Scripting](/scripting/)
90-
91-
Write scripts powered by UXP to accomplish tasks within Photoshop.
96+
[Script samples](scripting/samples/)
9297

98+
Explore script samples to start accomplishing tasks within Photoshop.
9399

94-
## Share
100+
## Share your plugin
95101

96102
<DiscoverBlock slots="link, text"/>
97103

+24-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
11
---
2-
title: Creating your first script
2+
title: Quickstart guide
33
description: Create your first UXP-powered script
44
contributors:
55
- https://github.com/amandahuarng
66
---
77

8-
# Creating your first script
8+
# Quickstart Guide
9+
10+
## Creating your first script
11+
1. To get started, create a file and save it with a `.psjs` extension onto your computer. Example filename: `first-script.psjs`
12+
2. Add the following code to that file:
13+
14+
```js
15+
require('photoshop').core.showAlert('Hello world!')
16+
```
17+
18+
## Run your script
19+
There are a few different entrypoints from which you can trigger a script.
20+
1. Select the script to be executed from: "File Menu > Scripts > Browse"
21+
2. Drag and drop a .psjs file onto the Photoshop icon in Dock for Mac. For Mac and Windows, script files can be dropped onto any part of the Photoshop window that is not an open document.
22+
23+
## Debug your script
24+
You can debug Photoshop scripts using the UXP Developer Tools (UDT) application. If you don’t already have this application installed, you can download it from the Creative Cloud desktop application. Developers can debug scripts from UDT 1.6 onwards.
25+
26+
Launch the UDT app. Once you have Photoshop running, you should be able to see it under “Connected Applications”.
27+
28+
You should see a new “Debug Script” button inside the “Connected Applications” card. Click the button to select the script file and debug in the UDT app.
29+
30+
![UDT Debugging](udt_scripting.png)
Loading
+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
title: How it works
3+
description: More details about UXP Scripting
4+
contributors:
5+
- https://github.com/amandahuarng
6+
---
7+
8+
# How UXP Scripting Works
9+
Each Photoshop script file is a plain text file with a `.psjs` file extension. We plan on expanding UXP scripting to other applications and supporting opening scripts via double-click in the future. When this happens, the file extension will help identify which application the script should be launched in.
10+
11+
## Execution Context
12+
Photoshop sets an execution context while invoking a script.
13+
14+
Within each execution context, only one script can be executed at a time. You cannot invoke another script from the running script. Using the UXP script module, you can access `ExecutionContext`.
15+
16+
```js
17+
const script = await require("uxp").script;
18+
const executionContext = script.executionContext;
19+
```
20+
It provides details about the current script execution, methods to send data to Photoshop, and events to manage script lifecycles. You can also use methods belonging to `executionControl.hostControl` to suspend/resume history states and auto close documents. Read more in the scripting [reference](../reference/).
21+
22+
## Events
23+
Script execution can be cancelled when:
24+
* a user clicks on "Cancel" in the progress bar
25+
* Photoshop encounters some exception in running a script file
26+
27+
Script developers can add event handlers to get notified when the command has been cancelled. The callback will receive "reason" as a parameter.
28+
29+
```js
30+
executionContext.onCancel.addListener((reason) => {
31+
// reason would be a json object set by PS while cancelling
32+
reject("Message");
33+
});
34+
```
35+
36+
## User Interface
37+
Scripts can only show a dialog UI. Any UI created by a script is modal in nature and must use **global await** or it will be destroyed when the script is done running. Photoshop automatically shows a **progress bar** if the script takes more than 2-3 seconds to finish.
38+
39+
40+
### Global Await
41+
`await` expressions cause `async` function execution to pause until a Promise is either fulfilled or rejected, and to resume execution
42+
of the `async` function after fulfillment. When resumed, the value of the `await` expression is that of the fulfilled Promise.
43+
44+
Global await means awaiting for a global scope async function to finish.
45+
46+
```js
47+
function anyAsyncFunction() {
48+
return new Promise((resolve, reject) => {
49+
const val = Math.random();
50+
if (val > 0.5) {
51+
console.log("Resolve promise");
52+
resolve(val);
53+
} else {
54+
console.error("Rejecting promise");
55+
reject(val);
56+
}
57+
})
58+
}
59+
60+
// Global await
61+
try {
62+
const val = await anyAsyncFunction();
63+
console.log("Value from function", val);
64+
} catch {
65+
console.log("Rejected promise!;")
66+
}
67+
console.log("Script completed");
68+
```
69+
70+
## Permitted UXP Modules
71+
With plugin development, developers define which UXP modules they want to access in the `manifest.json` file. Script permissions are managed by Photoshop internally and no manifest configuration is required.
72+
73+
**At this time, not all UXP modules are accessible by scripts but we plan on enabling more modules in future UXP versions.** All modules that are currently supported are enabled by default:
74+
75+
76+
| UXP Module | Supported | Current Access Level | Sample
77+
| --- | --- | --- | --- |
78+
| Fonts | Yes | Installed fonts can be read | [View sample.](../samples/index.md#access-installed-fonts) |
79+
| Clipboard | Yes | Read/write access | [View sample.](../samples/index.md#readwrite-to-clipboard)|
80+
| LocalFileSystem | Yes | File pickers can be used to open/save files. You can also call the ```getTemporaryFolder API``` to access a temporary data folder. | [View sample.](../samples/index.md#access-the-local-filesystem) |
81+
| Network | No | |
82+
| LaunchProcess | No | |
83+
| WebView | No | |
84+
| IPC | No | |
85+
86+
If you need to use the UXP modules that are not yet enabled for scripts, you should opt to create a UXP plugin instead.
87+
88+
## FAQ
89+
* What are the required minimum versions for UDT (for debugging) and Photoshop?
90+
* UXP Scripting is available in Photoshop v23.5 and UDT v1.6.
91+
* Can you invoke a script from within another script?
92+
* No, inter-script communication is not possible.
93+
* Can you pass arguments to scripts?
94+
* For this first release, passing arguments is not supported but **will be possible in a future release.**
95+
* Can scripts be executed from plugins?
96+
* No; however, any UXP script code should be able to run from within a UXP plugin.
97+
* Can I enable permissions for a module?
98+
* Developers cannot enable or seek the permission for a module. All permitted modules are enabled by default.
99+
* Why only a limited number of modules are permitted in PS? Do we expect other modules to be enabled in the future?
100+
* This is the first release of the UXP script module, and we’re working on enabling permissions to access more modules in upcoming releases.

src/pages/scripting/index.md

+22-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,25 @@ contributors:
55
- https://github.com/amandahuarng
66
---
77

8-
# UXP Scripting
8+
# Overview
9+
10+
UXP scripting allows developers to execute a single file to accomplish tasks in Photoshop. Unlike ExtendScript, these scripts can utilize the [UXP](../uxp/) and [Photoshop](../ps_reference/) APIs to communicate with Photoshop.
11+
12+
## When are scripts useful?
13+
Scripts are mainly used to perform one-off tasks that end-users would otherwise perform manually. It is especially useful when the task is repetitive in nature, such as adding a watermark to your documents. When a script is invoked by a user, it executes a task and is unloaded by Photoshop once it’s done. If required, a dialog can be used to prompt the user for inputs. Scripts can be executed in a headless manner or with minimal UI, without the need for any manifest setup.
14+
15+
The biggest advantage that scripting offers is its simplicity. You can accomplish tasks in Photoshop without requiring as elaborate of a setup as that of a UXP plugin. Any script code can be reused in a UXP plugin as well.
16+
17+
## How is it different from UXP plugin development?
18+
1. **[Lifetime](../scripting/how-it-works/index.md#execution-context):** A script’s lifetime ends when it finishes executing.
19+
2. **[Limited UI](../scripting/how-it-works/index.md#user-interface):** Unlike plugins, scripts cannot have a panel UI. They can only create dialog UIs.
20+
3. **No persistent data:** Scripts also don’t have access to persistent storage like the plugin data folder or local storage.
21+
4. **[Limited access to UXP modules](../scripting/how-it-works/index.md#permitted-uxp-modules):** Permissions to access UXP modules are managed by the host application and for now, only a limited number of modules are enabled. *We plan on enabling more modules with future versions.*
22+
5. **No identity:** UXP scripts are not supported in our distribution channels yet. Once shared, any user can use them. Plugins on the other hand are tied to a plugin ID, and procured via the CCD plugin marketplace.
23+
24+
## How is this different from ExtendScript scripting?
25+
26+
Legacy extensibility platforms supported scripting in ExtendScript. ExtendScript uses a very old version of JavaScript (ES3), while UXP uses the V8 JavaScript engine which supports ES6. Developers can write scripts while utilizing the flexibility offered by modern JavaScript.
27+
28+
Compared to ExtendScript, UXP scripting makes it much easier for developers to access the Photoshop DOM (thanks to the Photoshop API!). Until all significant features are available via UXP, you can use a feature called [**batchPlay**](https://developer.adobe.com/photoshop/uxp/2022/ps_reference/media/batchplay/) to talk to Photoshop elements.
29+

0 commit comments

Comments
 (0)