Отобразить части содержимого страницы во всплывающем окне расширения браузера - PullRequest
Новая
       12

Отобразить части содержимого страницы во всплывающем окне расширения браузера

0 голосов
/ 28 февраля 2020

Я создаю расширение, которое подсчитывает количество списков на странице и помещает розовую рамку вокруг них. Я хочу отобразить количество списков на странице, во всплывающем окне.

В настоящее время во всплывающем окне отображается количество списков в самом всплывающем окне ..., которое всегда равно 0.

Как узнать количество списков из содержание страницы ?

Вот мой код: 

ext = false

var $ulList = document.querySelectorAll('ul')
var $olList = document.querySelectorAll('ol')
var $dlList = document.querySelectorAll('dl')
const $button = document.getElementById('showList')

//This is an empty <div> in the popup
const $textHere = document.getElementById('text-here')


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
    }
} 


// BROKEN - Does not interact with page content
function listCounter() {
    if (ext == false) {
        $textHere.innerHTML = `<p>` + 'UL Lists: ' + $ulList.length + `</p>`
    } else if (ext == true) {
        $textHere.innerHTML = ''
    }
}


// WORKS - Counts lists in page content
console.log($ulList)
console.log($ulList.length)


// Adds popup functionality
$button.addEventListener('click', function() {
     browser.tabs.executeScript({code: 'addListBorders()'})

     if (ext == false) {    
        $button.textContent = 'Hide Lists'
        listCounter()
        ext = true
    } else if (ext == true) {
        $button.textContent = 'Show Lists'
        listCounter()
        ext = false
    }

})
...