如何用JavaScript向YouTube描述框写入文本？现有代码失效求助

API 探路者

2026-8-16

问题：JavaScript无法向YouTube描述框写入文本

尝试用JavaScript给YouTube视频描述框添加文本，但代码没有效果，原代码如下：

x=document.getElementsByClassName("description-textarea");
for(var i = 0; i < x.length; i++){
    x[i].innerText="text 1 changed!";    // Change the content
}

对应的描述框核心HTML结构：

<div id="textbox" slot="input" contenteditable="true" class="style-scope ytcp-social-suggestions-textbox" aria-required="false" aria-label="Tell viewers about your video (type @ to mention a channel)" aria-invalid="false"></div>

问题排查

元素选择错误：原代码用description-textarea类查找元素，但YouTube创作者后台的描述框实际是一个contenteditable="true"的<div>，不存在description-textarea这个类，导致代码找不到目标元素。
未触发组件状态更新：YouTube后台基于Polymer框架构建，直接修改innerText只会改变DOM显示，无法触发组件内部的状态同步，内容不会被系统正确识别。

正确实现方案

方案1：基于语义属性定位（推荐）

利用aria-label语义属性定位描述框，修改内容后触发input事件同步状态：

// 定位描述框元素
const descBox = document.querySelector('div[aria-label="Tell viewers about your video (type @ to mention a channel)"]');
if (descBox) {
    // 设置文本内容
    descBox.innerText = "text 1 changed!";
    // 触发input事件，通知组件更新内部状态
    descBox.dispatchEvent(new Event('input', { bubbles: true }));
}

方案2：基于结构层级定位

如果aria-label有变动风险，可通过组件结构层级定位：

const descBox = document.querySelector('ytcp-social-suggestions-textbox #textbox');
if (descBox) {
    descBox.innerText = "text 1 changed!";
    descBox.dispatchEvent(new Event('input', { bubbles: true }));
}