javascript - 从内容脚本调用注入(inject)的按钮到background.js

Question

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

我的内容脚本(注入(inject)的按钮):

 $("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

您无法从后台页面“单击”按钮。如果您想这样做，则必须 send a message 到内容脚本来为您完成此操作。

从内容脚本中，您可以这样做:

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

更新:

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

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