能否用HTML、CSS、JS开发可启动其他程序的Web应用工具栏？

作为编程初学者，你要做的这个工具栏可以实现，但普通网页受浏览器安全限制，不能直接调用本地程序，下面给你两种可行的方案：

方案1：利用自定义URI协议（适合简单场景） #

很多桌面程序会注册自己的自定义URI协议，比如VS Code的vscode://、Steam的steam://，你可以通过HTML链接直接唤起这些程序。如果是你自己的程序，也可以手动注册协议。

示例代码（HTML+CSS） #

<!DOCTYPE html>
<html>
<head>
    <style>
        .toolbar {
            display: flex;
            gap: 10px;
            padding: 10px;
            background: #333;
            color: white;
        }
        .toolbar a {
            color: white;
            padding: 8px 12px;
            background: #555;
            border-radius: 4px;
            text-decoration: none;
        }
        .toolbar a:hover {
            background: #777;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <a href="vscode://">启动VS Code</a>
        <a href="steam://open/main">启动Steam</a>
        <a href="notepad://">启动记事本（需先注册协议）</a>
    </div>
</body>
</html>

注册自定义协议（Windows为例） #

如果要启动自己的程序，比如记事本，需要在Windows注册表添加项：

1. 打开注册表编辑器（Win+R输入regedit）
2. 找到HKEY_CLASSES_ROOT，右键新建项，命名为notepad
3. 在notepad项里设置默认值为URL:Notepad Protocol，新建字符串值URL Protocol，值留空
4. 新建子项shell\open\command，设置默认值为"C:\Windows\notepad.exe"
   这样点击notepad://链接就能启动记事本了。

方案2：用Electron做桌面Web应用（更灵活，适合做工具栏） #

如果要做真正的桌面工具栏，Electron是最佳选择——它允许你用HTML/CSS/JS写界面，同时通过Node.js调用本地系统API直接启动程序，没有浏览器的安全限制。

步骤1：初始化项目 #

先安装Node.js，然后新建文件夹，打开终端执行：

npm init -y
npm install electron --save-dev

步骤2：主进程代码（main.js） #

const { app, BrowserWindow, ipcMain, shell } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 600,
        height: 80,
        frame: false,
        alwaysOnTop: true, // 保持工具栏在最上层
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: false,
            contextIsolation: true
        }
    });

    win.loadFile('index.html');
}

// 接收渲染进程的启动请求
ipcMain.on('open-app', (event, appPath) => {
    shell.openPath(appPath).catch(err => console.error(err));
});

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

步骤3：预加载脚本（preload.js） #

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    openApp: (appPath) => ipcRenderer.send('open-app', appPath)
});

步骤4：界面代码（index.html） #

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 10px;
            background: #222;
            display: flex;
            gap: 10px;
        }
        .btn {
            color: white;
            padding: 8px 16px;
            background: #444;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn:hover {
            background: #666;
        }
    </style>
</head>
<body>
    <button class="btn" onclick="openNotepad()">打开记事本</button>
    <button class="btn" onclick="openVSCode()">打开VS Code</button>

    <script>
        function openNotepad() {
            window.electronAPI.openApp('C:\\Windows\\notepad.exe');
        }
        function openVSCode() {
            // 替换成你的VS Code安装路径
            window.electronAPI.openApp('C:\\Users\\你的用户名\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe');
        }
    </script>
</body>
</html>

步骤5：运行程序 #

在package.json里添加启动脚本：

"scripts": {
    "start": "electron ."
}

然后执行npm start就能看到你的工具栏了。

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