来自 Chrome 扩展的 Outlook 日历输入字段 DOM 操作

Posted 2023-02-21

【中文标题】来自 Chrome 扩展的 Outlook 日历输入字段 DOM 操作

【英文标题】：Outlook Calendar input field DOM manipulation from Chrome Extension

【发布时间】：2021-09-24 18:20:46

【问题描述】：

我正在为 Outlook 日历构建一个 Chrome 扩展程序 - https://outlook.live.com/calendar/

我想要做的是，当用户单击日历上的某个位置时，会出现默认的新事件创建弹出窗口，该事件的标题由 Chrome 扩展程序填充。

所以，我用这个 CSS 选择器识别这个输入字段，并将它的值设置为：

document.querySelector('input[aria-label="Add details for the event"]').value = 'test123';

UI 更新为 test123，但如果我单击页面上的其他位置，该值将恢复为默认值，或者如果我只是保存事件，它不会使用我通过 chrome 扩展设置的值保存它。

您可以从控制台尝试此操作，无需安装 chrome 扩展。

我猜这个输入字段在某种程度上依赖于前端框架及其绑定，但我想不通...感谢任何帮助！

【参考方案1】：

在设置输入值后添加它可以解决它：

document.querySelector('input[aria-label="Add details for the event"]').dispatchEvent(new Event('input',  bubbles: true ));