Mahboub99/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug

Sample Diagnostics App for Chrome OS Starter-Bug

About

Sample Diagnostics App for Chrome OS Starter-Bug

Installation

1. Clone the repository

$ git clone https://github.com/Mahboub99/Sample-Diagnostics-App-for-Chrome-OS---Starter-Bug

2. _Install global prequests

you need to install node here

$ npm install -g @vue/cli
$ npm install http-server -g

Milestone 1: Create a skeleton Telemetry Progressive Web App

File structure

|   .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

$ 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

|   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

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

Ahmed Mahboub

Licence

MIT Licence