如何用AppleScript调用本地Angular服务实现Tweet ID选中提交？

问题背景 #

本地运行Angular服务，页面内嵌预定义Tweet ID列表；另一个浏览器窗口打开对应推文链接，已实现读取链接提取Tweet ID，但无法调用Angular服务完成选中对应ID、点击提交按钮的操作。

现有Tweet ID提取代码（优化版） #

先修正原代码中使用测试字符串的问题，确保能从实际链接提取ID：

display dialog "浏览器名称?" default answer "Safari"
set inp to text returned of result

set tweetid to ""

if inp is "Google Chrome" then
    tell application "Google Chrome"
        set link to URL of active tab of front window
        set tweetid to last item of split(link, "/")
    end tell
else if inp is "Safari" then
    tell application "Safari"
        set link to URL of front document
        set tweetid to last item of split(link, "/")
    end tell
end if

-- 辅助分割字符串的函数
on split(inputStr, delimiter)
    set AppleScript's text item delimiters to delimiter
    set splitList to text items of inputStr
    set AppleScript's text item delimiters to ""
    return splitList
end split

解决方案：调用Angular服务执行操作 #

方式1：通过JavaScript直接调用Angular方法 #

Angular组件方法默认不暴露全局，可通过两种途径调用：

• 开发调试模式：用ng.probe获取组件实例
  用AppleScript操控浏览器执行JS，直接调用组件内的方法：

  tell application "Safari"
      -- 切换到Angular页面所在标签页，根据实际调整标签序号
      set current tab of front window to tab 2 of front window
      do JavaScript "
          // 替换成你Angular组件的实际选择器，比如app-tweet-list
          const element = document.querySelector('app-tweet-list');
          const component = ng.probe(element).componentInstance;
          // 调用组件内的选中方法和提交方法
          component.selectTweet('" & tweetid & "');
          component.submitTweet();
      " in front document
  end tell
  

• 生产环境：提前暴露全局方法
  在Angular组件的ngOnInit中添加代码，把方法挂载到window对象：

  ngOnInit(): void {
      // 暴露选中方法
      (window as any).selectTweet = (id: string) => this.selectTweet(id);
      // 暴露提交方法
      (window as any).submitTweet = () => this.submitTweet();
  }
  

  之后直接在AppleScript中调用全局方法：

  tell application "Safari"
      set current tab of front window to tab 2 of front window
      do JavaScript "
          window.selectTweet('" & tweetid & "');
          window.submitTweet();
      " in front document
  end tell
  

方式2：模拟UI点击操作 #

如果无法直接调用Angular方法，可通过JS模拟用户点击页面元素：

tell application "Safari"
    set current tab of front window to tab 2 of front window
    do JavaScript "
        // 替换成你页面中Tweet ID项的实际选择器，比如.tweet-id-item
        const tweetItem = Array.from(document.querySelectorAll('.tweet-id-item'))
            .find(item => item.textContent.trim() === '" & tweetid & "');
        if (tweetItem) {
            // 点击选中该Tweet ID
            tweetItem.click();
            // 替换成提交按钮的实际选择器，比如.submit-btn
            document.querySelector('.submit-btn').click();
        }
    " in front document
end tell

完整整合代码 #

把提取ID和调用逻辑合并，按需选择调用方式：

display dialog "浏览器名称?" default answer "Safari"
set inp to text returned of result

set tweetid to ""

-- 提取Tweet ID
if inp is "Google Chrome" then
    tell application "Google Chrome"
        set link to URL of active tab of front window
        set tweetid to last item of split(link, "/")
    end tell
else if inp is "Safari" then
    tell application "Safari"
        set link to URL of front document
        set tweetid to last item of split(link, "/")
    end tell
end if

-- 执行Angular操作（以Safari为例）
if tweetid is not "" then
    tell application "Safari"
        set current tab of front window to tab 2 of front window
        do JavaScript "
            // 优先调用全局方法（如果已配置）
            if (window.selectTweet && window.submitTweet) {
                window.selectTweet('" & tweetid & "');
                window.submitTweet();
            } else {
                // 否则模拟UI点击
                const tweetItem = Array.from(document.querySelectorAll('.tweet-id-item'))
                    .find(item => item.textContent.trim() === '" & tweetid & "');
                if (tweetItem) {
                    tweetItem.click();
                    document.querySelector('.submit-btn').click();
                }
            }
        " in front document
    end tell
end if

-- 辅助分割字符串函数
on split(inputStr, delimiter)
    set AppleScript's text item delimiters to delimiter
    set splitList to text items of inputStr
    set AppleScript's text item delimiters to ""
    return splitList
end split

内容的提问来源于stack exchange，提问作者Gautam Shahi