Transferring data between cards

Question

I'm a beginner in creating browser plug-ins. Could some kind soul help me with the best way to transfer data between browser tabs? I would like to transfer data from a script running on an inactive tab in real time and use it to control the operation of the page on the active tab. I will be grateful for any advice that will bring me closer to understanding the topic.

I'm trying to use the Web Audio API to analyze the sound played in a video element on an inactive tab and send it in real time to the active tab using a plugin.

Answer 1

I did it like this:

content.js:

    if (document.location.href.includes("youtube.com")) {
      console.log("Dodawanie nasłuchiwacza na zmiany w pamięci sesji");
    
      // Funkcja obliczająca średnią częstotliwość tonów
      function calculateAverageFrequency(analyser, bufferLength, dataArray) {
        // Pobierz dane o częstotliwościach
        analyser.getByteFrequencyData(dataArray);
    
        // Oblicz sumę częstotliwości
        var sum = 0;
        for (var i = 0; i < bufferLength; i++) {
          sum += dataArray[i];
        }
    
        // Dodaj sumę do tablicy
        sumArray.push(sum);
    
        // Jeśli tablica osiągnęła 10 elementów, oblicz średnią i wyślij na kartę Tuya
        if (sumArray.length === 10) {
          // Oblicz średnią
          var average = Math.round(
            sumArray.reduce((acc, currentValue) => acc + currentValue, 0) /
              sumArray.length /
              80
          );
          if (average > 1000) {
            average = 1000;
          }
          // Wyślij średnią na kartę Tuya
          chrome.runtime.sendMessage({
            action: "transferData",
            dataArray: average,
          });
    
          // Wyczyść tablicę
          sumArray = [];
    
          // Wydrukuj komunikat
          console.log(
            "Osiągnięto liczbę 10. Średnia częstotliwość tonów:",
            average
          );
        }
    
        // Wywołaj funkcję ponownie przy użyciu requestAnimationFrame()
        requestAnimationFrame(() => {
          calculateAverageFrequency(analyser, bufferLength, dataArray);
        });
      }
    
      // Inicjalizacja tablicy do przechowywania sum częstotliwości
      var sumArray = [];
    
      // Sprawdź, czy AudioContext jest dostępny
      if (typeof AudioContext !== "undefined") {
        // Przygotuj kontekst AudioContext
        var audioContext = new AudioContext();
    
        // Przesuń czas odtwarzania wstecz o 1 sekundę
        audioContext.onstatechange = function () {
          if (audioContext.state === "running") {
            audioContext.currentTime -= 1; // Przesunięcie o 1 sekundę wstecz
          }
        };
    
        // Pobierz pierwszy element wideo lub audio na stronie
        var videoElement = document.querySelector("video, audio");
    
        // Sprawdź czy element został znaleziony
        if (videoElement) {
          // Utwórz węzeł analizatora dźwięku
          var analyser = audioContext.createAnalyser();
    
          // Podłącz wyjście audio z elementu wideo do analizatora
          var source = audioContext.createMediaElementSource(videoElement);
          source.connect(analyser);
          analyser.connect(audioContext.destination);
    
          // Rozmiar tablicy analizatora
          var bufferLength = analyser.frequencyBinCount;
    
          // Tablica do przechowywania danych o częstotliwościach
          var dataArray = new Uint8Array(bufferLength);
    
          // Wywołaj funkcję po raz pierwszy
          calculateAverageFrequency(analyser, bufferLength, dataArray);
        } else {
          console.log("Nie znaleziono elementu wideo ani audio na stronie.");
        }
      } else {
        console.log("AudioContext nie jest dostępny w tej przeglądarce.");
      }
    }

background.js:



chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.action === "transferData") {
    console.log("Odebrano dane z content script:", message.dataArray);
    let dataArray = message.dataArray;
    chrome.tabs.query({ currentWindow: true }, function (tabs) {
      if (tabs.length >= 2) {
        var targetTab = tabs.find((tab) => tab.url.includes("eu.iot.tuya.com"));
        chrome.scripting.executeScript({
          target: { tabId: targetTab.id },
          func: function (dataArray) {
            // Znajdź element textarea o identyfikatorze "colour_data"
            var textArea = document.getElementById("colour_data");
            // Sprawdź, czy element został znaleziony
            if (textArea) {
              console.log(dataArray);
              // // Eksperyment
              // Pobierz element textarea
              var textarea = document.getElementById("colour_data");

              // Ustaw nową wartość dla textarea
              textarea.value = `{"h": ${
                dataArray / 4
              }, "s": ${dataArray}, "v": ${dataArray}}`;
              let button =
                document.getElementsByClassName("ant-btn-primary")[0];
              function klikacz() {
                button.click();
              }
              klikacz();

              // Symuluj zdarzenie zmiany wartości pola tekstowego
              var event = new Event("input", { bubbles: true });
              textarea.dispatchEvent(event);
              // // Eksperyment
            } else {
              console.log(
                "Nie znaleziono elementu textarea o identyfikatorze 'colour_data'"
              );
            }
          },
          args: [dataArray],
        });
      } else {
        console.log("Nie znaleziono drugiej karty w bieżącym oknie.");
      }
    });
  }
});

It works, but i dont know Tuya API then i used Device Debugger