使用 Chrome 扩展程序编辑谷歌日历事件的描述或位置

Question

我有一个 chrome 扩展程序，我希望能够在用户单击按钮时编辑谷歌日历事件的描述或位置字段。

我已经设置了按钮，并且可以访问弹出窗口的节点以获取日历扩展。

add description or attachments 字段在单击之前不是文本框。如果您在 UI 中单击此跨度

<span class="DD3VVc" data-key="description" jsaction="clickonly:OVoCkb; mousedown:nzqhhd">description</span>

它将变成一个文本框。

但是，如果我通过像这样的按钮发送点击事件

button.addEventListener("click", function() {
            var descriptions = document.querySelectorAll("[data-key^='description']");
            var description = descriptions[0];
            console.log(description) //prove that I have the right thing.
            description.dispatchEvent(new MouseEvent('mousedown'));
            description.dispatchEvent(new MouseEvent('clickonly'));
}

它似乎不接受点击为有效并创建文本框。我还尝试在点击之前添加description.focus();，没有区别。 它确实将跨度记录到控制台，这是我想要的。如果您在开发控制台中使用事件断点，它也会触发 mousedown 事件。

有没有办法通过 JS 以编程方式触发它，从而创建文本框？

查看以下菜单：

1. 转到 calendar.google.com
2. 单击任意时间段一次，弹出模式
3. 查看如下图所示的菜单

期望的状态（减去文本，希望我可以只是 innerHTML 那个或其他的东西

Answer 1

检查 devtools 的 Event Listeners 面板中的元素：取消选中 [ ] Ancestors ，您会看到该元素根本没有事件侦听器！现在，查看[x] Ancestors，您会看到很多听众。意思是它使用了委托事件，所以我们需要派发一个冒泡事件让一些感兴趣的祖先看到它。

document.querySelector("[data-key^='description']")
  .dispatchEvent(new MouseEvent('click', {bubbles: true}));

然后添加注释：

setTimeout(() => {
  const el = document.querySelector('[contenteditable="true"]');
  el.focus();
  for (const type of ['keydown', 'keypress', 'keyup'])
    el.dispatchEvent(new KeyboardEvent(type));
  document.execCommand('insertHTML', false, 'Your <b>HTML</b> here');
});

有 other methods to insert HTML 而不是 execCommand，后者在 2020 年被标记为过时，但在新的编辑 API 规范达成一致之前它将起作用，这通常需要 [许多] 年。