Develop Progress & Code Go Through
The Chrome Extension develop by using Javascript and Google Chrome APIs. Google kindly provided a complete documentation website and tutorial for the developer to learn how to develop a Chrome extension.
Some of the core functions for our plugin will have a code go through below.
In the most shopping website, the cart page path includes the word 'cart'. For example Amazon.com: https://www.amazon.com.au/gp/cart/view.html?ref=nav_cart
By using Chrome.tabs.getSelected, we can know the URL path of the current tab and use Javascript to determine if the URL is the shopping cart page or not.
chrome.tabs.getSelected(null, function(tab) {
var link = document.createElement("a");
link.href = tab.url;
if (link.href.includes("cart")) {
This might can cover all the website with shopping car page. But we will keep adding key words to help the extension determine website.
After the plugin determine user in a shopping cart page and prepare to pay, the extension will exclude a function like this
chrome.tabs.remove(tab.id, function() {}); to close current tab.
In Google Chrome's API, there is one calls chrome.runtime.onMessage. By using onMessage API, we are able to make the plugin interacts with the page's DOM and sent data to front-end.
For getting Amazon website's item price and shopping list, I used two common javascript method getElementById and getElementsByClassName to get the data.
let Item_price = document.getElementById("sc-subtotal-amount-activecart").textContent;
let Item_list = document.getElementsByClassName("a-list-item")[0].textContent;
The Notification function packaged to a function calls show(), It can be found in Plugin/index.js.
When the show() function executed, It will send a response to content.js, then content.js will start interacting with page's DOM and get the data we want.
After the data send back to front-end, It will use a Chrome API calls new Notification to send a notification to the user.
new Notification("Hi", {
icon: "assets/images/logo.png",
body: "Are you sure to spend" + price + "?"
});
Also, the show() function will exclude an AJAX call to send item list and price to our back-end Node server, It will be using for further purpose.
$.ajax({
url:"http://localhost:3000/api/price",
type:"POST",
data:{
itemPrice:price,
itemList:item
},
success:(res)=>{
alert ("login!")
},
error:(err)=>{
console.log(err);
}
})
The web application is developed by using React and Node. Some import components code will explain below.
React Components list:
- App.jsx
- Game.jsx
- Game2.jsx
- Game3.jsx
- Homepage.jsx
- Registe.jsx
- Routes.jsx
- Tutorial.jsx
- Welcome.jsx
Registe.jsx implements google login function by using by using a component calls react-google-login.
This component will collect user's Google username as their puzzle pay username. And using it for email function.
let postData = {
name : res.w3.ig,
email : res.w3.U3,
token: res.Zi.access_token,
pic: res.w3.Paa
};
The email code can be found in server/index.js We using express and nodemailer to implement this function to send html5 email to the observer.
const htmlEmail = `
<h3>Hi ${req.body.email}</h3>
<p>${req.body.name} is using Puzzle Pay to control their spending habits, and wants you to help them. Below is their item cart that they want to buy: ${price} ${items}</p>
<p>If you agree what they are buying, you can tell them the solution to the puzzle below:</p>
<h1>expenses, items, struggle</h1>
<p>Thank you,</p>
<p>PuzzlePay</p>`
The user name, observer email, item price and item list are all dynamic. They are sent from our plugin or another component by using AJAX and express API.
The games are three simple components using if condition to determine user is right or not.
if (this.state.useranswer1 == this.state.answer1 && this.state.useranswer2 == this.state.answer2
&&this.state.useranswer3 == this.state.answer3)
When user input all answered right, they will be navigated to end of the puzzle page