Showing/Hiding 来自 firefox 扩展的按钮在特定网页上不起作用

Question

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

我的网站上有一个包含卡片的列表 <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}) });

Showing/Hiding 来自 firefox 扩展的按钮在特定网页上不起作用

Showing/Hiding button from firefox extension not working on specific web page

javascript

jquery

browser-extension

更新