Всплывающее окно расширения браузера, которое выполняет функцию

Question

Я строю простое расширение firefox. Он включает в себя всплывающее окно с кнопкой (#showList), которое я хотел бы использовать для выполнения функции (addListBorders ()). Эта функция добавляет границы для элементов списка на странице.

Как правильно выполнить эту функцию?

var ext = false;
var $ulList = document.querySelectorAll('ul')
var $olList = document.querySelectorAll('ol')
var $dlList = document.querySelectorAll('dl')

function addListBorders() {
    if (ext == false) { 

        for (let $ul of $ulList) {
            $ul.style.border = "5px solid pink"
        }
        for (let $ol of $olList) {
            $ol.style.border = "5px solid pink"
        }
        for (let $dl of $dlList) {
            $dl.style.border = "5px solid hotpink"
        }

        ext = true

    } else { 

        for (let $ul of $ulList) {
            $ul.style.border = "none"
        }
        for (let $ol of $olList) {
            $ol.style.border = "none"
        }
        for (let $dl of $dlList) {
            $dl.style.border = "none"
        }

        ext = false
    }
} 

 //browser.runtime.onConnect.addListener(addListBorders);

const $button = document.getElementById('showList')
const CSS = "body { border: 20px solid red; }";

$button.addEventListener('click', function() {
    document.body.style.color = 'red'
     browser.tabs.insertCSS({code: CSS});

     browser.runtime.addListener(addListBorders);
})

Answer 1

Я понял это! Вот для справки:

$button.addEventListener('click', function() {
     browser.tabs.executeScript({code: 'addListBorders()'});
})