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

Question

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

我的网站上有一张卡片<ul id="cards-in-progress">列表，我想使用扩展名为该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>

在我的扩展程序中，我有popup.js：

$("#hideAllCards").click(function() {
    $('#cards-in-progress').attr("style", "display: none !important");
});

$("#showAllCardsButton").click(function()  {
    $('#cards-in-progress').attr("style", "display: block !important");
});

PS .：我在Firefox上使用它 PS .：我有一个包含jquery.js和popup.js的JS文件夹

我实际上在做错什么？

更新

当我尝试使用alert（）时，通常警告框应出现在网站上而不是我的HTML扩展名上。目前正在发生的事情是我的扩展程序正在执行alert（）。 这意味着我尝试执行的代码未发送到我的网站，但仍保留在我的扩展程序中。我不知道为什么。

Answer 1

要操作选项卡，必须按以下步骤更改功能：

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}) });