Блог

Я создаю веб-сайт (WebsiteA) с помощью Laravel 8 и Vuejs и очищаю расширение Chrome с помощью JavaScript. Расширение очищает содержимое другого веб-сайта, и я хочу сохранить очищенные данные с веб-сайта в строку аутентифицированного пользователя в базе данных WebsiteA. Я застрял в получении электронной почты или идентификатора аутентифицированного пользователя с веб-сайта в расширение Chrome, чтобы расширение знало, где хранить данные.

До сих пор я пытался отправить сообщение с WebsiteA на расширение, определив идентификатор расширения и используя: chrome.runtime.sendMessage и на расширении: chrome.runtime.onMessageExternal.addListener

но vue, похоже, не распознает SendMessage и отображает: "TypeError: Cannot read property 'sendMessage' of undefined"

Почему vue показывает эту ошибку?
Есть ли другой способ?

Все, что мне нужно, это передать идентификатор или адрес электронной почты с WebsiteA в расширение Chrome на websiteB.

[Решена]: Я использовал window.postMessage с веб-страницы и window.addEventListener для расширения.

Веб-страница (Vuejs):

  window.postMessage({ type: "FROM_PAGE", text: user_details }, "*"); 
  

content_script:

 window.addEventListener("message", function(event) { 

      var user_details = event.data.text;

      if (event.data.type amp;amp; (event.data.type == "FROM_PAGE")) 
      {
                              { ... }
           chrome.runtime.sendMessage({'message': 'send_1' , 'data': user_details},function(response){ ... }

      }
  

scraping_script:

 chrome.runtime.sendMessage({'message':'send_2', 'data': order},function(response){ ... });
  

background_script:

 var user_details;
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
        if(request.message=="send_1")
        {
            user_details = request.data;

            { ... }

        }
        else if(request.message=='send_2')
        {
            send_data = user_details;

            { ...some post request... } 
 
        });
  

Таким образом, webpageA отправляет user_details в content_script, а content_script отправляет их в фоновый скрипт. Как только скребок выполняет очистку с веб-страницы, отправляет данные в фоновый скрипт. Затем фоновый скрипт выполняет запрос post, отправляя user_details и очищенные данные на веб-страницу.