I'm very new at chrome extensions, and navigating it is a lot of self-teaching. I was hoping someone could help with this simple issue I have!

I want to have a very small popup, that displays a closed book upon clicking the extension icon. Once clicked, I want it to switch to an open book, indicating it is "active". I currently have a manifest.json file, default popup file with a css file for styling and js file as well, and I have a background page in js.

I am not sure how to switch the book image inside the popup.

(image linked on text)

the popup window is extremely tiny, which I want it to be. Just wanted to swap those pictures to indicate active mode, and also learn how to send the "active" signal to background script to perform the task I want

CodePudding user response：

If you are able to just change something like the src attribute it may be the easiest method. If you need to have two different elements then you may want to show/hide them using the style attribute and put the onclick on a parent div of the two children.

<img src="/pathToOpenBook" onclick="toggleBookOpen" alt="imageDesc" />

function toggleBookOpen(pointerEvent){
    const openBook = "/pathToOpenBook";
    const closedBook = "/pathToClosedBook";
    const element = pointerEvent.target;
    const src = element.getAttribute('src');
    const isOpen = src.toLowerCase().includes('open');
    const updateValue = isOpen ? closedBook : openBook;
    element.setAttribute('src', updateValue);
}