CEP面板网络请求实战：用Fetch API调用第三方天气API并动态操控Creative Cloud文档

CEP面板网络请求实战：用Fetch API调用第三方天气API并动态操控Creative Cloud文档

【免费下载链接】Getting-Started-guides Getting Started guides and samples for CEP extensions 项目地址: https://gitcode.com/gh_mirrors/get/Getting-Started-guides

CEP面板网络请求实战：本文基于 Getting Started guides 项目（Adobe CEP 扩展新手指南合集）中的示例扩展 com.cep.weather-simple，教你用 Fetch API 调用第三方天气API，把结果展示在 CEP 面板中，并根据 API 响应动态操控 Creative Cloud 文档。全程无需复杂概念，跟着做就能得到一个可运行的"天气主题"面板。

🎯 你将得到什么：开箱即用的天气面板

跟着本文完成后，你会拥有一个同时支持 Photoshop 和 InDesign 的 CEP 扩展：

1. 面板打开时自动调用第三方天气API，获取纽约当前天气；
2. 在面板中显示一句人话，例如 "It looks like it's snowing in New York."；
3. 点击 Apply weather 按钮后，根据天气动态修改打开的文档——Photoshop 里调整图片色相平衡，InDesign 里插入天气文本框。

示例代码位于仓库的 Network requests and responses with Fetch 目录，扩展文件夹 com.cep.weather-simple 的目录结构如下：

文件夹	作用	关键文件
CSXS/	扩展"身份证"，声明支持哪些宿主应用	manifest.xml
client/	面板界面 + 网络请求代码	index.html、index.js
host/	在宿主应用内执行、操控文档的代码	index.jsx

⚙️ 一分钟准备：安装天气示例并配置API Key

1. 克隆仓库：

   git clone https://gitcode.com/gh_mirrors/get/Getting-Started-guides
   

2. 把 com.cep.weather-simple 文件夹复制到 Adobe 的 extensions 安装目录（位置见同仓库"Getting Started with CEP Extensions"主指南）。

3. 下载 CEP 的 CSInterface.js 库，放到 client/js/lib/ 下。

4. 新建 client/js/config.js，写入你从 Dark Sky 官方渠道申请的免费 Key：

   const darkSkyKey = "YOUR_API_KEY";
   

在 manifest.xml 中，<HostList> 已声明支持 Photoshop 19 与 InDesign 13，无需再改。

🌦️ 用Fetch API发起网络请求的三步法

CEP 面板本质是 Chromium 内核（CEF）搭起的小浏览器，自带熟悉的 fetch() API。网络请求逻辑全在 client/js/index.js 里，拆解为三步：

① 用城市坐标拼出请求URL

把城市名与经纬度存成对象，按 API 要求拼出地址：

let cityObj = { name: "New York", lat: "40.40", lon: "-73.56" };
let reqUrl = `https://api.darksky.net/forecast/${darkSkyKey}/${cityObj.lat},${cityObj.lon}`;

② 发送请求并解析JSON响应

fetch() 返回 Promise，用 .then() 链式处理：先判断 res.ok，再解析 JSON；.catch() 分支负责兜底——请求失败时在面板显示友好提示，而不是让面板一片空白。

fetch(reqUrl)
  .then(res => (res.ok ? res.json() : null))
  .then(json => { /* 取 json.currently.icon 做展示 */ })
  .catch(err => { /* 提示用户重试 */ });

③ 面板展示天气，并为"后续动作"缓存数据

API 返回的是 clear-day、snow 这类短横线天气代码。代码先用 weatherTypes 常量（同文件 27~38 行附近）把它们映射成可读文案，写入页面上的 <p> 元素；同时把天气代码和文案缓存到按钮的 dataset 属性里，后面操控宿主应用时直接取用：

天气代码	映射文案
clear-day	a clear day
snow	snowing
rain	raining
partly-cloudy-night	a partly cloudy night

💡 小贴士：fetch() 不是唯一选择。CEF 就是真实浏览器，你还可以用 XMLHttpRequest，或利用 CEP 内置的 Node.js 环境获得更丰富的网络请求方式。

🔗 一行代码搭桥：evalScript 从面板到宿主应用

面板 UI 和宿主应用分属两个世界，桥梁是 CSInterface 类。实例化后，给按钮绑定点击事件，通过 evalScript() 调用 ExtendScript 函数（见 index.js 72~76行）：

csInterface.evalScript(`applyWeatherToAsset("${dataset.currentWeatherSlug}", "${dataset.currentWeatherString}")`);

这句话的含义很直白："宿主应用你好，请调用我 ExtendScript 文件里的 applyWeatherToAsset() 函数，参数是天气代码和文案。"

🎨 根据天气结果自动修改打开的文档

宿主侧代码 host/index.jsx 先用 app.name 判断当前运行在哪个应用：

• Photoshop：取第一个打开文档的第一个图层；
• InDesign：在第一页新建一个文本框。

然后按天气代码 switch 分支：晴天用 layer.adjustColorBalance(...) 调暖色调，雪天调冷色调；InDesign 则直接把 currentWeatherString 写入文本框。

在 Photoshop 中点击按钮后的 Before / After 效果：


在 InDesign 中则会自动插入显示天气的文本框：


🛠️ 网络请求与面板的常见排错

问题一：面板空白 / fetch 失败？ 先开 CEF 远程调试看请求日志——创建 .debug 文件并设置 PlayerDebugMode，步骤见同仓库 Client-side Debugging 目录指南，开启后可在 Chrome 中打开面板页面查看控制台：


问题二：弹出"not properly signed"未签名警告？ 这是未签名示例扩展最常见的坑，按调试指南的"Set the Debug Mode"一节开启调试模式即可消除。

问题三：API Key 不生效？ 确认 config.js 位于 client/js/ 目录下、变量名正是 darkSkyKey，且 Key 两侧没有多余空格。

📝 小结：从Fetch到全自动化的完整闭环

本文走完了 CEP 面板网络请求的完整链路：Fetch API 调用第三方天气API → 面板UI展示响应 → evalScript 跨界 → ExtendScript 操控文档。这个"取数据、动文档"的模式，正是真实 CEP 扩展开发中最常见的需求。接下来不妨结合同仓库的"Exporting files from the host app"与"Package Distribute Install"指南，打造你自己的网络请求扩展。

【免费下载链接】Getting-Started-guides Getting Started guides and samples for CEP extensions 项目地址: https://gitcode.com/gh_mirrors/get/Getting-Started-guides