Идея как бы livereload в браузере

[MC-XOBAHCK]

У меня два монитора. В обоих мониторах открыт браузер Google Chrome.
В первом - админка сайта, редактирование записи.
Во втором - фронт сайта, где открыта редактируемая в первом мониторе (в админке) запись.

Идея - при сохранении записи в админке, чтобы обновлялась страница во втором открытом браузере. Сделать что то типа livereload'а, чтобы страница сама обновлялась.

Если не ошибаюсь, такое можно реализовать, но есть сомнения. Не будет ли помехой то что страница находится во втором экземпляре браузера?

Подскажите, такое же реально реализовать или я ошибаюсь?

[j0hnik]

browser Sync используй, отлично работает, не только на втором мониторе, на всех устройствах в одной сети будут обновляться.
https://youtu.be/9qbdCruqpys?t=5108
вот тут видео гайд даже есть (что и зачем)

[MC-XOBAHCK]

j0hnik, спасибо за совет, но я знаю что такое browser Sync, это не подходит.

Есть сайт. Он работает в сети, то есть не локально, а находится на php-хостинге.
Хочу чтобы при редактировании статьи в админке (при сохранении) - во втором окне браузера Chrome обновлялась страница сайта с этой редактируемой статьёй.

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

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

[j0hnik]

напишите простейший скрип который будет спрашивать дату изменения, добавьте временно, потом удалите.

[Aetae]

Нормально общаются - главное чтоб асинхронно. Можно через SharedWorker, можно через событие 'storage'... Подключаешь скрипт для авторизованного админа и погнал.

[MC-XOBAHCK]

напишите простейший скрип который будет спрашивать дату изменения, добавьте временно, потом удалите.

Сохранение статьи происходит через ajax. Событие что статья сохранена отлавливаю через мутатор. Тут всё норм.

Далее отправляю сообщение в фоновый скрипт (background.js):

let urlFrontPage = 'https://example.com/category/article';

chrome.runtime.sendMessage({
    url: urlFrontPage,
    updateFrontPage: true    // идентификатор для слушателя в файле background.js
});

И теперь вроде бы осталось самое простое, в файле background.js ставлю слушатель:

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

        if (request.updateFrontPage) {

            /**
             * Получить id вкладки у которой урл == request.url
             */
            chrome.tabs.query({url: request.url}, function (tabs) {
                
            });

            
            /**
             * Обновить вкладку
             */
            chrome.tabs.update( tabId ); // ???
        }

    }
);

Но не могу понять из документации https://developer.chrome.com/extensi...s#method-query как получить id вкладки, которую нужно обновить. Возможно ещё нужно и id окна в котором вкладка находится получить.

Смотрю в метод обновляющий вкладку https://developer.chrome.com/extensi...#method-update вроде бы достаточно только id вкладки.

В общем тыкаюсь пока как id вкладки получить, чтобы этот айдишник в update запихать.

[Aetae]

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

        if (request.updateFrontPage) {

            /**
             * Получить id вкладки у которой урл == request.url
             */
            chrome.tabs.query({url: request.url}, function (tabs) {
                 /**
                 * Обновить вкладку
                 */
                tabs.forEach(({id}) => chrome.tabs.update(id))
            });
           
        }

    }
);

Но универсальный скрипт для админа логичней.

[MC-XOBAHCK]

Aetae,
так ошибку выдаёт. Ругается на строчку:

tabs.forEach(({id}) => chrome.tabs.update(id))

Вот что пишет:

Error handling response: TypeError: Error in invocation of tabs.update(optional integer tabId, object updateProperties, optional function callback): No matching signature.

Я вот эти параметры:

chrome.tabs.query({url: request.url}, function (tabs) {

написал от балды. Не факт что это правильно. Сижу разбираюсь с этим chrome.tabs.query. Ищу в гугле может на какой пример понятный наткнусь.

[MC-XOBAHCK]

Странно.
Делаю так:

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

        if (request.updateFrontPage) {

            chrome.tabs.query({url: request.url}, function (tabs) {

                // tabs.forEach(({id}) => chrome.tabs.update(id));

                tabs.forEach( tab => console.log(tab) );

            });
        }

    }
);

В консоле для фоновой страницы выводит:

active: true
audible: false
autoDiscardable: true
discarded: false
favIconUrl: "https://example.com/favicon.ico"
height: 939
highlighted: true
id: 2149
incognito: false
index: 0
mutedInfo: {muted: false}
pinned: false
selected: true
status: "complete"
title: "Название статьи"
url: "https://example.com/category/article"
width: 1680
windowId: 162

Параметры правильные - от той страницы которую нужно обновить.

Делаю так:

chrome.runtime.onMessage.addListener(
    function (request, sender) {
        if (request.updateFrontPage) {

            chrome.tabs.query({url: request.url}, function (tabs) {

                tabs.forEach(tab => chrome.tabs.update( tab.id, {} ));

            });

        }
    }
);

Вообще ничего не происходит.

А если в update передавать только один параметр:

tabs.forEach(tab => chrome.tabs.update( tab.id ));

то выдаёт ошибку

Error handling response: TypeError: Error in invocation of tabs.update(optional integer tabId, object updateProperties, optional function callback): No matching signature.

[MC-XOBAHCK]

Когда консолю вот так:

tabs.forEach( tab => console.log(tab) );

если открыто 2-3 вкладки с одной и той же страницей которая должна обновиться, то в консоль выводит всё правильно, 2-3 объекта с разными айдишниками.

Вот как их заставить обновляться?