VS Code中通过文件或CLI在Simple Browser打开指定URL并自动刷新

完全可行，以下是具体实现步骤：

一、配置支持打开本地.txt文件或自定义URL #

修改.vscode/tasks.json，添加可选择的打开目标，既可以打开当前激活的txt文件，也可以输入自定义URL：

{
  "tasks": [
    {
      "label": "open-simple-browser",
      "type": "shell",
      "command": "echo ${input:browserTarget}",
      "problemMatcher": [],
      "presentation": {
        "reveal": "never",
        "echo": false,
        "focus": false,
        "panel": "shared"
      }
    }
  ],
  "inputs": [
    {
      "id": "browserTarget",
      "type": "command",
      "command": "simpleBrowser.api.open",
      "args": ["${input:targetSelector}"]
    },
    {
      "id": "targetSelector",
      "type": "pickString",
      "description": "选择打开目标",
      "options": [
        "http://localhost:4200", // 预设常用URL
        "${file}" // 打开当前激活的本地文件（比如txt）
      ],
      "default": "${file}"
    },
    {
      "id": "customUrl",
      "type": "promptString",
      "description": "输入自定义URL"
    }
  ]
}

使用时按Ctrl+Shift+B（Windows/Linux）或Cmd+Shift+B（macOS），选择open-simple-browser即可选择打开目标。

二、实现自动刷新 #

Simple Browser本身没有内置自动刷新，但可以通过VS Code任务监听变化，触发刷新命令：

1. 本地.txt文件变更自动刷新 #

添加文件监听任务，当txt文件修改时自动刷新浏览器：

{
  "tasks": [
    // 保留上面的open-simple-browser任务
    {
      "label": "watch-txt-refresh",
      "type": "shell",
      "command": "echo ${input:refreshBrowser}",
      "problemMatcher": [],
      "trigger": {
        "event": "onFileChange",
        "files": "**/*.txt" // 监听所有txt文件变化
      },
      "presentation": {
        "reveal": "never"
      }
    }
  ],
  "inputs": [
    // 保留上面的inputs
    {
      "id": "refreshBrowser",
      "type": "command",
      "command": "simpleBrowser.api.refresh"
    }
  ]
}

2. 远程URL内容变更自动刷新 #

如果是本地服务（比如localhost:4200），可以用shell命令定期检查内容变化，触发刷新：

{
  "tasks": [
    // 保留其他任务
    {
      "label": "watch-url-refresh",
      "type": "shell",
      "command": "watch -n 1 'curl -s http://localhost:4200 | md5sum' | while read -r new_sum; do if [ \"$new_sum\" != \"$old_sum\" ]; then old_sum=$new_sum; code --command simpleBrowser.api.refresh; fi; done",
      "problemMatcher": [],
      "presentation": {
        "reveal": "never"
      }
    }
  ]
}

这个命令会每隔1秒检查URL内容的MD5值，一旦变化就触发Simple Browser刷新。

三、整合完整配置 #

把打开和刷新任务整合，一次启动即可完成打开+自动监听：

{
  "tasks": [
    {
      "label": "open-and-watch-simple-browser",
      "type": "shell",
      "command": "echo 启动浏览器并开始监听",
      "problemMatcher": [],
      "dependsOn": ["open-simple-browser", "watch-txt-refresh", "watch-url-refresh"]
    },
    {
      "label": "open-simple-browser",
      "type": "shell",
      "command": "echo ${input:browserTarget}",
      "problemMatcher": [],
      "presentation": {
        "reveal": "never",
        "echo": false,
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "watch-txt-refresh",
      "type": "shell",
      "command": "echo ${input:refreshBrowser}",
      "problemMatcher": [],
      "trigger": {
        "event": "onFileChange",
        "files": "**/*.txt"
      },
      "presentation": {
        "reveal": "never"
      }
    },
    {
      "label": "watch-url-refresh",
      "type": "shell",
      "command": "watch -n 1 'curl -s ${input:targetUrl} | md5sum' | while read -r new_sum; do if [ \"$new_sum\" != \"$old_sum\" ]; then old_sum=$new_sum; code --command simpleBrowser.api.refresh; fi; done",
      "problemMatcher": [],
      "presentation": {
        "reveal": "never"
      }
    }
  ],
  "inputs": [
    {
      "id": "browserTarget",
      "type": "command",
      "command": "simpleBrowser.api.open",
      "args": ["${input:targetSelector}"]
    },
    {
      "id": "targetSelector",
      "type": "pickString",
      "description": "选择打开目标",
      "options": [
        "http://localhost:4200",
        "${file}"
      ],
      "default": "${file}"
    },
    {
      "id": "targetUrl",
      "type": "promptString",
      "description": "输入要监听的URL",
      "default": "http://localhost:4200"
    },
    {
      "id": "refreshBrowser",
      "type": "command",
      "command": "simpleBrowser.api.refresh"
    }
  ]
}

使用时运行open-and-watch-simple-browser任务，即可一步完成打开浏览器并开启自动刷新监听。

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