如何为Google Marketplace日历插件添加新版触发的侧边栏Coachmark

要做类似Zoom的安装/新版本引导提示，Google Apps Script本身没有原生组件，得靠前端UI结合用户状态记录来实现，具体步骤如下：

1. 手写Coachmark的UI组件 #

插件的侧边栏基于HTML/CSS/JS实现，直接内嵌引导提示框即可，不用外链第三方库避免加载问题。示例代码：

<!-- 侧边栏HTML文件中添加 -->
<style>
.coachmark {
  position: fixed;
  top: 25px;
  right: 25px;
  background: #4285F4;
  color: white;
  padding: 14px 18px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  display: none;
  cursor: pointer;
}
.coachmark::after {
  content: "";
  position: absolute;
  bottom: -9px;
  right: 35px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #4285F4;
}
</style>

<div class="coachmark" id="guideCoachmark">
  插件已就绪！点击侧边栏开始使用 🎯
</div>

2. 控制显示时机（安装/新版本） #

用PropertiesService存储用户状态，判断是新安装用户还是升级到新版本的用户：

安装触发 #

在插件的onInstall函数里标记用户未看过引导：

function onInstall(e) {
  const userProps = PropertiesService.getUserProperties();
  // 标记未查看安装引导
  userProps.setProperty('seenInstallGuide', 'false');
  // 记录当前插件版本
  userProps.setProperty('lastUsedVersion', '1.0.0'); // 替换成你的版本号
  // 自动打开侧边栏，确保用户能看到引导
  showCalendarSidebar();
}

新版本触发 #

每次用户打开插件时，对比当前版本和用户记录的版本：

function showCalendarSidebar() {
  const userProps = PropertiesService.getUserProperties();
  const currentVersion = '1.1.0'; // 你的新版本号
  const lastVersion = userProps.getProperty('lastUsedVersion') || '0.0.0';
  
  let showGuide = false;
  // 新安装用户
  if (userProps.getProperty('seenInstallGuide') === 'false') {
    showGuide = true;
    userProps.setProperty('seenInstallGuide', 'true');
  }
  // 升级到新版本的用户
  else if (currentVersion > lastVersion) {
    showGuide = true;
    userProps.setProperty('lastUsedVersion', currentVersion);
  }
  
  // 把是否显示引导的标记传给前端
  const sidebarHtml = HtmlService.createHtmlOutputFromFile('sidebar')
    .setTitle('我的日历插件');
  sidebarHtml.append(`<script>window.showCoachmark = ${showGuide};</script>`);
  // 日历插件用CalendarApp的UI对象打开侧边栏
  CalendarApp.getUi().showSidebar(sidebarHtml);
}

前端显示逻辑 #

在侧边栏的JS里，根据标记显示引导，支持点击或超时隐藏：

window.addEventListener('load', () => {
  const coachmark = document.getElementById('guideCoachmark');
  if (window.showCoachmark) {
    coachmark.style.display = 'block';
    // 点击引导框隐藏
    coachmark.addEventListener('click', () => {
      coachmark.style.display = 'none';
    });
    // 5秒后自动隐藏（可选）
    setTimeout(() => {
      coachmark.style.display = 'none';
    }, 5000);
  }
});

3. 日历插件的特殊提醒 #

如果想引导用户点击日历界面上的插件入口图标，这种方式稳定性较差——Google日历的DOM结构可能会变动，容易失效。更稳妥的是在插件自身的侧边栏内做引导，毕竟用户打开侧边栏后就能直接操作。

进阶玩法 #

• 可以做分步引导，比如提示用户点击某个按钮完成第一个操作，用JS控制步骤切换。
• 增加“不再显示”选项，把用户选择存在PropertiesService里，下次就不再弹出。

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