Как все отдельные исполнения контента. js в разных фреймах одной и той же страницы могут взаимодействовать друг с другом?

Question

Итак, я создаю расширение, которое автоматически заполняет различные типы форм. Поскольку из URL не видно, какая форма используется на конкретном веб-сайте, мне нужно сопоставить все URL в моем манифесте. Я пытаюсь определить форму по атрибуту sr c на веб-странице.

Некоторые поля определенной формы находятся не в первом кадре. Так что "all_frames" должно быть правдой в моем манифесте. Это означает, что контент. js запускается один раз для каждого кадра или iFrame.

**content.js:**

async function checkForPaymentType(value, attribute = 'src') {
    return document.querySelectorAll(`[${attribute}*="${value}"]`);
}

let hasThisForm;

document.addEventListener('DOMContentLoaded', () => {
    checkForPaymentType('formJs.js').then((value) => {    
    if(value.length) {
        hasThisForm = true;
    }
    if(hasThisForm)
        fillForm();
    });
});

Теперь проблема заключается в том, что только первый кадр имеет "src = 'form Js. js". атрибут в одном из его элементов. Таким образом, он заполняет только те поля в первом кадре.

Моя идея решения

Я пытаюсь сделать что-то вроде глобальной логической переменной ('hasThisForm'), которую можно установить только в true. Поэтому, как только первый кадр обнаружил, что это эта форма на веб-сайте, другие кадры также запускают fillForm ().

Проблемы

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

2. Мне нужны другие исполнения содержимого. js для ожидания первого.

Другим решением было бы иметь что-то вроде window.querySelectorAll, поэтому при каждом выполнении содержимого. js выполняет поиск по всей странице, а не только в ее рамке.

Заранее спасибо:)

Answer 1

Так что я понял это. Как указано в комментарии от @wOxxOm или в этом вопросе ( Как получить доступ ко всем кадрам для доступа к одной глобальной переменной ), вам нужно управлять всем через фоновую страницу.

Вы хотите настроить прослушиватель в каждом кадре и отправить сообщение только из верхнего кадра (на фоновую страницу, которая отправляет его обратно на всю вкладку).

После нескольких часов попыток я заметил, что слушатели даже не были готовы, когда было отправлено сообщение из topFrame. Я отправляю сообщение перед отправкой сообщения, что, на мой взгляд, не идеальный способ. Но нет "listenerIsSet-Event".

Это мой код:

content. js

document.addEventListener('DOMContentLoaded', () => {

    chrome.runtime.onMessage.addListener(
        function (msgFromTopFrame) {
            console.log(msgFromTopFrame)
        });

    if (window === top) {

        Sleep(1000).then(() => {
            const msgToOtherFrames = {'greeting': 'hello'};
            chrome.runtime.sendMessage(msgToOtherFrames);
        });

    }
});

background. js

chrome.runtime.onMessage.addListener((msg, sender) => {
    if(('greeting' in msg)) {
        chrome.tabs.sendMessage(sender.tab.id, msg);  
    }
});

Возможно, вы хотите выполнить некоторый код в зависимости от полученного значения. Вы можете написать это только один раз в слушателе. Он будет выполняться во всех кадрах, включая верхний кадр в качестве фона. js отправляет его во все кадры на вкладке.

Примечание. Могут быть некоторые ошибки, связанные с диктовкой / ключами в сообщениях, «отсылаемых вокруг» в этом коде. Просто зарегистрируйте сообщение во всех слушателях, чтобы получить правильные выражения.