使用Chrome扩展程序修改Google日历事件的描述或位置 [英] Edit descrption or location of google calendar event with Chrome Extension

问题描述

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

I have a chrome extension and I want to be able to edit the description or location field of a google calendar event when a user clicks a button.

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

I have the button set up and can access the nodes of the popup window for a calendar extension.

在单击之前，添加描述或附件字段不是文本框.如果您在用户界面中单击此跨度

The add description or attachments field is not a text box until clicked. If you click this span in the UI

< span class ="DD3VVc"数据键＝描述".jsaction =" clickonly:OVoCkb;mousedown:nzqhhd"说明</span>

它将成为一个文本框.

但是，如果我通过类似按钮的事件发送一次点击事件，

However, if I dispatch a click event via the button like

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事件.

It does not seem to accept the click as valid and create the text box. I also tried adding a description.focus(); befor the clicks with no difference. It does log the span to the console and it is the one I want. It also will trigger the mousedown event if you use the event breakpoints in the dev console.

有没有一种方法可以用JS以编程方式触发此操作，以便它创建文本框?

Is there a way to trigger this programmatically with JS so it creates the text box?

要查看以下菜单:

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

期望状态(减去文本，希望我可以对这些内容进行innerHTML

desired state (minus the text, hopefully I can just innerHTML that or something

推荐答案

在devtools的 Event Listeners 面板中检查元素:取消选中 []祖先看到此元素根本没有事件侦听器！现在，检查 [x]祖先，您将看到很多侦听器.意思是它使用了委托事件，因此我们需要调度一个冒泡事件，让一些感兴趣的祖先看到它.

Inspect the element in devtools' Event Listeners panel: uncheck [ ] Ancestors there and you'll see this element has no event listeners at all! Now, check [x] Ancestors and you'll see a lot of listeners. The meaning is that it uses delegated events so we need to dispatch a bubbling event for some interested ancestor to see it.

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');
});

还有其他插入HTML的方法，而不是 execCommand ，该代码在2020年被标记为已过时，但要等到新的编辑API规范被商定，并且通常要花很多年才能使用.

There are other methods to insert HTML instead of execCommand, which was marked as obsolete in 2020 but it'll work until a new editing API specification is agreed upon and that usually takes [many] years.

这篇关于使用Chrome扩展程序修改Google日历事件的描述或位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！