Как я могу общаться между background.js, content.js и popup.html эффективно? - PullRequest
Новая
       15

Как я могу общаться между background.js, content.js и popup.html эффективно?

0 голосов
/ 08 декабря 2018

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

Моя установка следующая: я нажимаю кнопку во всплывающем окне, затем скрипт в background.js получает все нужные окна браузера.это соответствует моим требованиям, и было бы классифицировать их, чтобы организовать, как данные для сбора будут отображаться в отдельном окне.Затем для каждой из тех страниц, которые открываются, скрипт обнаруживает изменения в них с помощью mutationObservers, и все это идет в отдельном окне.Пока у меня есть это, я могу получить данные из executeter.js, затем передать их в background.js, и когда я пытаюсь передать их в отдельное окно, (fabricioyacques.tech), я получаю эту ошибку:

Ошибка в обработчике событий для runtime.onMessage: Ошибка: вызов формы tabs.connect (объект) не соответствует определению tabs.connect (integer tabId, необязательный объект connectInfo) в

Я был бы очень признателен, если бы вы могли дать мне совет о том, что я могу использовать и как его использовать, документы действительно не говорят, что использовать в конкретных случаях, таких как этот.

executeter.js 

var config = {characterData : true, childList : true}
var configMatchStarted = {attributes: true, childList: true, characterData: true, subtree: true };
//var configMarkets = {attributes: true, childList: true, characterData: true, subtree: true };
var scoreboard = document.getElementsByClassName("counter-number player1")

if(scoreboard.length > 0) {

    console.log("Match has already started.");
    matchStart(true);

} else {

var period = document.getElementById("scoreboard"); 
var observerMatchStart = new MutationObserver(function(mutations){
    matchStart(false)
});

observerMatchStart.observe(period, configMatchStarted);

console.log("match has not started yet")

}


function matchStart(status) {
    if (status == false) {
        observerMatchStart.disconnect()
        console.log('Observer Match Start disconnect')
    } 
    //setting up the score observer
    var homeTeam = document.getElementsByClassName("counter-number player1");
    var awayTeam = document.getElementsByClassName("counter-number player2");
    var teamObservers = new MutationObserver(checkGoal)

    teamObservers.observe(homeTeam[0], config)
    teamObservers.observe(awayTeam[0], config)
    redBackground(true)
    //setting up the markets observer
    //var market = document.getElementsByClassName('marketboard rounded-bottom') 
    //var marketsObserver = new MutationObserver(marketsClosed)
    //marketsObserver.observe(market[0], configMarkets)
}

function redBackground() {

    if(document.getElementById("event").classList.add("red-background")){console.log('rojo')}else {console.log('no funcina')};

    var time = new Date();
    var hours = time.getHours()
    var minutes = time.getMinutes()
    var seconds = time.getSeconds()
    if (hours < 10) {hours = "0" + hours}
    if (minutes < 10) {minutes = "0" + minutes}
    if (seconds < 10) {seconds = "0" + seconds}

    var marketTime =
    hours + ":" 
    + minutes + ":"
    + seconds + "  "
    + document.getElementsByClassName("participantName name")[0].textContent + " "
    + document.getElementsByClassName("counter-number player1")[0].textContent + ":"
    + document.getElementsByClassName("counter-number player2")[0].textContent + " "
    + document.getElementsByClassName("participantName name")[1].textContent;

    console.log(marketTime)

    setTimeout(function() {
        document.getElementById("event").classList.remove("red-background")
    }, 10000)

    chrome.runtime.sendMessage({
    'sentBwinText': true,
    'logs' : marketTime,
    'red' : true
    });
}

function checkGoal(mutationList) {
    mutationList.forEach((mutation) => {
        if(mutation.type == 'childList') {
            if (mutation.addedNodes.length == '0') {
            redBackground()
            }       
        }           
    })              
}           


function marketsClosed(mutationList) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
        case 'attributes':


        break;
    }
  });
}

background.js 

chrome.runtime.onMessage.addListener(function(message, sender) {

    if(message.openBwin == true) {

        chrome.tabs.executeScript({
            file: 'executer.js'
        });  
        chrome.tabs.create({ url: "https://fabricioyacques.tech/sportradar-extension/"} , function(tab) {
tabId = tab.id

} );



    } 


        if(message.sentBwinText == true && message.logs){

            console.log(tabId)

        var port = chrome.tabs.connect({tabId, name: "data"});

            console.log(message.logs)

            var logsToSend = message.logs
            if(logsToSend) {
                port.postMessage({sendingLogs: "'" + logsToSend + "'"})
            } else {
                console.log('mensajes no mandados')
            }
            port.postMessage({red: true})

        }




});

content.js 

var port = chrome.runtime.connect({name: "data"});
chrome.runtime.onConnect.addListener(function(port) {
    console.log('logsToSend')   
    port.onMessage.addListener(function(msg) {
        if(msg.sendingLogs){
        console.log(msg.sendingLogs)
            if(msg.red){
    if(document.getElementById("event").classList.add("red-background")){console.log('rojo')}else {console.log('no anda')};
    }

    }}) 
})

popup.js 

document.getElementById("bwin").addEventListener("click", function(e) {
    chrome.runtime.sendMessage({'openBwin': true});
});

manifest.json 

{
    "manifest_version": 2,
    "name": "Bet Monitoring Helper",
    "version": "0.1",
    "permissions": [ "activeTab", "tabs", "http://*/*", "https://*/*" ],
    "content_scripts":  [
        {
            "matches": [
                "https://fabricioyacques.tech/sportradar-extension/"
            ],
            "js":  ["jquery-3.3.1.min.js","content.js"],
            "css": [ "styles.css" ]

        }
    ],
    "background": {
        "scripts": ["background.js" , "executer.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "seven.png",
        "default_popup": "popup.html"
    },
    "externally_connectable": {
        "matches": ["https://fabricioyacques.tech/sportradar-extension/"]
      }
}
...