sketch插件开发

2023-10-26 22:17:52

运行脚本

使用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允许管理发布，并从命令行自动提交到插件列表，实现以下步骤:

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

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

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

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

手动提交

注意

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

公正插件

使用skpm

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

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

在应用商店连接上用您的团队名称替换TEAM
将AC_USERNAME替换为应用商店连接用户名（通常是电子邮件地址）
使用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.

手动使用命令行

使用终端中的以下命令在框架或二进制文件上签名。标识符必须与 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

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

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

将 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"

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

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

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

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

更新插件

使用skpm

更新插件清单中指定的插件版本
创建可下载的 ZIP 存档
创建 GitHub 版本
更新.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/

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 插件开发大概有如下三种方式

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

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

CocoaScript

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

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

参考网址：

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

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

码农公寓

运行脚本

创建插件

安装

创建插件模版

插件模版目录

注意

目录说明

manifest.json

command.js

sketch中运行插件

修改插件内容

注意：

sketch插件说明

调试插件

插件开发前设置

崩溃保护

插件缓存

WebView 调试

sketch Devtools插件

发布插件

使用skpm

手动提交

注意

公正插件

使用skpm

注意

手动使用命令行

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

更新插件

自定义内置编辑器

sketch中预装node模块

Action API

MODELS

Layers

API

Sketch JS API

CocoaScript

相关文章

`manifest.json`