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()'});
})

执行功能的浏览器扩展弹出窗口

1 个答案: