javascript - 从内容脚本调用一个注入的按钮到 background.js

Question

我正在编写一个将按钮注入 youtube 页面的 chrome 扩展程序。该按钮在我的内容脚本中创建并注入到页面中。我的问题是我不知道如何在内容脚本或后台脚本中为其构建点击功能。

我的内容脚本（注入的按钮）：

 $("watch7-user-header").innerHTML+=
 '<div id="trans"> 
    <iframe name="iframe"></iframe>
    <span class="buttonGroup">
        <button id="download">
            <span class="buttonContent1">'+x+'</span> 
        </button>
        <button id="menu" class=" yt-uix-button  yt-uix-button-default" onclick="";return false;"> //this is the dropdown menu
            <span class="buttonContent1">
            </span>
            <ul id="stylelist" class="yt-uix-button-menu hid">'+o+S+"</ul>
        </button>
    </span>
</div>"

我如何在后台脚本中调用点击事件？

Answer 1

您不能从背景页面“单击”按钮。如果你想这样做，你必须向内容脚本发送一条消息来为你做这件事。

在内容脚本中，您可以这样做：

var evt = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
});
document.querySelector('<yourElementSelector>').dispatchEvent(evt);

更新：

如果您尝试单击一个<button>元素，您可以简单地执行以下操作：

document.querySelector('<yourButtonSelector>').click();