CODEWITHSUNDEEP
javascriptphpjquerygoogle-chromegoogle-chrome-extension
Inconspicuous
Inconspicuous

Reputation: 23

How to retrieve info from database to display with Chrome extension

I am trying to write my first chrome extension. The workflow goes something like this -When the extension is installed and active if a user hovers over a specific product/ID displayed on the page, the extension retrieves related vendor data about the product with the ID.

This is how I thought about this:

  1. Use jQuery attr to access the ID on mouse over.
  2. Post this ID to a retrieve.php file with .post() method
  3. The retrieve.php file retrieves the data from database
  4. Display the data in a tool tip on the web page.

I have some queries for the above process:

  1. I am able to get this working on a local XAMPP server but how will it work online as the chrome extension will not have access to server. What is the way around to retrieve data without using PHP?

  2. I am able to get the logic working but am unable to place these in respective files - Will all my logic reside in background.js ?

Any suggestions on getting this started will be much appreciated.

Upvotes: 1

Views: 1913

Answers (1)

Tomi
Tomi

Reputation: 116

You could build a very simple API on your server that responds with JSON to any request it receives after processing it. Like this:

{"firstVar":"foo","secondVar":"bar" }

Your chrome extension can then make an xmlhttp request to this server and and process the returned data.(You could also use JSONP and wrap the response in a callback function which will execute as soon as you have the reponse)

The JS extension will be able to deal with the JSON nicely as it can understand that format so you can then choose to display the data in whatever way you want.

Essentially, what you want is a server that can take an ID posted to it and return the corresponding date in a nice and readable format. And a chrome extension that can make an request to a server and then process the response. Build and test them separately (keep positing an ID to the server and see the response and for your JS side at first instead of making requests to your unfinished API just set a static response to begin with which will be the same as an expected response.

Upvotes: 1

Related Questions