Открытие боковой панели расширения Chrome – конфликт между нажатием пользовательской кнопки и иконкой на панели расширения.

Вопрос или проблема

const toggleSidePanel = () => {
  try {
     chrome.runtime.sendMessage({ action: 'toggleSidePanel' });
    } catch (e) {}
}
button.querySelector('#ainisa_icon').addEventListener('click', () => {
        toggleSidePanel();
    });

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
if (message.action === 'toggleSidePanel') {
    await handleSidePanelToggle(sender);
}  else if (message.action === 'closeSidePanel') {
    closeAllSidePanels(sender.tab.windowId, sender.tab.id);
} else if (message.action === 'openSidePanel') {
    await openAllSidePanels(sender.tab.windowId, sender.tab.id);
} else if (message.action === 'google') {
    await firebaseAuth();
} else {
    //
}

sendResponse({
    received: true
});
   return true;
});

const panelStates = new Map();
async function handleSidePanelToggle(sender) {
const tab = sender.tab;
const id = tab.windowId
const tabId = tab.id
const isPanelOpen = panelStates.get(id) || false;

  if (isPanelOpen === true) {
    closeAllSidePanels(id, tabId);
  } else {
    await openAllSidePanels(id, tabId);
  }
}
  async function openAllSidePanels(id, tabId) {
  panelStates.set(id, true);
  const isPanelOpen = panelStates.get(id) || false;
  chrome.sidePanel.setOptions({ enabled: true, path: "ainisa.html" });
  chrome.sidePanel.open({windowId:id}, () => {});
  const result = await chrome.storage.local.get(['user_token']);
  chrome.tabs.sendMessage(tabId, { action: 'updateSidePanel', visible: isPanelOpen });

}

Ответ или решение

Решение проблемы с открытием боковой панели расширения Chrome

Ваше расширение для Chrome с функцией боковой панели столкнулось с конфликтом между двумя способами её открытия: через кнопку на веб-странице и иконку на панели инструментов. После выполнения определенной последовательности действий боковая панель не открывается должным образом, что требует перезагрузки страницы. В данной статье мы рассмотрим возможные причины и предложим решения для решения этой проблемы.

Описание проблемы

Как вы указали, последовательность действий приводит к сбою в работе боковой панели:

1. После перезагрузки страницы, иконка расширения на панели инструментов успешно открывает боковую панель.
2. Закрытие боковой панели через иконку на панели инструментов также работает.
3. После нажатия кнопки на веб-странице и закрытия боковой панели через неё, попытка открыть её снова через иконку на панели инструментов не срабатывает, и требуется перезагрузка страницы для восстановления функциональности.

Анализ кода и выявление проблем

Ваш код показывает, что управление состоянием боковой панели осуществляется с помощью объекта Map, который хранит информацию о том, открыта ли боковая панель для конкретного окна. Однако есть несколько моментов, которые могут вызывать описанную вами проблему:

1. Несоответствующая реализация логики открытия и закрытия: Код для обработки открытия и закрытия боковой панели зависит от состояния, записанного в panelStates. Если вы не обновляете это состояние соответствующим образом при использовании обеих кнопок (на панели инструментов и на веб-странице), это может вызывать неправильные переключения.

2. Отсутствие синхронизации: В вашем коде нет явной проверки состояния боковой панели после её закрытия через кнопку на веб-странице. Это может привести к тому, что состояние panelStates не обновляется правильно.

Предложенное решение

Чтобы устранить проблему, вам следует внести изменения в логику обработки сообщений и управления состоянием боковой панели. Рекомендации для оптимизации кода:

1. Обновление состояния панели после каждого действия: Убедитесь, что состояние panelStates всегда обновляется в ответ на любое действие, связанное с боковой панелью.

async function handleSidePanelToggle(sender) {
    const tab = sender.tab;
    const id = tab.windowId;
    const tabId = tab.id;
    const isPanelOpen = panelStates.get(id) || false;

    if (isPanelOpen) {
        await closeAllSidePanels(id, tabId);
    } else {
        await openAllSidePanels(id, tabId);
    }
}

2. Проверка состояния и получение актуального значения при каждом открытии: Перед тем, как открыть боковую панель, можете проверить текущее состояние и, при необходимости, обновить его.

async function openAllSidePanels(id, tabId) {
    panelStates.set(id, true); // Устанавливаем состояние
    chrome.sidePanel.setOptions({ enabled: true, path: "ainisa.html" });
    chrome.sidePanel.open({ windowId: id }, async () => {
        // Убедитесь, что состояние обновляется здесь
        chrome.tabs.sendMessage(tabId, { action: 'updateSidePanel', visible: true });
    });
}

Заключение

Ваша проблема с открытием боковой панели расширения Chrome возникает из-за конфликтующей логики между двумя способами её активации и управления состоянием. Следуя вышеуказанным рекомендациям, вы сможете устранить этот конфликт и улучшить функциональность вашего расширения. Помните, что для обеспечения корректной работы такого функционала важна ясная и четкая логика управления состоянием и взаимодействия между компонентами вашего расширения.