Javascript 显示/隐藏firefox扩展中的按钮在特定网页上不起作用

我正在为我的web应用程序编写一个简单的浏览器扩展

我在我的网站上有一个包含卡片的列表，我想使用该扩展为ul标签添加一个属性来隐藏或显示它

在我的分机上，popup.html上有以下按钮：

<h3 class="lead">Hide Cards</h3>
    <div class="input-group mb-3 has-success">
        <div class="input-group-append">
            <button id="hideAllCards" class="btn btn-success" type="button" data-toggle="popover" data-placement="top" data-content="Hide all cards">
                Hide
            </button>
        </div>
    </div>
    </p>

    <p>
        <h3 class="lead">Show Cards</h3>
        <div class="input-group mb-3 has-success">
            <div class="input-group-append">
                <button id="showAllCardsButton" class="btn btn-success" type="button" data-toggle="popover" data-placement="top" data-content="Show all cards">
                    Show
                </button>
            </div>
        </div>
    </p>

注：我正在firefox上使用它 注：我有一个包含jquery.JS和popup.JS的JS文件夹

我到底做错了什么

更新 当我尝试使用alert（）时，通常会在网站上显示alert框，而不是在我的HTML扩展上。现在发生的事情是alert（）正在我的扩展上执行。 这意味着我试图执行的代码没有被发送到我的网站，但它仍保留在我的扩展上。我不明白为什么

---

要操作选项卡，我必须按如下方式更改功能：

const hideCards = `#cards-in-progress {
    display: none;
}`;

  $("#hideAllCards").on('click',function() { browser.tabs.insertCSS({code: hideCards}) });

  $("#showAllCardsButton").on('click',function() { browser.tabs.removeCSS({code: hideCards}) });

---

您想显示和隐藏

并在按钮单击时使用不同的id？我的错，抱歉。我更新了问题，但仍然不起作用。感谢您指出这一点，尽管您的扩展上有jquery吗？您的单击函数中仍然有不同的选择器。还有波斯。打字错误。也许应该是

“#draggableheader”

您测试过deleget事件吗<代码>$（“#hidealcards”）.on（'click'，function（）{$（'#cards in progress'）.attr（“style”，“display:none！important”）；}）

const hideCards = `#cards-in-progress {
    display: none;
}`;

  $("#hideAllCards").on('click',function() { browser.tabs.insertCSS({code: hideCards}) });

  $("#showAllCardsButton").on('click',function() { browser.tabs.removeCSS({code: hideCards}) });