已解决：将经过身份验证的用户的 email 从网页发送到 chrome 扩展程序

Question

I'm creating a website (websiteA) with Laravel 8 and Vuejs and a scraping chrome extension with JavaScript. The extension is scraping the content of another websiteB and I want to store the scraped data from the websiteB to the authenticated user's row in the websiteA's database. I'm stuck in getting the authenticated user's email or id from the websiteA to the chrome extension so the extension knows where to store the data.

So far I've tried to send message from websiteA to the extension by defining the extension's ID and by using: chrome.runtime.sendMessage and on the extension: chrome.runtime.onMessageExternal.addListener

but vue doesn't seem to recognise sendMessage and displays: "TypeError: Cannot read property 'sendMessage' of undefined"

Why does vue show this error?
Is there any other way?

All I need is to pass the id or email from the websiteA to the chrome extension on websiteB.

Answer 1

[Solved]: I used window.postMessage from the webpageA and window.addEventListener on the extension.

Webpage (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 && (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... } 
 
        });

So the webpageA sends user_details to the content_script and the content_script sends them to the background script. As soon as the scraper does the scraping from the webpageB, sends the data to the background script. Then the background script does the post request sending the user_details and the scraped data to the webpageA.