sketch插件开发

运行脚本

使用sketch内置脚本编辑器运行脚本

创建插件

安装

// 全局安装skpm脚手架
cnpm install -g skpm

// 查看使用说明以查看所有可用的命令
skpm --help

创建插件模版

cd 文件夹
skpm create my-plugin

// skpm将自动将一个符号链接添加到Sketch插件安装文件夹，使插件立即在Sketch中可用

插件模版目录

.
├── README.md
├── assets
│   └── icon.png
├── my-plugin.sketchplugin
│   └── Contents
│       ├── Resources
│       │   └── icon.png
│       └── Sketch
│           ├── manifest.json
│           ├── my-command.js
│           └── my-command.js.map
├── node_modules
├── package-lock.json
├── package.json
└── src
    ├── manifest.json
    └── my-command.js

注意

更改文件夹结构时，如有必要，请务必调整package.json skpm设置

目录说明

文件夹	描述
*.sketchplugin	skpm 生成过程生成skpm插件捆绑包。不要编辑此文件夹中的任何文件，任何更改都将用下一个版本覆盖
assets	与插件捆绑的任何资源文件的文件夹。要使用不同的路径或添加文件夹，请修改package.json skpm.assets设置
src	编写程序目录

manifest.json

{
  "name": "Mock",
  "description": "Mock some content",
  "author": "QCM",
  "$schema": "https://raw.githubusercontent.com/sketch-hq/SketchAPI/develop/docs/sketch-plugin-manifest-schema.json",
  "icon": "icon.png", // 插件图标
  "commands": [
    {
      "name": "Name", // sketch插件命令名称，显示在Sketch Plugin菜单中
      "identifier": "my-plugin.my-command-identifier", // 唯一标识，建议用 com.xxxx.xxx 格式，不要过长
      "script": "./name.js" // 插件执行脚本，实现命令功能的函数所在的脚本
      "shortcut": "", // 命令的快捷键
      "handler": "", // 函数名，该函数实现命令的功能。Sketch 在调用该函数时，会传入 context 上下文参数。若未指定 handler，Sketch 会默认调用对应 script 中 onRun 函数
    }
  ],
  "menu": {
    "title": "Name", // sketch插件名称
    "items": [
      "my-plugin.my-command-identifier"
    ]
  }
}

一个或多个 scripts 文件（包含用 CocoaScript 或 JavaScript 编写的脚本），它实现了 Plugins 菜单中显示的命令，以及任意数量的共享库脚本和资源文件

具体字段说明可参考官方文档：https://developer.sketch.com/plugins/plugin-manifest

command.js

const sketch = require('sketch')
const { randomEmoji } = require('./shared')

var onRun = function(context) {
  sketch.UI.message(`Hello Sketch ${randomEmoji()}`)
}

sketch中运行插件

修改插件内容

修改src/my-command.js文件

import sketch from 'sketch'

// 打印出选中图层个数
export default function() {
  const doc = sketch.getSelectedDocument()
  const selectedLayers = doc.selectedLayers
  const selectedCount = selectedLayers.length

  if (selectedCount === 0) {
    sketch.UI.message('No layers are selected.')
  } else {
    sketch.UI.message(`${selectedCount} layers selected.`)
  }
}
// 要验证插件已更新，请创建或打开sketch并选择某些图层。当您再次从插件菜单中运行插件时，您现在应该会看到带有所选图层数的消息

// 构建插件
npm run build
或者
yarn build

// 通过运行npm run watch来在进行更改后自动重建插件

注意：

当执行插件时，其实是执行的src/my-command.js文件

sketch插件说明

Sketch Plugin是一个或多个 scripts 的集合，每个 script 定义一个或多个 commands。Sketch Plugin 是以 .sketchplugin 扩展名的文件夹，包含文件和子文件夹

调试插件

// 检查使用 Webview 构建的插件用户界面，您需要设置用户默认值
defaults write com.bohemiancoding.sketch3 WebKitDeveloperExtras -bool YES

// 默认情况下，出于性能原因，草图缓存插件。插入器的更改不会自动识别。要强制 Sketch 在运行前始终重新加载插件，在用户默认值中设置以下值
defaults write com.bohemiancoding.sketch3 AlwaysReloadScript -bool YES

// 插件更改后自动重新启动草图
brew install entr

// 手动清除插件缓存
插件缓存包含当前和以前安装的插件版本。要清除缓存，请从以下处删除特定插件的文件夹或整个缓存PluginsWarehouse
~/Library/Application Support/com.bohemiancoding.sketch3/PluginsWarehouse

// 如果插件导致 Sketch 崩溃，Sketch 默认情况下使用安全模式，下次启动时禁用所有插件。可以通过设置用户默认值来禁用此行为
defaults write com.bohemiancoding.sketch3 disableAutomaticSafeMode YES

// 如果您使用的是测试版，则需要运行
defaults write com.bohemiancoding.sketch3.beta disableAutomaticSafeMode YES

// 要恢复默认行为，请删除用户默认值
defaults delete com.bohemiancoding.sketch3 disableAutomaticSafeMode

插件开发前设置

崩溃保护

// 当 Sketch 运行发生崩溃，它会停用所有插件以避免循环崩溃。对于使用者，每次崩溃重启后手动在菜单栏启用所需插件非常繁琐。因此可以通过如下命令禁用该特性
defaults write com.bohemiancoding.sketch3 disableAutomaticSafeMode true

插件缓存

// 通过配置启用或禁用缓存机制：
defaults write com.bohemiancoding.sketch3 AlwaysReloadScript -bool YES

WebView 调试

// 如果插件实现方案使用 WebView 做界面，可通过以下配置开启调试功能
defaults write com.bohemiancoding.sketch3 WebKitDeveloperExtras -bool YES

sketch Devtools插件

https://github.com/skpm/sketch-dev-tools

下载并安装，双击.sketchplugin文件进行安装

发布插件

使用skpm

如果插件托管在 GitHub 上skpm允许管理发布，并从命令行自动提交到插件列表，实现以下步骤:

1. 创建可下载的 ZIP 存档
2. 创建 GitHub 版本
3. 添加或更新.appcast.xml将最新的发布信息添加到存储库
4. 在plugin-directory上打开拉取请求，以便将插件包含在正式列表中

// 在插件文件夹中运行skpm
skpm publish

// 查看使用说明
skpm publish --help

// 如果尚未使用gitHub存储库skpm则需要首先使用个人访问令牌从命令行登录，从而授予对存储库范围的访问权限
skpm login

手动提交

注意

建议使用第一种方式，简单方便

公正插件

使用skpm

1. 打开或创建插件包旁边的新.skpmrc文件package.json并添加公证设置

   notarization:
     authority: 'Developer ID Application: TEAM'
     username: 'AC_USERNAME'
     password: 'AC_PASSWORD'
   

2. 在应用商店连接上用您的团队名称替换TEAM

3. 将AC_USERNAME替换为应用商店连接用户名（通常是电子邮件地址）

4. 使用AC_PASSWORD钥匙链密码存储部分描述的应用特定密码或钥匙链项替换AC_PASSWORD

一旦所有信息都存在skpm将自动公证您的插件。

注意

**快速提示：**要使用您自己的公证机制并与skpm集成，请在.skpmrc公证设置中提供命令：

notarization:
  command: './notarize-plugin.sh'

skpm将捆绑您的插件，创建其 ZIP 存档，然后自动运行您的命令，将路径作为参数传递到存档，例如./notarize-plugin.sh path/to/select-shapes.sketchplugin-1.0.zip.

手动使用命令行

1. 使用终端中的以下命令在框架或二进制文件上签名。标识符必须与 Xcode 中插件框架的捆绑标识符匹配，这可能与清单中的插件标识符不同

   codesign -f -s "Developer ID Application: Bob Ross" --timestamp --identifier "com.example.sketch.plugin.select-shapes.framework" --deep --options runtime path/to/select-shapes.sketchplugin/Content/Sketch/SelectShapes.framework
   

2. 创建包含原生框架或二进制文件的.sketchplugin捆绑包的 ZIP 存档

   /usr/bin/ditto -c -k --keepParent path/to/select-shapes.sketchplugin path/to/select-shapes.sketchplugin-1.0.zip
   

3. 将 ZIP 存档提交给 Apple 进行公证。标识符可以是任何你想要的，只要它是独特的，对你有道理（苹果只使用他们的状态报告中的标识符）

   xcrun altool --notarize-app -f path/to/select-shapes.sketchplugin-1.0.zip --primary-bundle-id "com.example.sketch.plugin.select-shapes" -u "user@example.com" -p "app-specific-password"
   

4. 在发布插件之前，请等待 Apple 的公证电子邮件确认

**注：**如果您对插件框架进行了任何更改，则需要再次进行公证

使用帮手插件：素描公证助理

具体可以参考官方文档，此处就不做过多说明了

更新插件

使用skpm

1. 更新插件清单中指定的插件版本
2. 创建可下载的 ZIP 存档
3. 创建 GitHub 版本
4. 更新.appcast.xml最新的发布信息

运行以下命令，提供特定版本编号或按patch、minor版本或major号更新现有版本。更多可用选项请参阅skpm publish --help

skpm publish <version>

自定义内置编辑器

1.使用自定义字体
将scriptEditorFont喜欢设置为自定义字体的名称，例如 SF 单声道光
defaults write com.bohemiancoding.sketch3 scriptEditorFont "SF Mono Light"

2.使用scriptEditorFontSize首选项调整字体大小设置。默认值为 12
defaults write com.bohemiancoding.sketch3 scriptEditorFontSize 14

3.重置字体
要恢复任何更改，请删除用户首选项，以缩小字体大小
defaults delete com.bohemiancoding.sketch3 scriptEditorFont
defaults delete com.bohemiancoding.sketch3 scriptEditorFontSize

sketch中预装node模块

• child_process
• console
• events
• fetch
• fs
• os
• process
• querystring
• stream
• String_decoder
• timers
• util

Action API

官方文档地址：

https://developer.sketch.com/reference/action/

Javascript API

https://developer.sketch.com/reference/api/

MODELS

• Document文档
• Library
• Importable Object
• Style
• Shared Style
• Symbol Override
• Flow
• Export Format
• Selection
• Point
• CurvePoint
• Rectangle
• fromNative
• Assets

Layers

• Layers
• Group
• Page
• Artboard
• Shape
• Image
• ShapePath
• Text
• Symbol Source
• Symbol Instance
• HopSpot
• Slice

API

• Settings
• UI
• Data Supplier
• async
• export
• import
• find

Sketch JS API

Sketch 插件开发大概有如下三种方式

1. 纯使用 CocoaScript 脚本进行开发
2. 通过 Javascript + CocoaScript 的混合开发模式
3. 通过 AppKit + Objective-C 进行开发

官方建议使用第二种方式进行sketch插件进行开发，若需要更丰富的底层 API 需结合 CocoaScript 进行实现

CocoaScript

实现 JavaScript 运行环境到 Objective-C 运行时的桥接功能，可通过桥接器编写 JavaScript 外部脚本访问内部 Sketch API 和 macOS 框架底层丰富的 API 功能

借助 CocoaScript 使用 JavaScript 调 Objective-C 语法

参考网址：

1. https://developer.sketch.com/reference/api/（官方文档）
2. https://developer.sketchapp.boltdoggy.com/ （中文文档）
3. https://www.sketch.com/extensions/plugins/（官方常见sketch插件）

github demo地址：
https://github.com/qiaochunmei/my-plugin