Кнопка «Показать / скрыть» от расширения Firefox не работает на определенной веб-странице - PullRequest
0 голосов
/ 25 июня 2018

Я пишу простое расширение для браузера для моего веб-приложения.

У меня есть список с карточками <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: У меня есть папка JS с jquery.js и popup.js

Что я на самом деле делаю неправильно?

ОБНОВЛЕНИЕ

Когда я пытаюсь использовать alert (), обычно окно оповещения должно появляться на веб-сайте, а не на моем расширении HTML.В данный момент происходит то, что alert () выполняется для моего расширения.Это означает, что код, который я пытаюсь выполнить, не отправляется на мой веб-сайт, но остается на моем расширении.Я не могу понять, почему.

enter image description here

1 Ответ

0 голосов
/ 25 июня 2018

Для управления вкладкой мне пришлось изменить свою функцию следующим образом:

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