Alfred快速启动开发环境

QQ音乐技术团队

发布于 2020-06-24 11:10:12

3.3K0

发布于 2020-06-24 11:10:12

文章被收录于专栏：QQ音乐技术团队的专栏

Alfred是一款Mac系统必装软件，他提供快速启动App、全文查找文件、workflow自动化流程等功能。本文介绍如何使用Alfred Workflow+Apple Script实现快速启动开发环境。

问题 & 设想

先梳理下，我在日常启动前端的工作环境时，需要手动操作的步骤：

打开Webstorm并选择开发项目（10秒）
打开iterm命令行工具，并cd到项目下（5秒）
打开whistle代理（5秒）
打开chrome浏览器工作必须的插件，比如代理插件、react、vue调试插件（20秒）
打开chrome inspect和whistle代理配置页面（10秒）
开发完成后，逐一关闭浏览器工作插件（20秒）

从“日常使用”切换到“工作环境”整个过程大概半分钟左右，非常繁琐，在开始写代码前就让人产生劝退情绪。开发完成切换回“日常使用”也是痛苦的，要一个个去关闭浏览器插件，否则可能会遇到代理插件看视频卡顿、调试插件报错影响等等问题。

所以我们的设想是，通过Alfred实现一条指令自动完成上述的所有操作，最终效果如下：

Alfred Workflows是什么？

Alfred Workflows提供一个可拖拽的流程图界面，让我们将指令、系统动作、脚本等关联起来，构建我们想要的工作流程。

Alfred Workflows支持的编程语言有Bash、Python、PHP、JS（osacript）、Apple Script等等。

我们需要按照使用场景来选择编程语言，比说Python是mac系统预装的语言，Python内置很多实用的方法，比如http请求、文件读写等等接口，所以用Python来写Workflows会非常方便，PHP同理。

但如果想用JS来写，Mac系统预装的JS是osacript-JS，主要是用来调用封装好的Mac原生接口，没有发请求的功能，涉及到请求、命令行相关的操作就比较麻烦。而如果我们想用NodeJS来写，编写出来的指令就会有局限性，因为系统没有预装NodeJS编译工具，要求用户在使用前必须安装NodeJS。

所以不同的场景用不同的编程语言。

通过Alfred强大的定制，我们可以实现二维码生成、打开书签、页面爬虫展示等等指令。下面展示Open Google指令流程图，可以清晰看到看到指令触发脚本，再对脚本结果判断，最后执行特定动作的整个过程：

Open Google指令实现“启动VPN并查询谷歌”，我们在Alfred中输入指令gg alfred，ExpressVPN启动后自动进行连接，连接成功后，再打开Safari浏览器，并访问谷歌查询alfred信息：

编写Apple Script

大家都是开发，可以嚣张点，像编程语言、命令行等内容就无需赘述了。这里主要介绍下Apple Script的基本格式、如何查询App接口文档、如何调试Apple Script。

Apple Script是一套非常简单、高度语义化的编程语言，支持调用系统和App软件操作接口，格式如下：

tell application "Google Chrome"
    activate
end tell

我们能看到，Apple Script表达非常直白：告诉应用“Google Chrome”去启动，即启动Chrome浏览器。

语法也足够简单，用关键字tell进入应用作用域，在作用域中我们就可以调用该应用的API了，比如上述的activate，还可以通过关键字get获取应用的属性，或通过关键字set设置应用的属性。

为了展示这些基本用法，下面让我们打开Chrome浏览器并跳转到全民K歌的首页：

tell application "Google Chrome"
    activate

    get front window's active tab

    set front window's active tab's URL to "https://kg.qq.com"
end tell

这段代码如果在Alfred Workflows中进行调试会比较麻烦，其中既没有语法高亮和格式化，也没有报错提示。

所以推荐使用Mac系统自带的Script Editor.app（脚本编辑器）来调试Apple Script代码，其中代码编译后会自动的格式化和高亮，并有日子输出报错信息，满足开发基础条件。我们用Alfred呼起脚本编辑器：

将上面的代码拷贝进去后点击执行就可以看到运行效果：

调试成功后，就可以把代码拷贝到Alfred Workflows中了：

那应用的API文档在哪里查阅呢？

我们可以在Script Editor.app的文件->打开字典找到所有应用的API文档介绍，比如Chrome浏览器的文档中就列举了我们用到的active tab、get、set等语法介绍：

如何初始化工作环境

经过上面章节我们都了解Apple Script基本语法后，这里开始介绍如何自动启动Chrome浏览器插件。这里利用了两个前提条件：

chrome“扩展程序”页面提供JS接口开启/关闭插件
chrome浏览器的Apple Script接口提供执行JS代码的能力

首先我们打开chrome://extensions/扩展程序页面，在F12控制台下运行以下命令就可以开启/关闭扩展插件：

chrome.management.setEnabled("padekgcemlokbadohgkifijomclgjgif", true)

其中第一个参数padekgcemlokbadohgkifijomclgjgif是插件的ID，我们可以在插件详情页面中找到：

那么接下来就是打开Apple Script字典，查看Chrome执行JS代码接口的调用方式，我们能找到excute指令用来执行JS代码片段：

知道这两个必要的知识点后，我们就可以编写出完整的Apple Script代码如下：

to splitString(aString, delimiter)
    set retVal to {}
    set prevDelimiter to AppleScript's text item delimiters
    log delimiter
    set AppleScript's text item delimiters to {delimiter}
    set retVal to every text item of aString
    set AppleScript's text item delimiters to prevDelimiter
    return retVal
end splitString

# 这里填写你要开启/关闭的插件ID，用逗号分隔，ID在插件详情页中查找
set extensionID to "padekgcemlokbadohgkifijomclgjgif,lmhkpmbekcpmknklioeibfkpmmfibljd,nhdogjmejiglipccpnnnanhbledajbpd"
set tmp to splitString(extensionID, ",")

tell application "Google Chrome"
    activate

    try
        get front window's active tab
    on error
        make new window with properties {visible:true}
    end try

    tell front window
        # 新建标签页并打开扩展程序页面
        make new tab at after (get active tab) with properties {URL:"chrome://extensions"}

        # 等待0.5秒扩展页面渲染
        delay (0.5)

        # 遍历插件ID，执行JS代码启动插件
        repeat with anItem in tmp
            set js_code to ("chrome.management.setEnabled('" & anItem & "', true);")
            execute active tab javascript js_code
        end repeat

        # 关闭扩展程序页面
        close active tab
    end tell
end tell

上述代码很浅白，关键代码是execute active tab javascript js_code让当前标签页面执行JS代码，其他不过多介绍。

最后我们把代码拷贝到Alfred Workflows并绑定wwon指令，最终运行效果如下，注意观察浏览器地址栏右侧插件的状态：