整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
为前端开发者，我们可以利用Web技术在非常多的环境下开发应用，为相关的用户提供服务。其中，以Photoshop为首的Adobe系列工具是我们时常要去面对的一个平台级应用。Photoshop在图像处理上有着很强大的功能，用户量也非常可观，而且其功能在前端开发的一些情况下也用得到，因此笔者认为Photoshop相关的Web技术具有很不错的价值。
本文将引导大家使用JavaScript开发一个Photoshop插件。
Adobe作为一家历史悠久的软件公司，已经给开发者提供了相对成熟的扩展开发技术栈，被称作CEP——Common Extensibility Platform（通用扩展平台）。
CEP扩展基于Web技术，可以在Adobe Photoshop、Adobe Illustrator、Adobe InDesign等全系列应用中运行，并且可以访问这些应用和外部操作系统环境的API。
CEP应用的结构可以被分为五个抽象层级：
所谓宿主应用，就是我们CEP扩展运行在的Adobe程序，例如Adobe Photoshop等，同时后文我们也默认CEP的宿主程序是Adobe Photoshop
作为一个类Web应用，上面四层相对前端开发者来说都比较好理解，这一节我们来看下ExtendScript层：
ExtendScript脚本可以用三套不同语言去编写，分别为JavaScript、VBScript和AppleScript。三种语言功能上没有任何区别。鉴于本文面向的是各位前端工程师，我们果断选择前者，同时文章的后文我们也是默认选择JavaScript版本的ExtendScript。
ExtendScript有以下特点：
这里的.jsx文件和react用到的.jsx文件完全不同，如果你在自己的CEP应用中引入了react，记得把它们分开以避免混淆
了解了Extendscript之后，我们再来看一下CEP扩展各层级之间的横向关系：
关于Photoshop中，ExtendScript具体可以调用的API，我们可以直接看Adobe的官方手册：ADOBE PHOTOSHOP SCRIPTING[1]
在动手开发前，我们先把运行CEP扩展的各种要素准备齐全。
首先我们来看下CEP扩展需要的目录结构：
这个工具库大概一千多行，其中很大一部分是描述各个函数功能的注释，所以可以直接通过阅读注释来学习这个工具库的用法。
CEP扩展中的JavaScript环境下本身就内置了调用ExtendScript环境的类，引入的CSInterface.js是对环境里调用ExtendScript环境的类进行封装使得开发者更便于调用而已，所以引入CSInterface.js并不是必要的。
最后，我们要把建立好的CEP扩展的目录放到Photoshop指定的位置：
mac：~/Library/Application Support/Adobe/CEP/extensions
win：{Photoshop安装路径}\Required\CEP\extensions
这样Photoshop就可以加载我们开发的扩展，出现在其菜单栏中的「窗口」-「扩展」中。
看了这么多概念，我们动手试试吧！
新建CEP扩展的目录之后，我们尝试在Photoshop菜单栏的「窗口」-「扩展」中运行扩展，就发现了一个问题：
这是因为我们新建的CEP扩展没有经过签名认证。
为了绕过这个认证，我们需要打开Photoshop的debug模式：
执行完上面的操作后，你就可以在自己的Photoshop里运行自己新建的扩展了。
同时，如果你想调试自己的扩展，可以在目录指定位置中添加.debug文件：
.debug文件中，我们指定开发的应用可以在哪个宿主应用和哪个端口进行调试：
<ExtensionList>
<!-- 1 -->
<Extension Id="com.example.helloworld">
<HostList>
<!-- 2 -->
<Host Name="PHXS" Port="8088"/>
<Host Name="PHSP" Port="8088"/>
</HostList>
</Extension>
</ExtensionList>然后，我们访问在chrome浏览器中访问chrome://inspect/#devices，点击「Port forwarding...」监听我们在.debug中设置的端口，我们可以看到的自己的应用：
熟悉移动端调试的读者一定对这个界面不陌生，我们找到自己的应用并点开「inspect」，就可以在指定端口通过chrome的开发者工具来同步调试运行的CEP扩展了。
我们从前文提到的「CEP应用结构的五个层级」自下向上来构建：
1. 首先，在Extendscript层，我们先在全局定义好「获取所有文字图层」和「删除所有文字图层」的功能函数：
function getAllLayers() {
var out=[];
var doc=app.activeDocument;
getLayers(doc.layers);
function getLayers(layers) {
for (var i=0; i < layers.length; i++) {
if (layers[i].typename=="LayerSet") {
//判断是否是图层组
out.push(layers[i].name);
getLayers(layers[i].layers);
} else {
out.push(layers[i].name);
}
}
}
return JSON.stringify(out);
}
function hideAllTextLayers() {
var doc=app.activeDocument;
var out=[];
function getLayers(layers) {
for (var i=0; i < layers.length; i++) {
if (layers[i] && layers[i].kind===LayerKind.TEXT) {
out.push(layers[i]);
}
if (layers[i].typename=="LayerSet") {
getLayers(layers[i].layers);
}
}
}
getLayers(doc.layers);
for (var j=0; j < out.length; j++) {
out[j].remove();
}
return "{}";
}由于在Extendscript环境下，JavaScript仅兼容ES3，而且ExtendScript和CEP JavaScript之间只能通过字符串进行通信，所以我们要在ExtendScript的环境下引入JSON3[5]作为JSON功能的polyfill（注意这和CEP的JavaScript无关）
2. 在CEP的JavaScript层，我们在utils/cs.js中使用Promise封装好界面上用得到的的hideLayers和getLayers函数——调用Extendscript中已经定义好在全局的方法，并处理返回的字符串：
const cs=new CSInterface();
var c=cs.getSystemPath(SystemPath.EXTENSION) + "/jsx/";
cs.evalScript(`$.evalFile("${c}json3.jsx")`);
const evalJSXScript=(script)=>
new Promise((resolve)=> {
cs.evalScript(script, (res)=> {
resolve(JSON.parse(res));
});
});
export const getLayers=()=> evalJSXScript("getAllLayers()");
export const hideLayers=()=> evalJSXScript("hideAllTextLayers()");3. 在CEP的UI层（为了更直观，这里我们用引入react来代替html展示UI），我们大致部署一下插件的界面，用两个按钮分别触发「获取所有文字图层」和「删除所有文字图层」的功能。同时为了直观一些，我们把获取到的所有文字图层在插件面板上显示：
import React, { useState } from "react";
import { hideLayers, getLayers } from "./utils/cs";
import "./styles/main.css";
export default ()=> {
const [layers, setLayers]=useState(null);
const handleGetLayers=async ()=> {
const layers=await getLayers();
setLayers(layers);
};
return (
<div style={{ width: "100vw", height: "100vh", background: "#FFF" }}>
<button className="primary" onClick={handleGetLayers}>
点击获取图层
</button>
<button className="primary" onClick={hideLayers}>
点击删除全部文字图层
</button>
<div className="area">
{layers && layers.length
? layers.map((e, i)=> (
<div key={i} className="layer">
{e}
</div>
))
: "无"}
</div>
</div>
);
};让我们试试刚刚开发的功能，例如，当我们点击「点击获取图层」的按钮时，得到了如下的结果：
然后我们点击右侧「删除所有文字图层」后，是不是可以发现打开的psd文件中的文字图层都消失了呢？
我把实例的项目放在了Lumpychen/CEP-Test[6]，大家有兴趣可以自己尝试。
现在我们的应用可以在记得Photoshop中跑起来了，但是如果想让自己的扩展可以在设计师同事的Photoshop里运行，我们不能给让每个用户都开启一下debug模式，这太麻烦了。
在没有进入debug模式的情况，Adobe CEP 扩展必须有签名才能正常运行，签名分为两种：
具体如何获取证书、签名打包，Adobe也提供了官方的教程：package-distribute-install-guide[7]
同时，Adobe官方也把下载、管理和更新CEP扩展的功能集成到了Creative Cloud里，如果你安装了Creative Cloud，它会连接Adobe Exchange——Adobe官方推出的扩展市场，以获取和更新我们安装的扩展。
如果你想把你自己开发的扩展发布到Adobe Exchange上，Adobe官方也提供了Exchange Portal用来发布扩展的渠道。
然而……
由于Adobe在中国的业务一直处于被阉割的状态，且国内通过Creative Cloud购买正版Adobe应用的用户也相对有限，所以大家很少采用官方的渠道管理和获取Adobe产品的CEP扩展。
而国内的Photoshop扩展应用的生态依然处于一个略微灰色的状态，很多扩展的发布和都依赖第三方社区（知乎、微信公众号、淘宝）或素材网站，当然这样的生态也催生了我国互联网的历史上一批又一批的ps大神。
文章的最后，如果你想要开发一个Adobe CEP扩展，我这边强烈推荐几个辅助用的工具：
Script Listener是Adobe社区里推出的辅助工具，可以随时记录用户对Adobe宿主程序的操作，然后生成ExtendScript脚本文件在桌面上供用户查看和选用——使用这种方式生成ExtendScript代码，可以让开发者省去很多学习Extendscript API的成本。
JSX.js是提供给CEP应用的JavaScript环境一个JS库，可以代替原生的方法来引入ExtendScript的文件或执行Extendscript的代码，它解决了一个很重要的痛点——提供了执行ExtendScript的报错信息（这比起原生调用ExtendScript代码执行得到一句evalScript error体验要强上很多倍）
这是目前Adobe官方提供的，当前版本唯一用来调试ExtendScript的工具。它是一个VSCode Debugger插件，可以像其它的VScode Debugger一样，提供相关报错信息，实现断点调试的功能。
家好，我是 Echa。
今天来分享 50 个超实用的 Chrome 浏览器扩展！
JSON Viewer Pro 用于可视化JSON文件。其核心功能包括：
输入界面如下：
格式化之后：
JSONVue 是一个JSON数据查看器，主要用来格式化JSON数据：
Library Sniffer 是一款给开发者使用的工具，能够探测当前网页所使用的类库、框架和服务器环境，为开发者提供了方便。
Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展，可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。
WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。
使用PerfectPixel插件可以将设计图加载至网页中，与已成型的网页进行重叠对比，以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。
可以使用此扩展程序快速清除缓存，无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量，包括：应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。
VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具，它可以让用户使用点击式和拖放式界面来查看网站的元素。
Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播，按住Ctrl，并将鼠标悬浮在元素上，即可查看其信息：
CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义，CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。
EditThisCookie 是一个 cookie 管理器。可以添加，删除，编辑，搜索，锁定和屏蔽cookies。
React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后，将在 Chrome DevTools 中获得两个新选项卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件，可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。
Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。
Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件，在Chrome中安装了Firebug Lite插件以后，开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容，其包含了基本的HTML、CSS以及Javascript的调试功能，用于帮助网页前端开发工程师快速地调试网页，以便及时地找到网页中的BUG并及时修复。
HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示，详细信息可以在浏览器的开发者工具中查看。
Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox，并且可以在这些浏览器支持的任何平台上运行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox浏览器插件，提供URL转发、修改HTTP请求和结果、插入脚本等功能。
Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。
Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。
此插件允许直接从浏览器发送跨域请求，而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头，并将 Access-Control-Allow-Origin 设置为 *.
ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具，可让从网页等中选择颜色值。
CSS Peeper 用于检查和复制元素样式的优秀工具，使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上，然后单击鼠标即可复制元素的样式。
24. Dimensions
Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件，该插件在点击启动插件图标后，可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量，同时还可以通过使用快捷键来快速启用或关闭该插件的功能，简单实用。
Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。
ColorZilla 是一款功能强大地提取网页色彩的工具；也是个快速的对颜色进行调节的Chrome插件，许多的用户将这款软件称呼为颜色吸取插件，它提取的颜色是非常的多样化，还可生产css颜色的代码等。
当我们想查看网页中文字的字体时，最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢？WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标，再点需要查看为文字即可：
Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。
使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。
Toby 是一款 Chrome 新标签页工具，能够将未读的标签页分组显示在新标签页中，这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口，将你的标签页都拖进 Toby 中，就不需要实时开着占地方了。
该扩展提供了每日热门开发者新闻，不需要再浪费时间搜索高质量的文章了。
Momentum 拥有漂亮的新标签页面，每日更新精彩背景壁纸图片，可设置每日新鲜事焦点以及跟踪待办事项，无广告，无弹窗。
The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡，在可配置的时间之后未查看的选项卡将在后台自动挂起，从而释放该选项卡消耗的内存和 CPU。
Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复，从而达到节省内存的作用。
Octotree 旨在让 GitHub 体验更好。通常，为了检查 Github 中的子文件夹，需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构，这有助于更好地理解文件夹结构。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。
ax DevTools 是一个快速、轻量级但功能强大的测试工具，由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。
OctoLinker 可以将特定语言的语句（如 include、require 或 import）转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时，只需将鼠标悬停在链接的文件上并单击即可打开。
此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。
Check My Links 是一个链接检查器，它可以抓取网页并查找损坏的链接。
Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告，该报告汇总了引起某种警告或错误的所有链接。
Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。
META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。
Ghostery 是强大的隐私保护扩展程序。其主要有以下功能：
AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。
番茄工作法（Pomodoro?）时间管理助理。? 长短两种休息时间 ? 带有倒计时显示的工具栏图标 ? 追踪Pomodoro历史和统计讯息 ? 可配置的长休间隔 ? 可配置的定时器时长 ? 桌面与新标签页通知 ? 超过20种音效可选的声音通知 ? 计时器秒针走动音效
Loom 可以用来快速录制视频，并且能够将录制的视频上传到指定的网页中，Loom还支持在用户点击启动插件时，立即捕捉屏幕图像，同时开始视频录制操作，还可以将录制好的视频复制到粘贴板中存储。
GoFullPage 是一款全屏截图插件（整个网页截图），完整捕获您当前页面的屏幕，进行滚动截图，而无需任何额外的权限。单击扩展程序图标，然后将其传输到屏幕快照的新标签页中，可以在其中将其下载为图像或PDF，甚至只需拖动即可，保存到桌面。
BetterViewer 可以提供更好的图像查看体验，旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时，只需在页面右键点击图片，选择“在新标签页中打开图片”即可。
svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。
hotoshop可以说是每个设计师都必须会用的设计工具之一了。为了设计要求，大家会在Photoshop里搭配一些PS插件来使用。这篇文章就为大家整理了22款最佳PS插件，一起来看看吧。
点击获取，ps全套插件合集，一键选装，自动识别ps版本
摹客iDoc是一个更快更简单的产品协作设计平台。摹客iDoc主要用户人群涵盖产品经理，设计师和工程师，其核心功能点包括：智能标注、一键切图、多样批注、快速交互、全貌画板、团队管理。从产品到开发，真正实现了只要一个文档，更加高效流畅的协作方式，降低沟通成本，提升产品效率。摹客iDoc支持PS。通过摹客iDoc PS插件，可以上传PS设计稿以进行标记切图等（摹客iDoc PS插件教程）。PS 中的设计稿上传至iDoc中后，可以进行以下操作：
GuideGuide是一款针对photoshop的辅助工具。通过这款软件，可以轻松的即可完成标准的辅助线，从而让设计师更轻松地进行作品制作，节约画图的时间。软件操作比较简单，只需要将插件载入PS中，即可完成各种辅助线的制作。
Lumenzia 是款Photoshop蒙版扩展插件，可以对PS中的图片进行添加城市风格的滤镜效果。插件支持对调整亮度、区域范围的各种效果，也可以自定义调整区域、添加颜色等。
Fluid Mask 3是一款可以帮助处理PS图像的工具。该插件中的编辑功能非常丰富，支持多种画笔工具，可以将抠图的照片加载到编辑区域，利用不同的画笔工具对其进行处理，从而优化PS图像；同事还支持边缘宽度调整、蒙版设计、色调调整、抓取、缩放、拍照等辅助功能。
Long Shadow Generator是一个Photoshop长投影插件。长投影效果在网页设计、UI元素与图标等设计上的应用很常见。这款 长投影插件除了支持4个方向的长投影，还支持设置投影长度等。
具体请看功能展示视频：如何使用Long Shadow Generator
CSS3Ps是一款PS图层转换软件，可以将图层转换为能在浏览器中查看的CSS3代码，方便直接在设计软件中添加相关的设计程序。其操作过程很简单，通过鼠标简单的操作就能完成转换任务。转换的时候，可以选择单个或多个图层，并通过点击转换实现批量处理功能。
Ink是一款帮助显示Photoshop图层详细信息的扩展插件。通过这款插件可以快速生成指定图层的详细信息，例如图层的信息、大小、颜色等，从而为前端提供图层信息。有了这款插件，设计师可以轻松输出规范文档，这样就不会因缺乏规范而导致不准确的前端输出。
具体请看使用教程：如何使用Ink
CSS Hat 是一款 PhotoShop 插件，能够把PSD效果图层自动转化为转换成CSS样式代码。此插件对于 Web 设计开发相关工作者相当有帮助，生成的 CSS 样式可以直接使用，可节省大量的时间。
标注、切图、交互、原型，2019年必备神器！[color=rgb(255, 255, 255) !important]立即体验iDoc
具体请看功能展示视频：如何使用CSS Hat
点击获取，ps全套插件合集，一键选装，自动识别ps版本
大家多多评论，提高推荐，阅读超过5000，小编将分享更给力的资源，或者大家有什么需求可以在评论区留言！
1、素材文件来源于互联网，素材版权归原作者所有
2、素材仅供个人学习研究，不得任何形式商用。如需商用，请联系原创作者购买版权，
否则带来版权法律问题，请自行负责
*请认真填写需求信息，我们会在24小时内与您取得联系。
