Search code examples
javascriptjquerybrowser-extension

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

I am writing a simple browser extension to my web app.

I have a list with cards <ul id="cards-in-progress"> on my website and I want to use the extension to add an attribute to that ul tag hiding or showing it.

On my extension I have the following buttons on the 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>

On my extension, I have the 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.: I am using it on firefox PS.: I have a JS folder with jquery.js and popup.js

What am I actually doing wrong?

UPDATE

When I try to use alert(), usually the alert box should appear on the website and not on my HTML extension. What is happening at the moment is that alert() is being executed on my extension. It means that the code I am trying to execute is not being sent to my website but it remains on my extension. I can't figure why.

enter image description here

Solution

  • To manipulate the tab I had to change my function as it follows:

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