编辑带有 Chrome 扩展名的 google 日历事件的描述或位置

Question

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

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

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 以编程方式触发此操作，以便创建文本框？

查看以下菜单：

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

期望的状态（减去文本，希望我可以 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 规范达成一致，这通常需要 [许多]年。

编辑带有 Chrome 扩展名的 google 日历事件的描述或位置

Edit descrption or location of google calendar event with Chrome Extension

javascript

google-chrome-extension