已解决：将经过身份验证的用户的电子邮件从网页发送到 chrome 分机

Question

我正在使用 Laravel 8 和 Vuejs 创建一个网站 (websiteA)，并使用 JavaScript 创建一个抓取 chrome 扩展。该扩展正在抓取另一个网站 B 的内容，我想将抓取的数据从网站 B 存储到网站 A 数据库中经过身份验证的用户行。我一直在将经过身份验证的用户的电子邮件或 ID 从 websiteA 获取到 chrome 扩展程序，以便扩展程序知道将数据存储在何处。

到目前为止，我已经尝试通过定义扩展程序的 ID 并使用以下方法将消息从 websiteA 发送到扩展程序： chrome.runtime.sendMessage 在扩展名上：chrome.runtime.onMessageExternal.addListener

但 vue 似乎无法识别 sendMessage 并显示： "TypeError: Cannot read property 'sendMessage' of undefined"

为什么vue会显示这个错误？
还有其他办法吗？

我只需要将 id 或电子邮件从网站 A 传递到网站 B 上的 chrome 扩展。

Answer 1

[已解决]：我使用了网页 A 中的 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 && (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... } 
 
        });

所以网页A发送user_details给content_script，content_script发送给后台脚本。抓取器从网页 B 抓取数据后，立即将数据发送到后台脚本。然后后台脚本执行 post 请求，将 user_details 和抓取的数据发送到网页 A.

已解决：将经过身份验证的用户的电子邮件从网页发送到 chrome 分机

SOLVED: Sending authenticated user's email from webpage to chrome extension

javascript

google-chrome

google-chrome-extension

laravel

vue.js