Есть ли проблема с функциональностью прослушивания сообщения в Vue – Plasmo?

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

Есть ли проблема с функциональностью прослушивания сообщения в Vue – Plasmo?

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

Судя по предоставленной информации, вы сталкиваетесь с ошибкой, связанной с отсутствием экспорта функции listen из модуля @plasmohq/messaging. Давайте разберем проблему и предложим возможное решение.

Ошибка

Ошибка, которую вы получили, говорит о том, что модуль @plasmohq/messaging не содержит экспортируемой функции listen. Это может происходить по нескольким причинам:

1. Изменение API: Возможно, в последней версии библиотеки было изменено или удалено API, что привело к тому, что функция listen больше не доступна.

2. Неправильный импорт: Убедитесь, что вы импортируете нужные функции из правильного модуля.

Решение

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

2. Убедитесь, что установленная версия актуальна: Проверьте версию библиотеки @plasmohq/messaging, установленную в вашем проекте. Вы можете сделать это, запустив команду:

   npm list @plasmohq/messaging

   Если версия устарела, выполните обновление:

   npm install @plasmohq/messaging@latest

3. Использование других функций: Если функция listen была удалена или изменена, попробуйте использовать альтернативные методы для передачи сообщений. Например, в зависимости от вашего кода, вы можете использовать подходы, такие как sendMessage или подписку на события.

Пример кода

Если вы хотите передать сообщение из вашего контентного скрипта в Popup.vue, вы можете использовать sendMessage следующим образом:

В вашем контентном скрипте:

import { sendMessage } from '@plasmohq/messaging';

sendMessage({ type: 'SEND_MESSAGE', payload: 'Ваше сообщение здесь' });

В Popup.vue:

<template>
  <div>
    <h1>Сообщение из скрипта:</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import { listen } from '@plasmohq/messaging';

export default {
  setup() {
    const message = ref('');

    onMounted(() => {
      listen((message) => {
        if (message.type === 'SEND_MESSAGE') {
          message.value = message.payload;
        }
      });
    });

    return { message };
  }
}
</script>

Заключение

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