Giter Club home page Giter Club logo

pricedoge's Introduction

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

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.

pricedoge's People

Contributors

tedko avatar yisiliu avatar jack-works avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.