https://github.com/mahboub99/sample-diagnostics-app-for-chrome-os---starter-bug
https://github.com/mahboub99/sample-diagnostics-app-for-chrome-os---starter-bug
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mahboub99/sample-diagnostics-app-for-chrome-os---starter-bug
- Owner: Mahboub99
- Created: 2021-04-08T11:06:52.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-14T20:56:25.000Z (about 5 years ago)
- Last Synced: 2025-02-06T06:49:37.509Z (over 1 year ago)
- Language: Vue
- Size: 853 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Sample Diagnostics App for Chrome OS Starter-Bug
[](https://github.com/Mahboub99/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug/contributors)
[](https://github.com/Mahboub99/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug/issues)
[](https://github.com/Mahboub99/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug/network)
[](https://github.com/Mahboub99/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug/stargazers)
[](https://github.com/Mahboub99/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug/blob/master/LICENSE)
## About
> Sample Diagnostics App for Chrome OS Starter-Bug
### Installation
1. **_Clone the repository_**
```sh
$ git clone https://github.com/Mahboub99/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug
```
2. **_Install global prequests**
> you need to install node [here](https://nodejs.org/en/download/)
```sh
$ npm install -g @vue/cli
$ npm install http-server -g
```
## Milestone 1: Create a skeleton Telemetry Progressive Web App
### File structure
```shell
| .browserslistrc
| .gitignore
| babel.config.js
| package-lock.json
| package.json
| README.md
|
+---public
| | favicon.ico
| | index.html
| | robots.txt
| |
| \---img
| \---icons
| android-144x144.png
| android-192x192.png
| android-36x36.png
| android-48x48.png
| android-72x72.png
| android-96x196.png
| android-chrome-192x192.png
| android-chrome-512x512.png
| android-chrome-maskable-192x192.png
| android-chrome-maskable-512x512.png
| apple-touch-icon-120x120.png
| apple-touch-icon-152x152.png
| apple-touch-icon-180x180.png
| apple-touch-icon-60x60.png
| apple-touch-icon-76x76.png
| apple-touch-icon.png
| BadgeLogo.scale-100.png
| BadgeLogo.scale-125.png
| BadgeLogo.scale-150.png
| BadgeLogo.scale-200.png
| BadgeLogo.scale-400.png
| favicon-16x16.png
| favicon-32x32.png
| msapplication-icon-144x144.png
| mstile-150x150.png
| pwa-192x192.png
| pwa-512x512.png
| safari-pinned-tab.svg
| SplashScreen.scale-100.png
| SplashScreen.scale-125.png
| SplashScreen.scale-150.png
| SplashScreen.scale-200.png
| SplashScreen.scale-400.png
| Square150x150Logo.scale-100.png
| Square150x150Logo.scale-125.png
| Square150x150Logo.scale-150.png
| Square150x150Logo.scale-200.png
| Square150x150Logo.scale-400.png
| Square310x310Logo.scale-100.png
| Square310x310Logo.scale-125.png
| Square310x310Logo.scale-150.png
| Square310x310Logo.scale-200.png
| Square310x310Logo.scale-400.png
| Square44x44Logo.scale-100.png
| Square44x44Logo.scale-125.png
| Square44x44Logo.scale-150.png
| Square44x44Logo.scale-200.png
| Square44x44Logo.scale-400.png
| Square44x44Logo.targetsize-16.png
| Square44x44Logo.targetsize-16_altform-unplated.png
| Square44x44Logo.targetsize-24.png
| Square44x44Logo.targetsize-24_altform-unplated.png
| Square44x44Logo.targetsize-256.png
| Square44x44Logo.targetsize-256_altform-unplated.png
| Square44x44Logo.targetsize-48.png
| Square44x44Logo.targetsize-48_altform-unplated.png
| Square71x71Logo.scale-100.png
| Square71x71Logo.scale-125.png
| Square71x71Logo.scale-150.png
| Square71x71Logo.scale-200.png
| Square71x71Logo.scale-400.png
| Store-2400x1200.png
| Store-358x173.png
| Store-358x358.png
| Store-414x180.png
| Store-414x468.png
| Store-558x558.png
| Store-558x756.png
| Store-846x468.png
| StoreLogo.scale-100.png
| StoreLogo.scale-125.png
| StoreLogo.scale-150.png
| StoreLogo.scale-200.png
| StoreLogo.scale-400.png
| tile150x150.png
| tile310x150.png
| tile310x310.png
| tile70x70.png
| Wide310x150Logo.scale-100.png
| Wide310x150Logo.scale-125.png
| Wide310x150Logo.scale-150.png
| Wide310x150Logo.scale-200.png
| Wide310x150Logo.scale-400.png
|
\---src
| App.vue
| main.js
| registerServiceWorker.js
|
+---assets
| logo.png
|
+---components
+---router
| index.js
|
\---views
SystemData.vue
SystemManager.vue
SystemState.vue
```
### how to install
> navigate to `starter-bug-phase1`
```shell
$ npm install
$ npm run build
$ http-server dist/
```
> then open `http://127.0.0.1:8080/`
### Screenshots
> First now you have this and you can download from the install icon
> now you have an app
>Data Page
> Manager Page
> State Page
## Milestone 2: Create a simple Chrome Extension.
### File structure
```sell
| background.js
| manifest.json
| out.txt
| popup.css
| popup.html
| popup.js
|
\---images
icon16.png
icon24.png
icon32.png
system.png
```
### Note
> I used manifest V2 in this phase but in phase 3 I used V3
### How to install
> go to [chrome extensions](chrome://extensions/)
> select load unpacked
> navigate to `starter-bug-phase2`
> now you can bin the extention:
### screen shot working
> you can go to the background page
>open console to see fetched information
## Milestone 3: Enable the PWA and Chrome Extension to communicate with each other
### How to install
> for `starter-bug-phase1_extended` same as `phase1`
> for `starter-bug-phase2_extended` same as `pahse2`
### Note:
> In this Phase I used manifest V3 in Chrome Extension, instead of V2.
### screen shots
> extention using V3
> the pwa
### Contributors
### Licence
[MIT Licence](https://github.com/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug/blob/main/LICENSE)
