---
# System prepended metadata

title: Untitled

---

WEB Extension API Whoier
---
* The extension seems to fit for Chrome as well as for Firefox

1. There is a script responding for API interface.
    * `browser-extension/src/services/api.js`

This has three routes:
* 1. `/vpn/api/register/proxy?email=?`
* 2. `/vpn/api/countries/proxy`
* 3. `/vpn/api/proxies?code=?`

As can be seen extension works through proxy API.

1. The 1s - the register route, takes `<email>` query parameter and creates new free user with the payment plan 0 and payment system = free.
    It means this user will have its expire time.

    As the result of this route next values are returned:
    ![reference link](https://i.imgur.com/fSQ8Rxf.png)
2. This route lists available country codes-name pairs for (in our case) all proxy servers.
    ![](https://i.imgur.com/SPTG9r9.png)
    
    This allows our proxy extension to select proper server to connect to from the server pool in respect to chosen region (country).
3. At last this route returns available proxy servers for direct connections:
    ![](https://i.imgur.com/10MJth9.png)

    ** This can be improved (needed region can be filtered on server instead of puking all available servers to the client)
    
    * auth - credentials to connect to proxy with
    * servers - list of regions and the respective hosts parameters (host, port, city)



---
How to deploy.
--

Standard procedure:
1. create venv: `python3 -m venv venv` and activate it
2. Install requirements
3. If you have database prepared then just proceed, otherwise do as follows:
    If you have old database deployed then you need to run command:
    `mg db alembic_move`
    to skip creating table structure for old database scheme
    
    This will create only project-specific tables (such as those which were configs in past). But the old tables will remain untouched.
    
    Although if you wanna start form ground, then just create database (refer .env for details) and run `alembic upgrade head`
    
3. You can fill sample data if you don't have any data using command:
    `mg db mockdata`
    
4. Run server: `mg site server run`
5. Get the extension and update the host in .env file at the root of extension dir:
    ![](https://i.imgur.com/2kA5yjI.png)
    WHOER_BACKEND_BASE_URL - set it to http://localhost:8000
6. Build an extension:
7.1. `npm run build` - this will create build/ dir
7.2. For CHROME, go to settings->More Tools->Extensions, click "LOAD UNPACKED" at the top of page and select the `build/` dir
7.3. For Firefox: open hamburger settings->Add-ons and themes
    In this window select gear icon:
    ![](https://i.imgur.com/1zYUMtd.png)
    and click "DEBUG ADD-ON" 
    and then select "LOAD TEMPORARY ADD-ON" netx
    put your cursor on "manifest.json"
8. Test it with the compiled extension. (the host must be specified in .env at root of extension)
9. Also you can test it right in your browser, just walk routes:
    * localhost:8000/vpn/api/register/proxy?email=random@em.ail
    * localhost:8000/vpn/api/countries/proxy
    * localhost:8000/vpn/api/proxies?code=`<code>`
where the `<code>` is code returned from the `register` route


If you use sample data it must return some results.


All other vpn methods work in a similar way:
    * localhost:8000/vpn/api/openvpn?code=?
    This for example, will return not only servers, but certificates along with the TLS key.
    
    Certificates 