整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
為前端開發(fā)者，我們可以利用Web技術(shù)在非常多的環(huán)境下開發(fā)應(yīng)用，為相關(guān)的用戶提供服務(wù)。其中，以Photoshop為首的Adobe系列工具是我們時(shí)常要去面對(duì)的一個(gè)平臺(tái)級(jí)應(yīng)用。Photoshop在圖像處理上有著很強(qiáng)大的功能，用戶量也非常可觀，而且其功能在前端開發(fā)的一些情況下也用得到，因此筆者認(rèn)為Photoshop相關(guān)的Web技術(shù)具有很不錯(cuò)的價(jià)值。
本文將引導(dǎo)大家使用JavaScript開發(fā)一個(gè)Photoshop插件。
Adobe作為一家歷史悠久的軟件公司，已經(jīng)給開發(fā)者提供了相對(duì)成熟的擴(kuò)展開發(fā)技術(shù)棧，被稱作CEP——Common Extensibility Platform（通用擴(kuò)展平臺(tái)）。
CEP擴(kuò)展基于Web技術(shù)，可以在Adobe Photoshop、Adobe Illustrator、Adobe InDesign等全系列應(yīng)用中運(yùn)行，并且可以訪問(wèn)這些應(yīng)用和外部操作系統(tǒng)環(huán)境的API。
CEP應(yīng)用的結(jié)構(gòu)可以被分為五個(gè)抽象層級(jí)：
所謂宿主應(yīng)用，就是我們CEP擴(kuò)展運(yùn)行在的Adobe程序，例如Adobe Photoshop等，同時(shí)后文我們也默認(rèn)CEP的宿主程序是Adobe Photoshop
作為一個(gè)類Web應(yīng)用，上面四層相對(duì)前端開發(fā)者來(lái)說(shuō)都比較好理解，這一節(jié)我們來(lái)看下ExtendScript層：
ExtendScript腳本可以用三套不同語(yǔ)言去編寫，分別為JavaScript、VBScript和AppleScript。三種語(yǔ)言功能上沒(méi)有任何區(qū)別。鑒于本文面向的是各位前端工程師，我們果斷選擇前者，同時(shí)文章的后文我們也是默認(rèn)選擇JavaScript版本的ExtendScript。
ExtendScript有以下特點(diǎn)：
這里的.jsx文件和react用到的.jsx文件完全不同，如果你在自己的CEP應(yīng)用中引入了react，記得把它們分開以避免混淆
了解了Extendscript之后，我們?cè)賮?lái)看一下CEP擴(kuò)展各層級(jí)之間的橫向關(guān)系：
關(guān)于Photoshop中，ExtendScript具體可以調(diào)用的API，我們可以直接看Adobe的官方手冊(cè)：ADOBE PHOTOSHOP SCRIPTING[1]
在動(dòng)手開發(fā)前，我們先把運(yùn)行CEP擴(kuò)展的各種要素準(zhǔn)備齊全。
首先我們來(lái)看下CEP擴(kuò)展需要的目錄結(jié)構(gòu)：
這個(gè)工具庫(kù)大概一千多行，其中很大一部分是描述各個(gè)函數(shù)功能的注釋，所以可以直接通過(guò)閱讀注釋來(lái)學(xué)習(xí)這個(gè)工具庫(kù)的用法。
CEP擴(kuò)展中的JavaScript環(huán)境下本身就內(nèi)置了調(diào)用ExtendScript環(huán)境的類，引入的CSInterface.js是對(duì)環(huán)境里調(diào)用ExtendScript環(huán)境的類進(jìn)行封裝使得開發(fā)者更便于調(diào)用而已，所以引入CSInterface.js并不是必要的。
最后，我們要把建立好的CEP擴(kuò)展的目錄放到Photoshop指定的位置：
mac：~/Library/Application Support/Adobe/CEP/extensions
win：{Photoshop安裝路徑}\Required\CEP\extensions
這樣Photoshop就可以加載我們開發(fā)的擴(kuò)展，出現(xiàn)在其菜單欄中的「窗口」-「擴(kuò)展」中。
看了這么多概念，我們動(dòng)手試試吧！
新建CEP擴(kuò)展的目錄之后，我們嘗試在Photoshop菜單欄的「窗口」-「擴(kuò)展」中運(yùn)行擴(kuò)展，就發(fā)現(xiàn)了一個(gè)問(wèn)題：
這是因?yàn)槲覀冃陆ǖ腃EP擴(kuò)展沒(méi)有經(jīng)過(guò)簽名認(rèn)證。
為了繞過(guò)這個(gè)認(rèn)證，我們需要打開Photoshop的debug模式：
執(zhí)行完上面的操作后，你就可以在自己的Photoshop里運(yùn)行自己新建的擴(kuò)展了。
同時(shí)，如果你想調(diào)試自己的擴(kuò)展，可以在目錄指定位置中添加.debug文件：
.debug文件中，我們指定開發(fā)的應(yīng)用可以在哪個(gè)宿主應(yīng)用和哪個(gè)端口進(jìn)行調(diào)試：
<ExtensionList>
<!-- 1 -->
<Extension Id="com.example.helloworld">
<HostList>
<!-- 2 -->
<Host Name="PHXS" Port="8088"/>
<Host Name="PHSP" Port="8088"/>
</HostList>
</Extension>
</ExtensionList>然后，我們?cè)L問(wèn)在chrome瀏覽器中訪問(wèn)chrome://inspect/#devices，點(diǎn)擊「Port forwarding...」監(jiān)聽我們?cè)?span style="color: #DD1144; --tt-darkmode-color: #DD1144;">.debug中設(shè)置的端口，我們可以看到的自己的應(yīng)用：
熟悉移動(dòng)端調(diào)試的讀者一定對(duì)這個(gè)界面不陌生，我們找到自己的應(yīng)用并點(diǎn)開「inspect」，就可以在指定端口通過(guò)chrome的開發(fā)者工具來(lái)同步調(diào)試運(yùn)行的CEP擴(kuò)展了。
我們從前文提到的「CEP應(yīng)用結(jié)構(gòu)的五個(gè)層級(jí)」自下向上來(lái)構(gòu)建：
1. 首先，在Extendscript層，我們先在全局定義好「獲取所有文字圖層」和「刪除所有文字圖層」的功能函數(shù)：
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環(huán)境下，JavaScript僅兼容ES3，而且ExtendScript和CEP JavaScript之間只能通過(guò)字符串進(jìn)行通信，所以我們要在ExtendScript的環(huán)境下引入JSON3[5]作為JSON功能的polyfill（注意這和CEP的JavaScript無(wú)關(guān)）
2. 在CEP的JavaScript層，我們?cè)?span style="color: #DD1144; --tt-darkmode-color: #DD1144;">utils/cs.js中使用Promise封裝好界面上用得到的的hideLayers和getLayers函數(shù)——調(diào)用Extendscript中已經(jīng)定義好在全局的方法，并處理返回的字符串：
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來(lái)代替html展示UI），我們大致部署一下插件的界面，用兩個(gè)按鈕分別觸發(fā)「獲取所有文字圖層」和「刪除所有文字圖層」的功能。同時(shí)為了直觀一些，我們把獲取到的所有文字圖層在插件面板上顯示：
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}>
點(diǎn)擊獲取圖層
</button>
<button className="primary" onClick={hideLayers}>
點(diǎn)擊刪除全部文字圖層
</button>
<div className="area">
{layers && layers.length
? layers.map((e, i)=> (
<div key={i} className="layer">
{e}
</div>
))
: "無(wú)"}
</div>
</div>
);
};讓我們?cè)囋噭倓傞_發(fā)的功能，例如，當(dāng)我們點(diǎn)擊「點(diǎn)擊獲取圖層」的按鈕時(shí)，得到了如下的結(jié)果：
然后我們點(diǎn)擊右側(cè)「刪除所有文字圖層」后，是不是可以發(fā)現(xiàn)打開的psd文件中的文字圖層都消失了呢？
我把實(shí)例的項(xiàng)目放在了Lumpychen/CEP-Test[6]，大家有興趣可以自己嘗試。
現(xiàn)在我們的應(yīng)用可以在記得Photoshop中跑起來(lái)了，但是如果想讓自己的擴(kuò)展可以在設(shè)計(jì)師同事的Photoshop里運(yùn)行，我們不能給讓每個(gè)用戶都開啟一下debug模式，這太麻煩了。
在沒(méi)有進(jìn)入debug模式的情況，Adobe CEP 擴(kuò)展必須有簽名才能正常運(yùn)行，簽名分為兩種：
具體如何獲取證書、簽名打包，Adobe也提供了官方的教程：package-distribute-install-guide[7]
同時(shí)，Adobe官方也把下載、管理和更新CEP擴(kuò)展的功能集成到了Creative Cloud里，如果你安裝了Creative Cloud，它會(huì)連接Adobe Exchange——Adobe官方推出的擴(kuò)展市場(chǎng)，以獲取和更新我們安裝的擴(kuò)展。
如果你想把你自己開發(fā)的擴(kuò)展發(fā)布到Adobe Exchange上，Adobe官方也提供了Exchange Portal用來(lái)發(fā)布擴(kuò)展的渠道。
然而……
由于Adobe在中國(guó)的業(yè)務(wù)一直處于被閹割的狀態(tài)，且國(guó)內(nèi)通過(guò)Creative Cloud購(gòu)買正版Adobe應(yīng)用的用戶也相對(duì)有限，所以大家很少采用官方的渠道管理和獲取Adobe產(chǎn)品的CEP擴(kuò)展。
而國(guó)內(nèi)的Photoshop擴(kuò)展應(yīng)用的生態(tài)依然處于一個(gè)略微灰色的狀態(tài)，很多擴(kuò)展的發(fā)布和都依賴第三方社區(qū)（知乎、微信公眾號(hào)、淘寶）或素材網(wǎng)站，當(dāng)然這樣的生態(tài)也催生了我國(guó)互聯(lián)網(wǎng)的歷史上一批又一批的ps大神。
文章的最后，如果你想要開發(fā)一個(gè)Adobe CEP擴(kuò)展，我這邊強(qiáng)烈推薦幾個(gè)輔助用的工具：
Script Listener是Adobe社區(qū)里推出的輔助工具，可以隨時(shí)記錄用戶對(duì)Adobe宿主程序的操作，然后生成ExtendScript腳本文件在桌面上供用戶查看和選用——使用這種方式生成ExtendScript代碼，可以讓開發(fā)者省去很多學(xué)習(xí)Extendscript API的成本。
JSX.js是提供給CEP應(yīng)用的JavaScript環(huán)境一個(gè)JS庫(kù)，可以代替原生的方法來(lái)引入ExtendScript的文件或執(zhí)行Extendscript的代碼，它解決了一個(gè)很重要的痛點(diǎn)——提供了執(zhí)行ExtendScript的報(bào)錯(cuò)信息（這比起原生調(diào)用ExtendScript代碼執(zhí)行得到一句evalScript error體驗(yàn)要強(qiáng)上很多倍）
這是目前Adobe官方提供的，當(dāng)前版本唯一用來(lái)調(diào)試ExtendScript的工具。它是一個(gè)VSCode Debugger插件，可以像其它的VScode Debugger一樣，提供相關(guān)報(bào)錯(cuò)信息，實(shí)現(xiàn)斷點(diǎn)調(diào)試的功能。
家好，我是 Echa。
今天來(lái)分享 50 個(gè)超實(shí)用的 Chrome 瀏覽器擴(kuò)展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個(gè)JSON數(shù)據(jù)查看器，主要用來(lái)格式化JSON數(shù)據(jù)：
Library Sniffer 是一款給開發(fā)者使用的工具，能夠探測(cè)當(dāng)前網(wǎng)頁(yè)所使用的類庫(kù)、框架和服務(wù)器環(huán)境，為開發(fā)者提供了方便。
Wappalyzer 擴(kuò)展可以用來(lái)識(shí)別網(wǎng)站背后的底層技術(shù)。通過(guò)此擴(kuò)展，可以了解特定應(yīng)用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問(wèn)有關(guān) Web 服務(wù)器、編程語(yǔ)言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫(kù)等。
WhatRuns 擴(kuò)展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術(shù)。
使用PerfectPixel插件可以將設(shè)計(jì)圖加載至網(wǎng)頁(yè)中，與已成型的網(wǎng)頁(yè)進(jìn)行重疊對(duì)比，以幫助開發(fā)和設(shè)計(jì)人員規(guī)范網(wǎng)頁(yè)像素精度。這是一款可以優(yōu)化前端頁(yè)面顯示的Chrome插件。
可以使用此擴(kuò)展程序快速清除緩存，無(wú)需任何確認(rèn)對(duì)話框、彈出窗口等。可以在選項(xiàng)頁(yè)面上自定義要清除的數(shù)據(jù)和數(shù)量，包括：應(yīng)用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫(kù)、本地存儲(chǔ)、插件數(shù)據(jù)、密碼和 WebSQL。
VisBug 是一個(gè)使用 JavaScript 構(gòu)建的開源網(wǎng)頁(yè)設(shè)計(jì)調(diào)試工具，它可以讓用戶使用點(diǎn)擊式和拖放式界面來(lái)查看網(wǎng)站的元素。
Debug CSS 是一個(gè)幫助調(diào)試CSS的插件。他可以顯示出頁(yè)面元素的輪播，按住Ctrl，并將鼠標(biāo)懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發(fā)人員的高效 Chrome 擴(kuò)展。顧名思義，CSS 查看器可以顯示將鼠標(biāo)懸停在任何網(wǎng)頁(yè)上的元素的 CSS 屬性。
EditThisCookie 是一個(gè) cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫(kù) React 的 Chrome DevTools 擴(kuò)展。它允許我們?cè)?Chrome 開發(fā)者工具中檢查 React 組件層次結(jié)構(gòu)。安裝此插件之后，將在 Chrome DevTools 中獲得兩個(gè)新選項(xiàng)卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件，可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對(duì)DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試功能。
Augury 可以幫助開發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應(yīng)用程序。
Firebug Lite是火狐瀏覽器中著名的開發(fā)者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來(lái)調(diào)試網(wǎng)頁(yè)內(nèi)容，其包含了基本的HTML、CSS以及Javascript的調(diào)試功能，用于幫助網(wǎng)頁(yè)前端開發(fā)工程師快速地調(diào)試網(wǎng)頁(yè)，以便及時(shí)地找到網(wǎng)頁(yè)中的BUG并及時(shí)修復(fù)。
HTML Validator 在 Chrome 的開發(fā)者工具中添加了 HTML Validator。HTML 頁(yè)面的錯(cuò)誤數(shù)通過(guò)瀏覽器狀態(tài)欄中的圖標(biāo)顯示，詳細(xì)信息可以在瀏覽器的開發(fā)者工具中查看。
Web Developer 擴(kuò)展為帶有各種 Web 開發(fā)工具的瀏覽器添加了一個(gè)工具欄按鈕。該擴(kuò)展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺(tái)上運(yùn)行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉(zhuǎn)發(fā)、修改HTTP請(qǐng)求和結(jié)果、插入腳本等功能。
Window Resizer 主要用來(lái)調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個(gè)視圖中顯示多個(gè)屏幕的 Chrome 擴(kuò)展程序。該擴(kuò)展將幫助前端開發(fā)人員在開發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時(shí)測(cè)試多個(gè)屏幕。
此插件允許直接從瀏覽器發(fā)送跨域請(qǐng)求，而不會(huì)收到跨域錯(cuò)誤。可以使用此插件覆蓋 Request Origin 標(biāo)頭，并將 Access-Control-Allow-Origin 設(shè)置為 *.
ColorPick Eyedropper 是一個(gè)放大的吸管和顏色選擇器工具，可讓從網(wǎng)頁(yè)等中選擇顏色值。
CSS Peeper 用于檢查和復(fù)制元素樣式的優(yōu)秀工具，使用 CSSPeeper 可以將鼠標(biāo)懸停在網(wǎng)頁(yè)中的任何元素上，然后單擊鼠標(biāo)即可復(fù)制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對(duì)網(wǎng)頁(yè)上各種元素屬性之間的距離進(jìn)行測(cè)量的Chrome頁(yè)面元素測(cè)量插件，該插件在點(diǎn)擊啟動(dòng)插件圖標(biāo)后，可以對(duì)頁(yè)面中圖像、輸入字段、按鈕以及視頻等頁(yè)面元素之間上下左右的方位尺寸進(jìn)行測(cè)量，同時(shí)還可以通過(guò)使用快捷鍵來(lái)快速啟用或關(guān)閉該插件的功能，簡(jiǎn)單實(shí)用。
Site Palette 用于生成調(diào)色板。設(shè)計(jì)師和前端開發(fā)人員必備的工具。可以通過(guò)這款插件輕松獲取網(wǎng)站的配色方案。
ColorZilla 是一款功能強(qiáng)大地提取網(wǎng)頁(yè)色彩的工具；也是個(gè)快速的對(duì)顏色進(jìn)行調(diào)節(jié)的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產(chǎn)css顏色的代碼等。
當(dāng)我們想查看網(wǎng)頁(yè)中文字的字體時(shí)，最常用的方法就是在控制臺(tái)查看文字的字體樣式。那還有沒(méi)有更簡(jiǎn)單的方法呢？WhatFont 就是一個(gè)查看網(wǎng)頁(yè)字體的Chrome擴(kuò)展。只需要的點(diǎn)擊擴(kuò)展圖標(biāo)，再點(diǎn)需要查看為文字即可：
Fonts Ninja 可以從任何網(wǎng)站識(shí)別字體、添加書簽、試用并購(gòu)買它們。
使用 BrowserStack 快速啟動(dòng)擴(kuò)展在任何瀏覽器中啟動(dòng)一個(gè)新的測(cè)試會(huì)話。最多可設(shè)置 12 個(gè)瀏覽器以實(shí)現(xiàn)快速訪問(wèn)并最大限度地減少切換瀏覽器所花費(fèi)的時(shí)間。
Toby 是一款 Chrome 新標(biāo)簽頁(yè)工具，能夠?qū)⑽醋x的標(biāo)簽頁(yè)分組顯示在新標(biāo)簽頁(yè)中，這樣就能把所有未看完的標(biāo)簽頁(yè)都關(guān)閉了。分組相當(dāng)于多個(gè) Chrome 窗口，將你的標(biāo)簽頁(yè)都拖進(jìn) Toby 中，就不需要實(shí)時(shí)開著占地方了。
該擴(kuò)展提供了每日熱門開發(fā)者新聞，不需要再浪費(fèi)時(shí)間搜索高質(zhì)量的文章了。
Momentum 擁有漂亮的新標(biāo)簽頁(yè)面，每日更新精彩背景壁紙圖片，可設(shè)置每日新鮮事焦點(diǎn)以及跟蹤待辦事項(xiàng)，無(wú)廣告，無(wú)彈窗。
The Great Suspender 是一個(gè)輕量級(jí)的擴(kuò)展用來(lái)減少 Chrome 的內(nèi)存占用。如果同時(shí)打開許多選項(xiàng)卡，在可配置的時(shí)間之后未查看的選項(xiàng)卡將在后臺(tái)自動(dòng)掛起，從而釋放該選項(xiàng)卡消耗的內(nèi)存和 CPU。
Session Buddy是一個(gè)可以幫助用戶查看、新增、編輯當(dāng)前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當(dāng)前的狀態(tài)以便在關(guān)閉Chrome或關(guān)閉計(jì)算機(jī)后恢復(fù)，從而達(dá)到節(jié)省內(nèi)存的作用。
Octotree 旨在讓 GitHub 體驗(yàn)更好。通常，為了檢查 Github 中的子文件夾，需要手動(dòng)單擊文件夾并導(dǎo)航。Octotree 擴(kuò)展解決了這個(gè)問(wèn)題。此擴(kuò)展在項(xiàng)目的左側(cè)顯示存儲(chǔ)庫(kù)的目錄結(jié)構(gòu)，這有助于更好地理解文件夾結(jié)構(gòu)。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標(biāo)替換為特定文件類型的圖標(biāo)。
ax DevTools 是一個(gè)快速、輕量級(jí)但功能強(qiáng)大的測(cè)試工具，由 Deque 開發(fā)的世界上最值得信賴的可訪問(wèn)性測(cè)試引擎 axe-core 驅(qū)動(dòng)。使用 ax DevTools 在網(wǎng)站開發(fā)過(guò)程中查找并修復(fù)更多可訪問(wèn)性問(wèn)題。
OctoLinker 可以將特定語(yǔ)言的語(yǔ)句（如 include、require 或 import）轉(zhuǎn)換為鏈接。當(dāng)打開一個(gè)包含多個(gè)導(dǎo)入語(yǔ)句的文件并且想要快速打開它時(shí)，只需將鼠標(biāo)懸停在鏈接的文件上并單擊即可打開。
此擴(kuò)展可幫助 Web 開發(fā)人員分析網(wǎng)頁(yè)是否違反最佳實(shí)踐。
Check My Links 是一個(gè)鏈接檢查器，它可以抓取網(wǎng)頁(yè)并查找損壞的鏈接。
Checkbot 是用于驗(yàn)證一組HTML頁(yè)面上的鏈接的工具。Checkbot可以檢查一個(gè)或多個(gè)服務(wù)器上的單個(gè)文檔或一組文檔。它會(huì)創(chuàng)建一個(gè)報(bào)告，該報(bào)告匯總了引起某種警告或錯(cuò)誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁(yè)、提高網(wǎng)頁(yè)加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網(wǎng)頁(yè)的meta信息并得到SEO評(píng)估的谷歌瀏覽器插件。
Ghostery 是強(qiáng)大的隱私保護(hù)擴(kuò)展程序。其主要有以下功能：
AdBlock 用來(lái)在YouTube、Facebook、Twitch和其他你喜愛的網(wǎng)站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時(shí)間管理助理。? 長(zhǎng)短兩種休息時(shí)間 ? 帶有倒計(jì)時(shí)顯示的工具欄圖標(biāo) ? 追蹤Pomodoro歷史和統(tǒng)計(jì)訊息 ? 可配置的長(zhǎng)休間隔 ? 可配置的定時(shí)器時(shí)長(zhǎng) ? 桌面與新標(biāo)簽頁(yè)通知 ? 超過(guò)20種音效可選的聲音通知 ? 計(jì)時(shí)器秒針走動(dòng)音效
Loom 可以用來(lái)快速錄制視頻，并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁(yè)中，Loom還支持在用戶點(diǎn)擊啟動(dòng)插件時(shí)，立即捕捉屏幕圖像，同時(shí)開始視頻錄制操作，還可以將錄制好的視頻復(fù)制到粘貼板中存儲(chǔ)。
GoFullPage 是一款全屏截圖插件（整個(gè)網(wǎng)頁(yè)截圖），完整捕獲您當(dāng)前頁(yè)面的屏幕，進(jìn)行滾動(dòng)截圖，而無(wú)需任何額外的權(quán)限。單擊擴(kuò)展程序圖標(biāo)，然后將其傳輸?shù)狡聊豢煺盏男聵?biāo)簽頁(yè)中，可以在其中將其下載為圖像或PDF，甚至只需拖動(dòng)即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗(yàn)，旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時(shí)，只需在頁(yè)面右鍵點(diǎn)擊圖片，選擇“在新標(biāo)簽頁(yè)中打開圖片”即可。
svg-grabber 是一個(gè)快速預(yù)覽并從網(wǎng)站獲取所有 svg 的工具。可以用來(lái)預(yù)覽、下載和復(fù)制網(wǎng)站中所有 SVG 圖標(biāo)和插圖的代碼。
hotoshop可以說(shuō)是每個(gè)設(shè)計(jì)師都必須會(huì)用的設(shè)計(jì)工具之一了。為了設(shè)計(jì)要求，大家會(huì)在Photoshop里搭配一些PS插件來(lái)使用。這篇文章就為大家整理了22款最佳PS插件，一起來(lái)看看吧。
點(diǎn)擊獲取，ps全套插件合集，一鍵選裝，自動(dòng)識(shí)別ps版本
摹客iDoc是一個(gè)更快更簡(jiǎn)單的產(chǎn)品協(xié)作設(shè)計(jì)平臺(tái)。摹客iDoc主要用戶人群涵蓋產(chǎn)品經(jīng)理，設(shè)計(jì)師和工程師，其核心功能點(diǎn)包括：智能標(biāo)注、一鍵切圖、多樣批注、快速交互、全貌畫板、團(tuán)隊(duì)管理。從產(chǎn)品到開發(fā)，真正實(shí)現(xiàn)了只要一個(gè)文檔，更加高效流暢的協(xié)作方式，降低溝通成本，提升產(chǎn)品效率。摹客iDoc支持PS。通過(guò)摹客iDoc PS插件，可以上傳PS設(shè)計(jì)稿以進(jìn)行標(biāo)記切圖等（摹客iDoc PS插件教程）。PS 中的設(shè)計(jì)稿上傳至iDoc中后，可以進(jìn)行以下操作：
GuideGuide是一款針對(duì)photoshop的輔助工具。通過(guò)這款軟件，可以輕松的即可完成標(biāo)準(zhǔn)的輔助線，從而讓設(shè)計(jì)師更輕松地進(jìn)行作品制作，節(jié)約畫圖的時(shí)間。軟件操作比較簡(jiǎn)單，只需要將插件載入PS中，即可完成各種輔助線的制作。
Lumenzia 是款Photoshop蒙版擴(kuò)展插件，可以對(duì)PS中的圖片進(jìn)行添加城市風(fēng)格的濾鏡效果。插件支持對(duì)調(diào)整亮度、區(qū)域范圍的各種效果，也可以自定義調(diào)整區(qū)域、添加顏色等。
Fluid Mask 3是一款可以幫助處理PS圖像的工具。該插件中的編輯功能非常豐富，支持多種畫筆工具，可以將摳圖的照片加載到編輯區(qū)域，利用不同的畫筆工具對(duì)其進(jìn)行處理，從而優(yōu)化PS圖像；同事還支持邊緣寬度調(diào)整、蒙版設(shè)計(jì)、色調(diào)調(diào)整、抓取、縮放、拍照等輔助功能。
Long Shadow Generator是一個(gè)Photoshop長(zhǎng)投影插件。長(zhǎng)投影效果在網(wǎng)頁(yè)設(shè)計(jì)、UI元素與圖標(biāo)等設(shè)計(jì)上的應(yīng)用很常見。這款 長(zhǎng)投影插件除了支持4個(gè)方向的長(zhǎng)投影，還支持設(shè)置投影長(zhǎng)度等。
具體請(qǐng)看功能展示視頻：如何使用Long Shadow Generator
CSS3Ps是一款PS圖層轉(zhuǎn)換軟件，可以將圖層轉(zhuǎn)換為能在瀏覽器中查看的CSS3代碼，方便直接在設(shè)計(jì)軟件中添加相關(guān)的設(shè)計(jì)程序。其操作過(guò)程很簡(jiǎn)單，通過(guò)鼠標(biāo)簡(jiǎn)單的操作就能完成轉(zhuǎn)換任務(wù)。轉(zhuǎn)換的時(shí)候，可以選擇單個(gè)或多個(gè)圖層，并通過(guò)點(diǎn)擊轉(zhuǎn)換實(shí)現(xiàn)批量處理功能。
Ink是一款幫助顯示Photoshop圖層詳細(xì)信息的擴(kuò)展插件。通過(guò)這款插件可以快速生成指定圖層的詳細(xì)信息，例如圖層的信息、大小、顏色等，從而為前端提供圖層信息。有了這款插件，設(shè)計(jì)師可以輕松輸出規(guī)范文檔，這樣就不會(huì)因缺乏規(guī)范而導(dǎo)致不準(zhǔn)確的前端輸出。
具體請(qǐng)看使用教程：如何使用Ink
CSS Hat 是一款 PhotoShop 插件，能夠把PSD效果圖層自動(dòng)轉(zhuǎn)化為轉(zhuǎn)換成CSS樣式代碼。此插件對(duì)于 Web 設(shè)計(jì)開發(fā)相關(guān)工作者相當(dāng)有幫助，生成的 CSS 樣式可以直接使用，可節(jié)省大量的時(shí)間。
標(biāo)注、切圖、交互、原型，2019年必備神器！[color=rgb(255, 255, 255) !important]立即體驗(yàn)iDoc
具體請(qǐng)看功能展示視頻：如何使用CSS Hat
點(diǎn)擊獲取，ps全套插件合集，一鍵選裝，自動(dòng)識(shí)別ps版本
大家多多評(píng)論，提高推薦，閱讀超過(guò)5000，小編將分享更給力的資源，或者大家有什么需求可以在評(píng)論區(qū)留言！
1、素材文件來(lái)源于互聯(lián)網(wǎng)，素材版權(quán)歸原作者所有
2、素材僅供個(gè)人學(xué)習(xí)研究，不得任何形式商用。如需商用，請(qǐng)聯(lián)系原創(chuàng)作者購(gòu)買版權(quán)，
否則帶來(lái)版權(quán)法律問(wèn)題，請(qǐng)自行負(fù)責(zé)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
