Pricedoge

Chrome extension for price comparison.

How it works

When you visit a web page, the extension will check the website if it is a goods detail page, search from other platforms, and finally show the result at the top of the current website.

Extension

You can download the packed crx file at: https://github.com/DimensionFoundation/PriceDoge/raw/master/extension/pricedog.crx

We build the extension using React with Typescript.
You can run npm run build to build the extension and load unpacked extension from chrome.

Since we don't want to run npm run eject which will throw everything from react-scripts that we don't necessarily need, we're using rewire to modify some webpack setting. You can check ./extension/scripts/build.js and ./extension/config/webpack.prod.js for reference.

Key pair

The extension will generate a key pair using bip39 once you open the extension's page, you can check ./extension/src/utils/keyStore.ts for reference.

Content script

You can check all the scripts under ./extension/src/contentHandler folder. Every script extends from IContentHandler interface and canHandle() function will be called every time the user visits a website. handle() function will be called if canHandle() returns true.

Background script

You can check all the background services under ./extension/src/backgroundService folder.

Communication between background script && content script && actual web page

Communication between different context is very important since the same code will be executed from different contexts.
You can check the ./extension/src/utils/messaging.ts file if you're in a hurry :)

Since we don't want to check the context every time, we create a MessageCenter to handle all that stuff. Message.send() to send a message and Message.on() to subscribe.

All messages are typed. See ITypedMessages in ./extension/src/utils/messaging.ts.

Searching results provider

• Amazon
• JD.com
• Newegg
• Taobao
  You can check the ./extension/src/services folder to see the actual code. Since Taobao's search is an ajax request, we create a server to complete the search, you can check the Server section to see more.

Localization

You can add your localization under [./extension/src/i18nfolder just likeen](./extension/src/i18nfolder just likeen) folder. Use script to check if localization is complete.

cd extension

npm run i18n-lint

Server

We create a server using Koa with Typescript.
puppeteer is used to completing the actual search, you can check ./server/src/taobao.ts to see more.