如何自动选中YouTube的Public单选按钮？技术实现求助

目标 #

自动选中YouTube视频发布设置里的「Public（公开）」单选按钮，并且自动点击确认按钮完成操作。

目标元素HTML结构 #

<tp-yt-paper-radio-button name="PUBLIC" class="style-scope ytcp-video-visibility-select" role="radio" tabindex="-1" toggles="" aria-checked="false" aria-disabled="false" aria-selected="false">
    <!--css_build_mark:third_party.javascript.youtube_components.tp_yt_paper_radio_button.tp.yt.paper.radio.button.css.js-->
    <!--css_build_scope:tp-yt-paper-radio-button-->
    <!--css_build_styles:third_party.javascript.youtube_components.tp_yt_paper_radio_button.tp.yt.paper.radio.button.css.js-->
    <div id="radioContainer" style-target="container" class="style-scope tp-yt-paper-radio-button">
        <div id="offRadio" class="style-scope tp-yt-paper-radio-button"></div>
        <div id="onRadio" class="style-scope tp-yt-paper-radio-button"></div>
        <paper-ripple id="ink" center="" class="circle style-scope tp-yt-paper-radio-button">
            <div id="background" class="style-scope paper-ripple" style="opacity: 0;"></div>
            <div id="waves" class="style-scope paper-ripple"></div>
        </paper-ripple>
    </div>
    <div id="radioLabel" style-target="label" class="style-scope tp-yt-paper-radio-button">Public</div>
</tp-yt-paper-radio-button>

之前无效尝试的问题分析 #

1. 第一个代码标签名使用错误：

   • PUBLIC是元素的name属性值，不是标签名，正确标签名是tp-yt-paper-radio-button，导致无法找到目标元素。

   var radios = document.getElementsByTagName('PUBLIC'); // 错误：标签名错误
   for(i=0; i<radios.length; i++ ) {
       radios[i].onclick = function(e) {
           if(e.ctrlKey || e.metaKey) {
               this.checked = false;
           }
       }
   }
   

2. 第二个代码逻辑方向错误：

   • 代码是给元素绑定点击事件监听，而非主动触发选中操作，完全不符合需求。

   var radios = document.querySelectorAll('tp-yt-paper-radio-button[name="PUBLIC"]');
   for(i=0; i<radios.length; i++ ) {
       radios[i].onclick = function(e) {
           if(e.ctrlKey || e.metaKey) {
               this.checked = false;
           }
       }
   }
   

3. 第三个代码既有拼写错误又逻辑错误：

   • 同样是绑定点击事件而非主动触发，且radios[I]使用大写I，变量名大小写敏感导致报错。

   var radios = document.querySelectorAll('tp-yt-paper-radio-button[name="PUBLIC"]');
   for(i=0; i<radios.length; i++ ) {
       radios[i].onclick = function(e) {
           if(e.ctrlKey || e.metaKey) {
               radios[I].checked = true // 错误：变量名大小写错误+逻辑方向错误
           }
       }
   }
   

4. 仅设置checked=true的问题：

   • YouTube的tp-yt-paper-radio-button是自定义Polymer组件，仅修改DOM属性不会触发组件内部的状态同步和交互验证，导致其他单选按钮（比如Unlisted）仍保持选中状态。

   var radios = document.querySelectorAll('tp-yt-paper-radio-button[name="PUBLIC"]');
   for(i=0; i<radios.length; i++ ) {
   radios[i].checked = true;
   }
   

可行方案：触发点击事件选中公开选项 #

通过调用元素的click()方法模拟用户交互，能触发组件内部状态更新，正确切换到「公开」选项：

var radios = document.querySelectorAll('tp-yt-paper-radio-button[name="PUBLIC"]');
for(i=0; i<radios.length; i++ ) {
    radios[i].click();
    // 可选：同步设置checked属性确保状态一致
    radios[i].checked = true;
}

补充：自动点击确认按钮完成操作 #

要完成整个流程，需找到确认按钮并触发点击。通常YouTube的确认按钮带有ytcp-button类且文本为「OK」，可通过以下代码实现：

// 找到OK按钮（根据实际DOM结构调整选择器）
var confirmBtn = document.querySelector('ytcp-button[aria-label="OK"], ytcp-button .label:contains("OK")');
if(confirmBtn) {
    confirmBtn.click();
}

注意：如果页面是动态加载元素，可能需要用setTimeout或MutationObserver确保元素加载完成后再执行代码。

内容的提问来源于stack exchange，提问作者hans