CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Laurence L
Laurence L

Reputation: 623

Chrome extension checkboxes not removing styles

I have a Chrome extension that injects style sheets using multiple checkboxes. When checked adds the style sheets, when unchecked removes the style sheets. There is a button that add all and removes all styles.

What is working.

What is not working

Can someone please explain why the functionality is not working. If I can get this to work, the next step is to use chrome.storage.local to save the state of the checkbox when the popup.html closes, but that is a whole new learning curve.

I should use a radio button group with check all yes/no rather than the button. And I've probably used way to much code for this functionality.

Any code guidance is appreciated.

POPUP.HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/popup.css">
</head>

<body>
    <div class="ws-bm-aria-matrices-button" id="ws-bm-aria-matrices-parent">
        <fieldset>
            <legend>Options</legend>
        <button type="button" id="chkAllOptions" class="pressed" aria-pressed="false">All options</button>
            <ul>
                <li><label for="option01" class="switch--label">
                        <span class="label">Option 1</span>
                    </label>
                    <input id="option01" type="checkbox" name="chkAll">
                </li>
                <li><label for="option02" class="switch--label">
                        <span class="label">Option 2</span>
                    </label>
                    <input id="option02" type="checkbox" name="chkAll">
                </li>
                <li><label for="option03" class="switch--label">
                        <span class="label">Option 3</span>
                    </label>
                    <input id="option03" type="checkbox" name="chkAll">
                </li>
            </ul>
        </fieldset>
    </div>
    <script src="popup.js"></script>
</body>

</html>

POPUP.JS

let a = document.getElementById("chkAllOptions");
let b = document.getElementsByName('chkAll');
let c = document.getElementById("option01");
let d = document.getElementById("option02");
let e = document.getElementById("option03");

//Check uncheck all
a.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });
    
  a.classList.toggle("pressed");
  a.setAttribute(
      'aria-pressed', 
      a.getAttribute('aria-pressed') === 'false' 
        ? 'true' 
        : 'false'
    );
   if (a.getAttribute('aria-pressed') === 'true') {
     for (let i = 0; i < b.length; i++) { 
       b[i].checked = true;
       b[i].setAttribute("aria-checked","true");
         
  try {
    chrome.scripting.insertCSS({
      target: {
        tabId: tab.id,
      },
      files: ["css/option01.css" , "css/option02.css" , "css/option03.css"],
    });
  } catch (err) {
    console.error(`failed to insert CSS: ${err}`);
  }
         
     }
   } else if (a.getAttribute('aria-pressed') === 'false') {
     for (let i = 0; i < b.length; i++) {
       b[i].checked = false;
       b[i].setAttribute("aria-checked","false");
     }
       
    try {
    await chrome.scripting.removeCSS({
      target: {
        tabId: tab.id,
      },
      files: ["css/option01.css" , "css/option02.css" , "css/option03.css"],
    });
  } catch (err) {
    console.error(`failed to remove CSS: ${err}`);
  }   
       
       
   }
 
 });
 
 //Individual checkboxes
 
 c.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });
    
    c.setAttribute('aria-checked', c.getAttribute('aria-checked') === 'true' ? 'false' : 'true');

    if (c.getAttribute('aria-checked') === 'true') {

        try {
            await chrome.scripting.insertCSS({
                target: {
                    tabId: tab.id,
                },
                files: ["css/option01.css"],
            });
        } catch (err) {
            console.error(`failed to insert option 1 CSS: ${err}`);
        }

    } else if (c.getAttribute('aria-checked') === 'false') {

        try {
            await chrome.scripting.removeCSS({
                target: {
                    tabId: tab.id,
                },
                files: ["css/option01.css"],
            });
        } catch (err) {
            console.error(`failed to remove option 1 CSS: ${err}`);
        }

    }

});

d.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });
    
    d.setAttribute('aria-checked', d.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
    
    if (d.getAttribute('aria-checked') === 'true') {

        try {
            await chrome.scripting.insertCSS({
                target: {
                    tabId: tab.id,
                },
                files: ["css/option 2.css"],
            });
        } catch (err) {
            console.error(`failed to insert landmark CSS: ${err}`);
        }

    } else if (d.getAttribute('aria-checked') === 'false') {

        try {
            await chrome.scripting.removeCSS({
                target: {
                    tabId: tab.id,
                },
                files: ["css/option 2.css"],
            });
        } catch (err) {
            console.error(`failed to remove Option 2 CSS: ${err}`);
        }

    }

});

e.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });
    
    e.setAttribute('aria-checked', e.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
    
    if (e.getAttribute('aria-checked') === 'true') {

        try {
            await chrome.scripting.insertCSS({
                target: {
                    tabId: tab.id,
                },
                files: ["css/Option03.css"],
            });
        } catch (err) {
            console.error(`failed to insert option 3 CSS: ${err}`);
        }

    } else if (e.getAttribute('aria-checked') === 'false') {

        try {
            await chrome.scripting.removeCSS({
                target: {
                    tabId: tab.id,
                },
                files: ["css/option03.css"],
            });
        } catch (err) {
            console.error(`failed to remove Option 3 CSS: ${err}`);
        }

    }

});

Upvotes: 0

Views: 80

Answers (1)

Xan
Xan

Reputation: 77482

There's a small but very important detail in the documentation of the removeCSS method, emphasis mine:

injection
CSSInjection
The details of the styles to remove. Note that the css, files, and origin properties must exactly match the stylesheet inserted through insertCSS.

What this means in practice: if you insert 3 stylesheets at once, trying to remove them one by one will fail (since it does not match exactly the files used before) and vice-versa.

You should change your mass-insert and mass-remove logic to add/remove them one by one.

Upvotes: 1

Related Questions