Fixed: Transmitting user's verified email from website to chrome extension

I am currently in the process of developing a website named websiteA using Laravel 8 and Vuejs, along with a Chrome extension that utilizes JavaScript for web scraping. This extension is designed to extract content from another websiteB, and my goal is to store this scraped data directly into the authenticated user's row within websiteA's database. However, I have encountered an obstacle in terms of retrieving the authenticated user's email or ID from websiteA to the Chrome extension, as it needs this information to correctly save the data.

Up to this point, my attempts have involved sending a message from websiteA to the extension by specifying the extension's ID and utilizing: chrome.runtime.sendMessage while managing the incoming message on the extension side using 

chrome.runtime.onMessageExternal.addListener

Unfortunately, I have encountered an issue where Vue does not recognize the sendMessage method, resulting in the following error being displayed: 

"TypeError: Cannot read property 'sendMessage' of undefined"

Why is Vue displaying this error? Is there an alternative approach that could be more effective?

In essence, my primary objective is to successfully transmit either the user's ID or email from websiteA to the Chrome extension present on websiteB.

javascriptlaravelvue.jsgoogle-chromegoogle-chrome-extension

Answer №1

[Resolved]: I implemented a communication method using window.postMessage on WebpageA and window.addEventListener within the extension.

Webpage (Using Vue.js):

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

In this setup, user_details are sent from WebpageA to the content_script, which further relays them to the background script. Once the scraping is done on WebpageB, the scraped data is sent to the background script. Finally, the background script handles a post request by sending the user_details and the scraped data back to WebpageA.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancements in Converting JSON Objects to HTML Lists Using jQuery

I have created a function that converts a multi-dimensional JSON object into an HTML list. You can check it out here: http://jsfiddle.net/KcvG6/ Why is the function rendering the lists twice? Update: http://jsfiddle.net/KcvG6/2/ Are there any impro ...

javascriptjqueryjson

Is there a problem with the string comparison in my JavaScript code?

I am dealing with various XML files specific to different operating systems. Here is an excerpt from the SunOS XML: <osname>SunOS </osname> This data is extracted using jQuery: var osname = $(this).find('osname').text(); However ...

javascriptjqueryxmlxslt

Lifting Formik's "dirty" value/state to the parent component: A step-by-step guide

Parent Component const Mother = () => { const [dusty, setDusty] = useState(false) return ( <ChildComponent setDusty={setDusty} /> ) } Child.js ... <Formik initialValues={initialValues} onSubmit={onSubmitHandler} validationSchema={sch ...

javascriptreactjsformik

Troubleshooting in Chrome's Sources tab reveals a webpack directory containing various versions of Vue files

Recently, I encountered an issue with debugging vue files in the sources tab. The problem arose out of nowhere, as everything was functioning fine before. Currently, the sources tab displays multiple versions of each vue file, all compressed and inaccessi ...

vue.jsgoogle-chromewebpack

How can I define the PropType for an object containing a combination of strings and functions?

Trying to define a prop, which is an object of strings and functions. I set proptypes as component.propTypes = { propName: PropTypes.objectOf(PropTypes.oneOf([PropTypes.string, PropTypes.func]) } However, I encountered an error message stating that it r ...

javascriptreactjstypesmaterial-uireact-proptypes

Using JavaScript Arrays to Make Labels in Chart.js

I am currently working with Chart.js and have a JavaScript array containing values that look like this: var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}'); I am passing the "obj" array to my Chart.js, filling out the ...

javascriptarrayschartslabel

Is there a way to transfer the input value from a textfield in one component to another component in ReactJS?

I have a scenario where I need to pass the value of a text area from one component in reactjs to another. The component's value is stored using a useState hook in the first component, and I want to access it in another component to run a map() functio ...

javascriptreactjsnext.jsfrontend

JavaScript Lint Warning: Avoid declaring functions inside a loop - unfortunately, there is no way to bypass this issue

In my React JS code snippet, I am attempting to search for a value within an object called 'categories' and then add the corresponding key-value pair into a new map named sortedCategories. var categoriesToSort = []; //categoriesToSort contains ...

javascriptnode.jsreactjsjslint

Search for spaces and brackets in a file name, excluding the file extension using Regular Expressions

Currently utilizing javascript and I have a specific string let filename1 = "excluder version(1).pdf" Keep in mind that the extension may vary, like jpg or png I am looking to replace the original string with the desired outcome is it possible ...

javascriptnode.jsreactjsregexregexp-replace

Attempting to display an HTML image utilizing data storage

I'm currently working on building a database for animals at an animal shelter. I have created tables containing species information and when a user selects a specific species, all available animals are displayed. Now, I want users to be able to click ...

javascriptjqueryhtml

Exploring Nested Collections with KnockoutJs in an Asp.net MVC Environment

I have the following .net class: public class JobDetailsDTO { public string JobName { get; set; } public string CompanyName { get; set; } public String[] IndustryName; } I am trying to connect this to a Knockout JS model, but my nested collec ...

c#javascriptjqueryasp.net-mvcknockout.js

Having trouble handling file uploads in Laravel via JQuery Ajax requests

When attempting to upload a CSV / Excel file and receiving it through an ajax request, the process is not functioning as anticipated. I employed a formdata object to upload the files in this manner: const formData = new FormData() formDa ...

javascriptphpjquerylaravel

Change the code from a for-loop to use the Array#map method

I have been working on a simple JavaScript function and attempting to convert the code from using a for-loop to Array#map. I'm sharing my code in the following fiddle as I am currently learning about array map: http://jsfiddle.net/newtdms2/. function ...

javascriptjqueryhtmlangularjsbackbone.js

What is the best way to categorize a collection of objects within a string based on their distinct properties?

I am working with an array of hundreds of objects in JavaScript, each object follows this structure : object1 = { objectClass : Car, parentClass : Vehicle, name : BMW } object2 = { objectClass : Bicycle, parentClass : Vehicle, name : Giant } object3 = { ob ...

javascripttypescriptalgorithmsorting

Employing the Map function in React leads to an error that is undefined

Upon simplifying my code, it seems that I am encountering an unresolved issue with the map function being used in different locations. I have noticed that code from examples running on platforms like Codepen does not work in my locally created react app p ...

javascriptreactjs

Error with object props in React using Typescript

Here's a scenario; I have a list of 'Reviews' that I am trying to render. The Proptype for these reviews is as follows: export interface Props { title: string; name: string; reviewdesc: string; rating: number; } In the pare ...

javascriptreactjstypescript

Analyzing viewer engagement by monitoring the duration of video watched using JavaScript

I need a way to monitor video views for individual users, using a table in the database called Viewings. Each viewing is associated with both a user and a video, and keeps track of the duration watched as well as the percentage of the video completed. Whe ...

javascriptruby-on-railsajaxevent-tracking

Leverage recursion for code optimization

I'm currently working on optimizing a function that retrieves JSON data stored in localStorage using dot notation. The get() function provided below is functional, but it feels verbose and limited in its current state. I believe there's room for ...

javascriptjsonrecursionfunctional-programming

Is MapView in React Native restricted to explicit markers only?

I'm facing a challenging problem while working on my app's mapview. I have been struggling to find a solution for dynamically repopulating the mapview. Initially, I attempted the following approach: render() { const dynamicMarker = (lat, long, ...

javascriptreact-nativeexporeact-native-maps

Adding express.js to a Pre-existing vue.js/webpack Setup

Can express.js be added to an existing vue.js/webpack project that currently only uses node.js without a framework? If the vue.js project is created at the root folder level, can a sub-folder be added at the root level for the express.js files? Will this ...

node.jsexpressvue.js