Hello everyone, I’m reaching out because I could really use your help with something I’m struggling with PTS ver 25.12.4. I have several Photoshop scripts that I want to turn into a plugin to improve my workflow, but I’ve hit a roadblock. Every time I try to load it in the UXP development tools, the panel shows up blank, and it’s quite frustrating. I even attempted to use AI to resolve the issue, but unfortunately, nothing has changed. I’m not very familiar with UXP, so I’d be incredibly grateful for any guidance or support you could offer. Thank you so much for your time!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ALICE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="title">ALICE</h1>
<section class="card">
<h2>Action</h2>
<!-- Font size row -->
<div class="action-row">
<div class="dropdown-container">
<select id="fontSizeSelect">
<option value="2">Nhập giá trị</option>
<option value="2">+2</option>
<option value="3">+3</option>
<option value="4">+4</option>
<option value="6">+6</option>
<option value="8">+8</option>
</select>
<input id="input1" type="number" value="2" class="custom-input">
</div>
<button id="btnFontSize" class="action-btn">▶ Font size</button>
</div>
<!-- Place BB row -->
<div class="action-row">
<div class="dropdown-container">
<select id="placeBBSelect">
<option value="default">Chọn hình</option>
<option value="option1">Hình 1</option>
<option value="option2">Hình 2</option>
<option value="option3">Hình 3</option>
</select>
<input id="input2" type="text" placeholder="Nhập giá trị" class="custom-input">
</div>
<button id="btnPlaceBB" class="action-btn">▶ Place BB</button>
</div>
<!-- Cut spacing row -->
<div class="action-row">
<div class="dropdown-container">
<select id="cutSpacingSelect">
<option value="200">Nhập giá trị</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
<input id="cutSpacingInput" type="number" value="200" class="custom-input active">
</div>
<button id="btnCutSpacing" class="action-btn">▶ Cut spacing</button>
</div>
<!-- Action buttons row -->
<div class="button-row">
<button id="btnAddText" class="wide-btn">Add text</button>
<button id="btnDivideText1" class="wide-btn">Divide text 1</button>
</div>
</section>
<!-- Text Layer Editor (hidden by default) -->
<div id="textLayerEditor" class="card hidden">
<h3>Text Layers</h3>
<div id="textLayerList" class="scroll"></div>
<div class="button-row">
<button id="applyTextChanges">Áp dụng thay đổi</button>
<button id="cancelTextChanges">Hủy</button>
</div>
</div>
<section class="card">
<h2>Layers</h2>
<!-- SO and Convert buttons -->
<div class="button-row">
<button id="btnSO" class="wide-btn">SO</button>
<button id="btnConvert" class="wide-btn">Convert</button>
</div>
<!-- Resize row -->
<div class="action-row">
<div class="dropdown-container">
<select id="resizeMode">
<option value="all">Resize</option>
<option value="width">Width only</option>
<option value="height">Height only</option>
</select>
<input id="resizeInput" type="number" value="100" class="custom-input">
<span class="percent-label">%</span>
</div>
<button id="btnResize" class="action-btn">▶</button>
</div>
</section>
<section class="card">
<h2>Save JPEG</h2>
<button id="btnSaveJPEG" class="wide-btn">Save JPEG</button>
<button id="btnChooseFolder" class="wide-btn">Chọn Folder</button>
</section>
</div>
<script src="main.js"></script>
</body>
</html>
{
"manifestVersion": 5,
"id": "com.alice.panel",
"name": "ALICE",
"version": "1.0.0",
"host": [
{
"app": "PS",
"minVersion": "23.0.0"
}
],
"entryPoints": [
{
"type": "panel",
"id": "alicePanel",
"label": "ALICE",
"main": "index.html"
}
]
}