I am injecting a JS file and CSS when a checkbox in popup.html is checked. This works.

    d.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });

    chrome.storage.local.set({
        landmarks: d.checked
    }, function () {

        if (d.checked) {

            try {
                chrome.scripting.insertCSS({
                    target: {
                        tabId: tab.id,
                        allFrames: true
                    },
                    files: ["css/show-alt-text.css"],
                });
            } catch (err) {
                console.error(`failed to insert CSS: ${err}`);
            }

            (async () => {
                const [tab] = await chrome.tabs.query({
                    active: true,
                    currentWindow: true
                });
                try {
                    await chrome.scripting.executeScript({
                        target: {
                            tabId: tab.id,
                            allFrames: true
                        },
                        files: ["js/show-alt-text.js"],
                    });
                } catch (erri) {
                    console.error(`failed to execute script: ${erri}`);
                }
            })();

        } else {

            try {
                chrome.scripting.removeCSS({
                    target: {
                        tabId: tab.id,
                        allFrames: true
                    },
                    files: ["css/show-alt-text.css"],
                });
            } catch (err) {
                console.error(`failed to remove CSS: ${err}`);
            }

            document.querySelectorAll(".show-alt-text").forEach(altName => altName.remove());
        }
    });
});

The script loops through all the img elements on the page and positions a DIV with a class under each image:

Injected JS

const imgElements = document.querySelectorAll("img");
const showAltText = document.createElement("div");
showAltText.classList.add("show-alt-text");

for (let i = 0; i < imgElements.length; i  ) {
    const altText = imgElements[i].alt;
    const element = showAltText.cloneNode(true);
    if (altText !== "") {
        element.innerHTML = "This image ALT text is: "   altText;
        imgElements[i].after(element);
    }
}

If the checkbox is unchecked the style sheet is removed. I also want to remove the injected DIV.

If I add the following JS to Chrome tools the DIV is removed.

document.querySelectorAll(".show-alt-text").forEach(altName => altName.remove());

However, if I use this in the else (unchecked) section of the popup.js, it does not work.

Can someone offer any help on getting this to work please.

CodePudding user response：

Using the same function as adding the script will remove the script

(async () => {
                const [tab] = await chrome.tabs.query({
                    active: true,
                    currentWindow: true
                });
                try {
                    await chrome.scripting.executeScript({
                        target: {
                            tabId: tab.id,
                            allFrames: true
                        },
                        files: ["js/removeScript.js"],
                    });
                } catch (erri) {
                    console.error(`failed to execute script: ${erri}`);
                }
            })();

CodePudding user response：

Fixed

Don't declare as var, let or const.

imgElements = document.querySelectorAll("img"); showAltText = document.createElement("div");