├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js 
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── App.vue
    │   ├── components
    │   │   ├── Map.vue
    │   │   ├── NavBar.vue
    │   │   └── WebMetrics.vue
    │   ├── containers
    │   │   └── MainContainer.vue
    │   ├── index.js
    │   └── styles
    │   │   └── styles.css
    └── extension
    │   └── build
    │       ├── app.bundle.js
    │       ├── app.bundle.js.LICENSE.txt
    │       ├── assets
    │           └── oVUElord_logo.png
    │       ├── background.bundle.js
    │       ├── background.js
    │       ├── content.bundle.js
    │       ├── content_script.js
    │       ├── devtools.html
    │       ├── devtools.js
    │       ├── fontAwesome.js
    │       ├── manifest.json
    │       ├── panel.html
    │       ├── script.bundle.js
    │       └── script.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | bundles/*
4 | src/extension/build/app.bundle.js
5 | src/extension/build/app.bundle.js.LICENSE.txt
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Reactime-Vue
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # KangaVue
 2 | 
 3 | <h4 align="center"> KangaVue is a performance and debugging tool for Vue developers <b>(currently in Beta version)</b>. It displays a snapshot whenever a target application's state is changed. It also displays key web metrics from loading of the application for SEO strategies and overal app performance. </h4>
 4 | 
 5 | After installing KangaVue, you can test its functionalities with your Vue application in development mode.
 6 | 
 7 | ## <b>Installation</b>
 8 | <!-- Include something like this -->
 9 | <!-- [extension](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga) -->
10 | <!-- To get started, install the KangaVue <b style="color:red">EXTENSION LINK TO GO HERE</b> from Chrome Web Store. -->
11 | 
12 | NOTE: The Vue Developer Tools [extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) is also required for KangaVue to run, if you do not already have it installed on your browser.
13 | 
14 | ## <b>How to Use</b>
15 | 
16 | After installing the Chrome extension, just open up your project in the browser.
17 | 
18 | Then open up your Chrome DevTools and navigate to the KangaVue panel.
19 | 
20 | ## <b>Troubleshooting</b>
21 | 
22 | ### ❓ <b>I found a bug in KangaVue</b>
23 | 
24 | KangaVue is an open source project, and we’d really appreciate your help with improving user experience. Please, create a pull request (or issue) to propose and collaborate on changes to a repository.
25 | 
26 | ## <b>Features</b>
27 | 
28 | ### 🔹 Component Hierarchy
29 | 
30 | You can click on the component tree tab in the navigation bar to view your app's component heirarchy. State can be visualized in a Component Graph. 
31 | 
32 | ### 🔹 Web Metrics
33 | 
34 | When your app loads or refreshes, the initial loading metrics will be rendered in a visual display under the Web Metrics Panel. Use these metrics to pinpoint performance issues that may affect your user experience and/or search optimization efforts.
35 | 
36 | 
37 | ## <b>Read More</b>
38 | 
39 | - [KangaVue — Vue.js web metrics in a devtool pouch](https://dxbernstein.medium.com/kangavue-vue-js-web-metrics-in-a-devtool-pouch-3aee7f128a3f)
40 | 
41 | ## <b>Authors</b>
42 | - **Harry Fox** - [@StackOverFlowWhereArtThou](https://github.com/StackOverFlowWhereArtThou)
43 | - **Nathan Richardson** - [@BagelEnthusiast](https://github.com/BagelEnthusiast)
44 | - **David Bernstein** - [@dangitbobbeh](https://github.com/dangitbobbeh)
45 | - **Joseph Stern** - [@josephiswhere](https://github.com/josephiswhere))
46 | 
47 | ## <b>License </b>
48 | 
49 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
50 | 


--------------------------------------------------------------------------------
/babel.config.js :
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         useBuiltIns: "usage",
 7 |         corejs: 3,
 8 |       },
 9 |     ],
10 |   ],
11 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "KangaVue",
 3 |   "version": "1.0.0",
 4 |   "description": "Developer tool for vue",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "webpack --mode production",
 8 |     "start": "webpack serve --mode development"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/StackOverFlowWhereArtThou/KangaVue.git"
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "bugs": {
17 |     "url": "https://github.com/StackOverFlowWhereArtThou/KangaVue/issues"
18 |   },
19 |   "homepage": "https://github.com/StackOverFlowWhereArtThou/KangaVue#readme",
20 |   "dependencies": {
21 |     "apexcharts": "^3.26.0",
22 |     "core-js": "^3.10.0",
23 |     "d3": "^6.6.2",
24 |     "sass": "^1.32.8",
25 |     "vue": "^2.6.12",
26 |     "vue-apexcharts": "^1.6.1",
27 |     "vue-router": "^3.5.1",
28 |     "vued3tree": "^5.1.0",
29 |     "vuetify": "^2.4.9",
30 |     "web-vitals": "^1.1.1"
31 |   },
32 |   "devDependencies": {
33 |     "@babel/core": "^7.13.14",
34 |     "@babel/preset-env": "^7.13.12",
35 |     "autoprefixer": "^9.0.2",
36 |     "babel-loader": "^8.2.2",
37 |     "css-loader": "^5.2.1",
38 |     "mini-css-extract-plugin": "^1.4.1",
39 |     "node-sass": "^5.0.0",
40 |     "postcss-loader": "^3.0.0",
41 |     "sass-loader": "^11.0.1",
42 |     "style-loader": "^2.0.0",
43 |     "vue-loader": "^15.9.6",
44 |     "vue-template-compiler": "^2.6.12",
45 |     "webpack": "^5.30.0",
46 |     "webpack-cli": "^4.6.0",
47 |     "webpack-dev-server": "^3.11.2"
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not dead"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/src/app/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id='mainDiv'>
 3 |     <!-- <div class="nav">
 4 |       <router-link to="/"></router-link><router-link to="/about"></router-link>
 5 |     </div>
 6 |     <router-view /> -->
 7 |     <navbar @renderMetrics="isMapView = false" @renderMap="isMapView = true" @setTree="setTree"/>
 8 |     <main-container :isMapView="isMapView" :treex="treex"/>
 9 |   </div>
10 | </template>
11 | 
12 | 
13 | 
14 | <script>
15 | import Navbar from "./components/NavBar.vue";
16 | import MainContainer from './containers/MainContainer.vue';
17 | 
18 | export default {
19 |   name: "App",
20 |   components: {
21 |     Navbar,
22 |     MainContainer
23 |   },
24 |   methods: {
25 |     setTree(){
26 |     console.log("first tree:", this.treex);
27 |     this.treex=localStorage.treemap; 
28 |     console.log("updated tree:", this.treex);
29 |     }
30 |   },
31 |    data() {
32 |     return {
33 |       isMapView: false,
34 |       treex: undefined
35 |     }
36 |   }
37 | };
38 | </script>
39 | <style>
40 |   #mainDiv {
41 |     height: 100%;
42 |   }
43 | </style>


--------------------------------------------------------------------------------
/src/app/components/Map.vue:
--------------------------------------------------------------------------------
 1 | <template #behavior="{ on, actions }">
 2 |   <div class="pa-2">
 3 |     <tree
 4 |       :data="tree"
 5 |       node-text="name"
 6 |       radius="4px"
 7 |       layoutType="horizontal"
 8 |       duration="400"
 9 |       type="tree"
10 |       key="0"
11 |     >
12 |       <slot name="behavior" :on="on" :actions="actions"> </slot>
13 |     </tree>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import { tree, CollapseOnClick } from 'vued3tree';
19 | export default {
20 |   name: 'Map',
21 |   components: {
22 |     tree,
23 |     CollapseOnClick,
24 |   },
25 |   props: {
26 |     treex: Object
27 |   },
28 |   data (){
29 |     //if(this.treex){
30 |       console.log('treex:', this.treex);
31 |       let newmap = JSON.parse(this.treex);
32 |       console.log("newmap:", newmap);
33 |       return {
34 |         tree: newmap
35 |       }
36 |    // }
37 |   },
38 |   mounted: function(){
39 |     console.log("mounted tree:", this.treex)
40 |   },
41 |   updated: function(){
42 |       console.log("map rerendered")
43 |   },
44 | };
45 | </script>
46 | <style>
47 |  .pa-2 {
48 |   max-width: inherit;
49 |   height: 1000px;
50 | }
51 | .treeclass .nodetree circle {
52 |     fill: #00ffb8;
53 | }
54 | .treeclass .node--internal circle {
55 |     cursor: pointer;
56 |     fill: #13799c;
57 | }
58 | .treeclass .linktree {
59 |   fill: none;
60 |   stroke: #0ea47a;
61 |   stroke-opacity: 0.4;
62 | }
63 | .treeclass .nodetree text {
64 |     font: 15px sans-serif;
65 |     cursor: pointer;
66 | }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/app/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id='navBarDiv'>
 3 |     <button class="treebtn" @click='renderMap()'><i class="fas fa-tree fa-lg"></i><div class="tooltip"><span class="tooltiptext">Component Tree</span></div></button>
 4 |     <button class="treebtn" @click='renderMetrics()'><i class="fas fa-stopwatch-20 fa-lg"></i><div class="tooltip"><span class="tooltiptext">Web Metrics</span></div></button>
 5 |     <button class="treebtn" @click='setTree()'><i class="fas fa-sync fa-lg"></i><div class="tooltip"><span class="tooltiptext">Set Tree</span></div></button>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "Navbar",
12 |   methods: {
13 |     renderMap() {
14 |       this.$emit('renderMap')
15 |     },
16 |     renderMetrics() {
17 |       this.$emit('renderMetrics')
18 |     },
19 |     setTree() {
20 |       // console.log("localstorage:", window.localStorage)
21 |       // this.$root.$emit('localStorage', window.localStorage)
22 |       this.$emit('setTree')
23 |     },
24 |   },
25 |   mounted: () => {
26 |   
27 |     
28 |     // chrome.runtime.onConnect.addListener(function(port) {
29 |     //   console.assert(port.name == "content_script / NavBar");
30 |     //     port.onMessage.addListener(function(msg) {
31 |     //       console.log("message recieved on Nav Bar" + msg);
32 |     //     });
33 |     // });
34 |   },
35 | }
36 | </script>
37 |   
38 | <style>
39 |   #navBarDiv {
40 |     background-color: #262323;
41 |     border-style: solid;
42 |     border-color: #262323;
43 |     height: 50px;
44 |     display: flex;
45 |     justify-content: flex-end;
46 |     align-items: center;
47 |     border-bottom: 5px white;
48 |     /* border-color: red; */
49 |   }
50 |   button {
51 |     height: 100%;
52 |     width: 120px;
53 |     background-color: #262323;
54 |     color: white;
55 |     overflow: visible;
56 |     outline: none;
57 |     border: none;
58 |   }
59 |   .tooltip {
60 |     position: relative;
61 |     display: inline-block;
62 |   }
63 | 
64 |   .tooltiptext {
65 |     visibility: hidden;
66 |     background-color: rgb(138, 250, 190);
67 |     color: black;
68 |     text-align: center;
69 |     padding: 5px 0;
70 |     border-radius: 6px;
71 |     position: absolute;
72 |     z-index: 100;
73 |     top: -25px;
74 |     right: 100%;
75 |   }
76 | 
77 |   .treebtn:hover .tooltiptext {
78 |     visibility: visible;
79 |   }
80 | </style>


--------------------------------------------------------------------------------
/src/app/components/WebMetrics.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="webMetricChart">
  3 |   <b>{{this.webMetricTitle}}</b>
  4 |   <br>
  5 |   {{this.webMetricDescription}}
  6 |   <br>
  7 |   <apexchart type="radialBar" height="200" :options="chartOptions" :series="series"></apexchart>
  8 |   </div>
  9 | </template>
 10 | <script>
 11 | export default {
 12 |   name: 'WebMetrics',
 13 |   props: {
 14 |     webMetricName: String,
 15 |     webMetricValue: Number,
 16 |     webMetricTitle: String,
 17 |     webMetricDescription: String,
 18 |     webMetricBenchmark: Number,
 19 |   },
 20 |   data (){
 21 |     return {
 22 |           series: [this.webMetricValue], 
 23 |           chartOptions: {
 24 |             chart: {
 25 |               height: 200,
 26 |               type: 'radialBar',
 27 |               toolbar: {
 28 |                 show: true
 29 |               }
 30 |             },
 31 |             plotOptions: {
 32 |               radialBar: {
 33 |                 startAngle: -120,
 34 |                 endAngle: 120,
 35 |                  hollow: {
 36 |                   margin: 0,
 37 |                   size: '70%',
 38 |                   background: '#fff',
 39 |                   image: undefined,
 40 |                   imageOffsetX: 0,
 41 |                   imageOffsetY: 0,
 42 |                   position: 'front',
 43 |                   dropShadow: {
 44 |                     enabled: true,
 45 |                     top: 3,
 46 |                     left: 0,
 47 |                     blur: 4,
 48 |                     opacity: 0.24
 49 |                   }
 50 |                 },
 51 |                 track: {
 52 |                   background: '#fff',
 53 |                   strokeWidth: '67%',
 54 |                   margin: 0, // margin is in pixels
 55 |                   dropShadow: {
 56 |                     enabled: true,
 57 |                     top: -3,
 58 |                     left: 0,
 59 |                     blur: 4,
 60 |                     opacity: 0.35
 61 |                   }
 62 |                 },
 63 |             
 64 |                 dataLabels: {
 65 |                   show: true,
 66 |                   name: {
 67 |                     offsetY: -10,
 68 |                     show: true,
 69 |                     color: '#888',
 70 |                     fontSize: '17px'
 71 |                   },
 72 |                   value: {
 73 |                     formatter: function(val) {
 74 |                       return parseInt(val);
 75 |                     },
 76 |                     color: '#111',
 77 |                     fontSize: '36px',
 78 |                     show: true,
 79 |                   }
 80 |                 }
 81 |               }
 82 |             },
 83 |             fill: {
 84 |               colors: ['#e32d4c'],
 85 |               type: 'gradient',
 86 |               gradient: {
 87 |                 shade: 'dark',
 88 |                 type: 'horizontal',
 89 |                 shadeIntensity: 0.5,
 90 |                 gradientToColors: ['#ABE5A1'],
 91 |                 inverseColors: true,
 92 |                 opacityFrom: 1,
 93 |                 opacityTo: 1,
 94 |                 stops: [0, this.webMetricBenchmark],
 95 |               }
 96 |             },
 97 |             stroke: {
 98 |               lineCap: 'round'
 99 |             },
100 |             labels: [this.webMetricName], // Needs to be the metric - used to be Percent
101 |           }
102 |           
103 |           
104 |         }
105 |       }
106 | }
107 | </script>
108 | 
109 | <style scoped>
110 | </style>
111 | 


--------------------------------------------------------------------------------
/src/app/containers/MainContainer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id='mainContainerDiv'>
 3 |       <Map v-if="isMapView" :treex="treex" />
 4 |     <div v-else class="webMetricContainer">
 5 |       <web-metrics webMetricName="LCP" :webMetricValue="LCP" webMetricTitle="Largest Contentful Paint" webMetricDescription="Measures Loading Performance. Benchmark is less than 2500ms." :webMetricBenchmark="2500"/>
 6 |       <web-metrics webMetricName="TTFB" :webMetricValue="TTFB" webMetricTitle="Time to First Byte" webMetricDescription="Measures Time for first byte of information. Benchmark is less than 600ms" :webMetricBenchmark="600"/>
 7 |       <!-- <web-metrics webMetricName="FID" :webMetricValue="FID" webMetricTitle="First Input Delay" webMetricDescription="Measures Interactivity. Benchmark is less than 100ms" :webMetricBenchmark="100"/> -->
 8 |       <web-metrics webMetricName="FCP" :webMetricValue="FCP" webMetricTitle="First Contentful Paint" webMetricDescription="Measures time for page to render the first element of the DOM. There is currently no benchmark."/>
 9 |       <web-metrics webMetricName="CLS" :webMetricValue="CLS" webMetricTitle="Cumulative Layout Shift" webMetricDescription="Measures ratio of all unexpected layout shifts compared to all layout shifts. Benchmark is a ratio less than 0.1" :webMetricBenchmark="0.1"/>
10 |     </div>
11 |     
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import Map from '../components/Map.vue'
17 | import WebMetrics from '../components/WebMetrics.vue'
18 | 
19 | export default {
20 |   components: { Map, WebMetrics },
21 |   name: 'MainContainer',
22 |   props: {
23 |     isMapView: Boolean,
24 |     treex: Object
25 |   },
26 |   data(){
27 |     return {
28 |       LCP: localStorage.LCP,
29 |       TTFB: localStorage.TTFB,
30 |       FID: localStorage.FID,
31 |       FCP: localStorage.FCP,
32 |       CLS: localStorage.CLS,
33 |     }
34 |   }
35 | }
36 | </script>
37 | 
38 | <style>
39 |   
40 | </style>


--------------------------------------------------------------------------------
/src/app/index.js:
--------------------------------------------------------------------------------
 1 | // import Vue from 'vue';
 2 | 
 3 | // const app = new Vue({
 4 | //   el: '#vue-root',
 5 | //   data: {
 6 | //     message: 'Hello Vue!',
 7 | //   },
 8 | // });
 9 | 
10 | // document.addEventListener("DOMContentLoaded", () => {
11 | //   console.log('index.js has been triggered!!!');
12 | //   const NAME = 'Bobby Schmurda';
13 | //   const rootApp = document.getElementById('app');
14 | //   rootApp.innerHTML = `<p>Hello, ${NAME}</p>`;
15 | // });
16 | 
17 | import Vue from 'vue';
18 | import App from './App.vue';
19 | import './styles/styles.css';
20 | 
21 | import VueApexCharts from 'vue-apexcharts'
22 | 
23 | Vue.component('apexchart', VueApexCharts);
24 | 
25 | new Vue({
26 |   el: '#app',
27 |   data:{
28 |     treemap: {},
29 |   },
30 |   render: h => h(App)
31 | });


--------------------------------------------------------------------------------
/src/app/styles/styles.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   height: 100%;
 5 | }
 6 | 
 7 | body {
 8 |   margin: 0;
 9 |   height: 100%;
10 |   padding: 0px;
11 |   background-color: white;
12 | }
13 | 
14 | #app {
15 |   height: 100%;
16 | 
17 | }


--------------------------------------------------------------------------------
/src/extension/build/app.bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * ApexCharts v3.26.0
 3 |  * (c) 2018-2021 Juned Chhipa
 4 |  * Released under the MIT License.
 5 |  */
 6 | 
 7 | /*!
 8 |  * Vue.js v2.6.12
 9 |  * (c) 2014-2020 Evan You
10 |  * Released under the MIT License.
11 |  */
12 | 
13 | /*! svg.draggable.js - v2.2.2 - 2019-01-08
14 |   * https://github.com/svgdotjs/svg.draggable.js
15 |   * Copyright (c) 2019 Wout Fierens; Licensed MIT */
16 | 
17 | /*! svg.filter.js - v2.0.2 - 2016-02-24
18 |   * https://github.com/wout/svg.filter.js
19 |   * Copyright (c) 2016 Wout Fierens; Licensed MIT */
20 | 
21 | /**!
22 | 	 * @fileOverview Kickass library to create and place poppers near their reference elements.
23 | 	 * @version 1.15.0
24 | 	 * @license
25 | 	 * Copyright (c) 2016 Federico Zivolo and contributors
26 | 	 *
27 | 	 * Permission is hereby granted, free of charge, to any person obtaining a copy
28 | 	 * of this software and associated documentation files (the "Software"), to deal
29 | 	 * in the Software without restriction, including without limitation the rights
30 | 	 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
31 | 	 * copies of the Software, and to permit persons to whom the Software is
32 | 	 * furnished to do so, subject to the following conditions:
33 | 	 *
34 | 	 * The above copyright notice and this permission notice shall be included in all
35 | 	 * copies or substantial portions of the Software.
36 | 	 *
37 | 	 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
38 | 	 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
39 | 	 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
40 | 	 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
41 | 	 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
42 | 	 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
43 | 	 * SOFTWARE.
44 | 	 */
45 | 


--------------------------------------------------------------------------------
/src/extension/build/assets/oVUElord_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/KangaVue/f4afae0c6f41e21aca96d7e55460aca07308d4a0/src/extension/build/assets/oVUElord_logo.png


--------------------------------------------------------------------------------
/src/extension/build/background.bundle.js:
--------------------------------------------------------------------------------
1 | !function(){var e={};chrome.tabs.query({active:!0,currentWindow:!0},(function(e){console.log("backgroundjs tabs check:",e)})),chrome.runtime.onConnect.addListener((function(n){var o=function(o,t,s){if("init"==o.name)return e[o.tabId]=n,void console.log("message.tabId background.js ln 27 = ",o.tabId)};n.onMessage.addListener(o),n.onDisconnect.addListener((function(n){n.onMessage.removeListener(o);for(var t=Object.keys(e),s=0,i=t.length;s<i;s++)if(e[t[s]]==n){delete e[t[s]];break}}))})),chrome.runtime.onMessage.addListener((function(n,o,t){if(o.tab){var s=o.tab.id;if(s in e){console.log("conexios",e);let o={...n,tabId:s};console.log("msg from backgroundjs ln58:",o),e[s].postMessage(o)}else console.log("Tab not found in connection list.")}else console.log("sender.tab not defined.");return!0}))}();


--------------------------------------------------------------------------------
/src/extension/build/background.js:
--------------------------------------------------------------------------------
 1 | // chrome.runtime.onConnect.addListener(function (devToolsConnection) {
 2 | //   // assign the listener function to a variable so we can remove it later
 3 | //   let devToolsListener = function (message, sender, sendResponse) {
 4 | //     // Inject a content script into the identified tab
 5 | //     chrome.tabs.executeScript(message.tabId,
 6 | //       { file: message.scriptToInject });
 7 | //   }
 8 | //   // add the listener
 9 | //   devToolsConnection.onMessage.addListener(devToolsListener);
10 | //   devToolsConnection.onDisconnect.addListener(function () {
11 | //     devToolsConnection.onMessage.removeListener(devToolsListener);
12 | //   });
13 | // });
14 | 
15 | /// ///////LISTENER CODE///////////////////
16 | var connections = {};
17 | 
18 | chrome.tabs.query({active: true, currentWindow:true}, function(tabs)
19 | {console.log('backgroundjs tabs check:', tabs)
20 | 
21 | });
22 | 
23 | chrome.runtime.onConnect.addListener(function (port) {
24 | 
25 |     var extensionListener = function (message, sender, sendResponse) {
26 | 
27 |         // The original connection event doesn't include the tab ID of the
28 |         // DevTools page, so we need to send it explicitly.
29 |         if (message.name == "init") {
30 |           connections[message.tabId] = port;
31 |           console.log('message.tabId background.js ln 27 = ', message.tabId)
32 |           return;
33 |         }
34 | 
35 | 	// other message handling
36 |     }
37 | 
38 |     // Listen to messages sent from the DevTools page
39 |     port.onMessage.addListener(extensionListener);
40 | 
41 |     port.onDisconnect.addListener(function(port) {
42 |         port.onMessage.removeListener(extensionListener);
43 | 
44 |         var tabs = Object.keys(connections);
45 |         for (var i=0, len=tabs.length; i < len; i++) {
46 |           if (connections[tabs[i]] == port) {
47 |             delete connections[tabs[i]]
48 |             break;
49 |           }
50 |         }
51 |     });
52 | });
53 | // Receive message from content script and relay to the devTools page for the
54 | // current tab
55 | chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
56 |     // Messages from content scripts should have sender.tab set
57 |     if (sender.tab) {
58 |       var tabId = sender.tab.id;
59 |       if (tabId in connections) {
60 |         console.log('conexios', connections)
61 |         let msg = {...request, tabId}
62 |         console.log('msg from backgroundjs ln58:', msg)
63 |         connections[tabId].postMessage(msg);
64 |       } else {
65 |         console.log("Tab not found in connection list.");
66 |       }
67 |     } else {
68 |       console.log("sender.tab not defined.");
69 |     }
70 |     return true;
71 | });
72 | 
73 | /////////////////////////// New Actual Data \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
74 | 
75 | // Create an object to store tabs information in
76 | // const tabsObj = {};
77 | 
78 | // Listens for messages from content_script
79 | // chrome.runtime.onMessage.addListener((req, sender) => {
80 | //   console.log("Reqeust and Sender \n", req, sender);
81 | 
82 | //   if (req.name) {
83 | //     tabsObj[req.name] = req.value;
84 | //     console.log(tabsObj);
85 | //   }
86 | // });
87 | 


--------------------------------------------------------------------------------
/src/extension/build/content.bundle.js:
--------------------------------------------------------------------------------
1 | !function(){"use strict";var e,t,n,i,a=function(e,t){return{name:e,value:void 0===t?-1:t,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},r=function(e,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var n=new PerformanceObserver((function(e){return e.getEntries().map(t)}));return n.observe({type:e,buffered:!0}),n}}catch(e){}},o=function(e,t){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(e(i),t&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},c=function(e){addEventListener("pageshow",(function(t){t.persisted&&e(t)}),!0)},u="function"==typeof WeakSet?new WeakSet:new Set,s=function(e,t,n){var i;return function(){t.value>=0&&(n||u.has(t)||"hidden"===document.visibilityState)&&(t.delta=t.value-(i||0),(t.delta||void 0===i)&&(i=t.value,e(t)))}},m=-1,d=function(){return"hidden"===document.visibilityState?0:1/0},f=function(){o((function(e){var t=e.timeStamp;m=t}),!0)},p=function(){return m<0&&(m=d(),f(),c((function(){setTimeout((function(){m=d(),f()}),0)}))),{get timeStamp(){return m}}},v={passive:!0,capture:!0},l=new Date,h=function(i,a){e||(e=a,t=i,n=new Date,S(removeEventListener),g())},g=function(){if(t>=0&&t<n-l){var a={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+t};i.forEach((function(e){e(a)})),i=[]}},y=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){h(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,v),removeEventListener("pointercancel",i,v)};addEventListener("pointerup",n,v),addEventListener("pointercancel",i,v)}(t,e):h(t,e)}},S=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,y,v)}))};let E=document.createElement("script");E.src=chrome.runtime.getURL("script.bundle.js"),E.type="module",E.onload=function(){this.remove()},(document.head||document.documentElement).appendChild(E);const w={},L=({name:e,value:t})=>{w[e]=t,chrome.runtime.sendMessage({type:"performance:metric",name:e,value:t,id:"webMetric"})};!function(e){var t,n=a("TTFB");t=function(){try{var t=performance.getEntriesByType("navigation")[0]||function(){var e=performance.timing,t={entryType:"navigation",startTime:0};for(var n in e)"navigationStart"!==n&&"toJSON"!==n&&(t[n]=Math.max(e[n]-e.navigationStart,0));return t}();n.value=n.delta=t.responseStart,n.entries=[t],e(n)}catch(e){}},"complete"===document.readyState?setTimeout(t,0):addEventListener("pageshow",t)}(L),function(e,t){var n,i=p(),m=a("LCP"),d=function(e){var t=e.startTime;t<i.timeStamp&&(m.value=t,m.entries.push(e)),n()},f=r("largest-contentful-paint",d);if(f){n=s(e,m,t);var v=function(){u.has(m)||(f.takeRecords().map(d),f.disconnect(),u.add(m),n())};["keydown","click"].forEach((function(e){addEventListener(e,v,{once:!0,capture:!0})})),o(v,!0),c((function(i){m=a("LCP"),n=s(e,m,t),requestAnimationFrame((function(){requestAnimationFrame((function(){m.value=performance.now()-i.timeStamp,u.add(m),n()}))}))}))}}(L),function(n,m){var d,f=p(),v=a("FID"),l=function(e){e.startTime<f.timeStamp&&(v.value=e.processingStart-e.startTime,v.entries.push(e),u.add(v),d())},h=r("first-input",l);d=s(n,v,m),h&&o((function(){h.takeRecords().map(l),h.disconnect()}),!0),h&&c((function(){var r;v=a("FID"),d=s(n,v,m),i=[],t=-1,e=null,S(addEventListener),r=l,i.push(r),g()}))}(L),function(e,t){var n,i=p(),o=a("FCP"),m=r("paint",(function(e){"first-contentful-paint"===e.name&&(m&&m.disconnect(),e.startTime<i.timeStamp&&(o.value=e.startTime,o.entries.push(e),u.add(o),n()))}));m&&(n=s(e,o,t),c((function(i){o=a("FCP"),n=s(e,o,t),requestAnimationFrame((function(){requestAnimationFrame((function(){o.value=performance.now()-i.timeStamp,u.add(o),n()}))}))})))}(L),function(e,t){var n,i=a("CLS",0),u=function(e){e.hadRecentInput||(i.value+=e.value,i.entries.push(e),n())},m=r("layout-shift",u);m&&(n=s(e,i,t),o((function(){m.takeRecords().map(u),n()})),c((function(){i=a("CLS",0),n=s(e,i,t)})))}(L),window.addEventListener("message",(function(e){if(e.source===window){var t=e.data;"object"==typeof t&&null!==t&&"KangaVUE"!==!t.source&&(console.log("content script sending message, ln45:",t),chrome.runtime.sendMessage(t))}}))}();


--------------------------------------------------------------------------------
/src/extension/build/content_script.js:
--------------------------------------------------------------------------------
 1 | import { getTTFB, getLCP, getFID, getFCP, getCLS } from 'web-vitals';
 2 | 
 3 | let s = document.createElement('script');
 4 | s.src = chrome.runtime.getURL('script.bundle.js');
 5 | s.type = "module"
 6 | s.onload = function () {
 7 |   this.remove();
 8 | };
 9 | (document.head || document.documentElement).appendChild(s);
10 | 
11 | // Performance metrics being calculated by the 'web-vitals' api and
12 | // sent as an object to background.js.
13 | // To learn more about Chrome web vitals, see https://web.dev/vitals/.
14 | const metrics = {};
15 | const gatherMetrics = ({ name, value }) => {
16 |   metrics[name] = value;
17 | 
18 |   chrome.runtime.sendMessage({
19 |     type: 'performance:metric',
20 |     name,
21 |     value,
22 |     id: 'webMetric',
23 |   });
24 | };
25 | 
26 | // Functions that calculate web metric values.
27 | getTTFB(gatherMetrics);
28 | getLCP(gatherMetrics);
29 | getFID(gatherMetrics);
30 | getFCP(gatherMetrics);
31 | getCLS(gatherMetrics);
32 | 
33 | 
34 | // chrome.runtime.onConnect.addListener(function(port) {
35 | //   console.assert(port.name == "content_script / NavBar");
36 | //     port.onMessage.addListener(function(msg) {
37 | //       console.log("message recieved on Nav Bar" + msg);
38 | //     });
39 | // });
40 | 
41 | window.addEventListener('message', function(event) {
42 |   // Only accept messages from the same frame
43 |   if (event.source !== window) {
44 |     return;
45 |   }
46 | 
47 |   var message = event.data;
48 | 
49 |   // Only accept messages that we know are ours
50 |   if (typeof message !== 'object' || message === null ||
51 |       !message.source === 'KangaVUE') {
52 |     return;
53 |   }
54 |   console.log("content script sending message, ln45:", message)
55 |   chrome.runtime.sendMessage(message);
56 | });


--------------------------------------------------------------------------------
/src/extension/build/devtools.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>KangaVue Devtools Page</title>
 8 | </head>
 9 | <body>
10 |     <script type="text/javascript" src="devtools.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/src/extension/build/devtools.js:
--------------------------------------------------------------------------------
 1 | chrome.devtools.panels.create('KangaVue', 'assets/oVUElord_logo.png', 'panel.html', () => {});
 2 | 
 3 | var backgroundPageConnection = chrome.runtime.connect({
 4 |     name: "panel"
 5 | });
 6 | 
 7 | let frontEndConnection = chrome.runtime.connect({
 8 |     name: "frontEnd"
 9 | });
10 | 
11 | backgroundPageConnection.postMessage({
12 |     name: 'init',
13 |     tabId: chrome.devtools.inspectedWindow.tabId
14 | });
15 | 
16 | // let backgroundPageConnection = chrome.runtime.connect({
17 | //     name: "devtools-page"
18 | // });
19 | 
20 | backgroundPageConnection.onMessage.addListener(function (message,) {
21 | chrome.runtime.onMessage.addListener((message, callback) => {
22 |   if (message == "runContentScript"){
23 |     chrome.scripting.executeScript({
24 |       file: 'content_script.js'
25 |     });
26 |   }else if(message.id === 'filteredMap'){
27 |     // console.log("backpagecon:", backgroundPageConnection)
28 |     // console.log('frontendcon:', frontEndConnection)
29 |     console.log("msg:", message)
30 |     console.log("message.tabId:", message.tabId)
31 |     localStorage.setItem('treemap', JSON.stringify(message.map))
32 |     console.log("localstorage:", window.localStorage)
33 |   } else if(message.id === 'webMetric'){
34 |     console.log('Web Metric Received!', message.name, message.value);
35 |     localStorage.setItem(message.name, message.value);
36 |   }
37 | });});
38 | 
39 | 
40 | // // Relay the tab ID to the background page
41 | // chrome.runtime.sendMessage({
42 | //     tabId: chrome.devtools.inspectedWindow.tabId,
43 | //     scriptToInject: "content_script.js"
44 | // });
45 | 
46 | 


--------------------------------------------------------------------------------
/src/extension/build/fontAwesome.js:
--------------------------------------------------------------------------------
1 | window.FontAwesomeKitConfig = {"asyncLoading":{"enabled":false},"autoA11y":{"enabled":true},"baseUrl":"https://ka-f.fontawesome.com","baseUrlKit":"https://kit.fontawesome.com","detectConflictsUntil":null,"iconUploads":{},"id":45213814,"license":"free","method":"css","minify":{"enabled":true},"token":"2babf6893c","v4FontFaceShim":{"enabled":true},"v4shim":{"enabled":true},"version":"5.15.3"};
2 | !function(t){"function"==typeof define&&define.amd?define("kit-loader",t):t()}((function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function r(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?n(Object(o),!0).forEach((function(n){e(t,n,o[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var c,a=t[Symbol.iterator]();!(r=(c=a.next()).done)&&(n.push(c.value),!e||n.length!==e);r=!0);}catch(t){o=!0,i=t}finally{try{r||null==a.return||a.return()}finally{if(o)throw i}}return n}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function c(t,e){var n=e&&e.addOn||"",r=e&&e.baseFilename||t.license+n,o=e&&e.minify?".min":"",i=e&&e.fileSuffix||t.method,c=e&&e.subdir||t.method;return t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/"+c+"/"+r+o+"."+i}function a(t){return t.baseUrlKit+"/"+t.token+"/"+t.id+"/kit-upload.css"}function u(t,e){var n=e||["fa"],r="."+Array.prototype.join.call(n,",."),o=t.querySelectorAll(r);Array.prototype.forEach.call(o,(function(e){var n=e.getAttribute("title");e.setAttribute("aria-hidden","true");var r=!e.nextElementSibling||!e.nextElementSibling.classList.contains("sr-only");if(n&&r){var o=t.createElement("span");o.innerHTML=n,o.classList.add("sr-only"),e.parentNode.insertBefore(o,e.nextSibling)}}))}var f,s=function(){},d="undefined"!=typeof global&&void 0!==global.process&&"function"==typeof global.process.emit,l="undefined"==typeof setImmediate?setTimeout:setImmediate,h=[];function m(){for(var t=0;t<h.length;t++)h[t][0](h[t][1]);h=[],f=!1}function p(t,e){h.push([t,e]),f||(f=!0,l(m,0))}function y(t){var e=t.owner,n=e._state,r=e._data,o=t[n],i=t.then;if("function"==typeof o){n="fulfilled";try{r=o(r)}catch(t){w(i,t)}}b(i,r)||("fulfilled"===n&&v(i,r),"rejected"===n&&w(i,r))}function b(e,n){var r;try{if(e===n)throw new TypeError("A promises callback cannot return that same promise.");if(n&&("function"==typeof n||"object"===t(n))){var o=n.then;if("function"==typeof o)return o.call(n,(function(t){r||(r=!0,n===t?g(e,t):v(e,t))}),(function(t){r||(r=!0,w(e,t))})),!0}}catch(t){return r||w(e,t),!0}return!1}function v(t,e){t!==e&&b(t,e)||g(t,e)}function g(t,e){"pending"===t._state&&(t._state="settled",t._data=e,p(S,t))}function w(t,e){"pending"===t._state&&(t._state="settled",t._data=e,p(O,t))}function A(t){t._then=t._then.forEach(y)}function S(t){t._state="fulfilled",A(t)}function O(t){t._state="rejected",A(t),!t._handled&&d&&global.process.emit("unhandledRejection",t._data,t)}function j(t){global.process.emit("rejectionHandled",t)}function E(t){if("function"!=typeof t)throw new TypeError("Promise resolver "+t+" is not a function");if(this instanceof E==!1)throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._then=[],function(t,e){function n(t){w(e,t)}try{t((function(t){v(e,t)}),n)}catch(t){n(t)}}(t,this)}E.prototype={constructor:E,_state:"pending",_then:null,_data:void 0,_handled:!1,then:function(t,e){var n={owner:this,then:new this.constructor(s),fulfilled:t,rejected:e};return!e&&!t||this._handled||(this._handled=!0,"rejected"===this._state&&d&&p(j,this)),"fulfilled"===this._state||"rejected"===this._state?p(y,n):this._then.push(n),n.then},catch:function(t){return this.then(null,t)}},E.all=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.all().");return new E((function(e,n){var r=[],o=0;function i(t){return o++,function(n){r[t]=n,--o||e(r)}}for(var c,a=0;a<t.length;a++)(c=t[a])&&"function"==typeof c.then?c.then(i(a),n):r[a]=c;o||e(r)}))},E.race=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.race().");return new E((function(e,n){for(var r,o=0;o<t.length;o++)(r=t[o])&&"function"==typeof r.then?r.then(e,n):e(r)}))},E.resolve=function(e){return e&&"object"===t(e)&&e.constructor===E?e:new E((function(t){t(e)}))},E.reject=function(t){return new E((function(e,n){n(t)}))};var _="function"==typeof Promise?Promise:E;function P(t,e){var n=e.fetch,r=e.XMLHttpRequest,o=e.token,i=t;return"URLSearchParams"in window?(i=new URL(t)).searchParams.set("token",o):i=i+"?token="+encodeURIComponent(o),i=i.toString(),new _((function(t,e){if("function"==typeof n)n(i,{mode:"cors",cache:"default"}).then((function(t){if(t.ok)return t.text();throw new Error("")})).then((function(e){t(e)})).catch(e);else if("function"==typeof r){var o=new r;o.addEventListener("loadend",(function(){this.responseText?t(this.responseText):e(new Error(""))}));["abort","error","timeout"].map((function(t){o.addEventListener(t,(function(){e(new Error(""))}))})),o.open("GET",i),o.send()}else{e(new Error(""))}}))}function C(t,e,n){var r=t;return[[/(url\("?)\.\.\/\.\.\/\.\./g,function(t,n){return"".concat(n).concat(e)}],[/(url\("?)\.\.\/webfonts/g,function(t,r){return"".concat(r).concat(e,"/releases/v").concat(n,"/webfonts")}],[/(url\("?)https:\/\/kit-free([^.])*\.fontawesome\.com/g,function(t,n){return"".concat(n).concat(e)}]].forEach((function(t){var e=o(t,2),n=e[0],i=e[1];r=r.replace(n,i)})),r}function F(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},o=e.document||o,i=u.bind(u,o,["fa","fab","fas","far","fal","fad","fak"]),f=Object.keys(t.iconUploads||{}).length>0;t.autoA11y.enabled&&n(i);var s=[{id:"fa-main",addOn:void 0}];t.v4shim.enabled&&s.push({id:"fa-v4-shims",addOn:"-v4-shims"}),t.v4FontFaceShim.enabled&&s.push({id:"fa-v4-font-face",addOn:"-v4-font-face"}),f&&s.push({id:"fa-kit-upload",customCss:!0});var d=s.map((function(n){return new _((function(o,i){P(n.customCss?a(t):c(t,{addOn:n.addOn,minify:t.minify.enabled}),e).then((function(i){o(U(i,r(r({},e),{},{baseUrl:t.baseUrl,version:t.version,id:n.id,contentFilter:function(t,e){return C(t,e.baseUrl,e.version)}})))})).catch(i)}))}));return _.all(d)}function U(t,e){var n=e.contentFilter||function(t,e){return t},r=document.createElement("style"),o=document.createTextNode(n(t,e));return r.appendChild(o),r.media="all",e.id&&r.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&r.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),r}function k(t,e){e.autoA11y=t.autoA11y.enabled,"pro"===t.license&&(e.autoFetchSvg=!0,e.fetchSvgFrom=t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/svgs",e.fetchUploadedSvgFrom=t.uploadsUrl);var n=[];return t.v4shim.enabled&&n.push(new _((function(n,o){P(c(t,{addOn:"-v4-shims",minify:t.minify.enabled}),e).then((function(t){n(I(t,r(r({},e),{},{id:"fa-v4-shims"})))})).catch(o)}))),n.push(new _((function(n,o){P(c(t,{minify:t.minify.enabled}),e).then((function(t){var o=I(t,r(r({},e),{},{id:"fa-main"}));n(function(t,e){var n=e&&void 0!==e.autoFetchSvg?e.autoFetchSvg:void 0,r=e&&void 0!==e.autoA11y?e.autoA11y:void 0;void 0!==r&&t.setAttribute("data-auto-a11y",r?"true":"false");n&&(t.setAttributeNode(document.createAttribute("data-auto-fetch-svg")),t.setAttribute("data-fetch-svg-from",e.fetchSvgFrom),t.setAttribute("data-fetch-uploaded-svg-from",e.fetchUploadedSvgFrom));return t}(o,e))})).catch(o)}))),_.all(n)}function I(t,e){var n=document.createElement("SCRIPT"),r=document.createTextNode(t);return n.appendChild(r),n.referrerPolicy="strict-origin",e.id&&n.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n}function L(t){var e,n=[],r=document,o=r.documentElement.doScroll,i=(o?/^loaded|^c/:/^loaded|^i|^c/).test(r.readyState);i||r.addEventListener("DOMContentLoaded",e=function(){for(r.removeEventListener("DOMContentLoaded",e),i=1;e=n.shift();)e()}),i?setTimeout(t,0):n.push(t)}function T(t){"undefined"!=typeof MutationObserver&&new MutationObserver(t).observe(document,{childList:!0,subtree:!0})}try{if(window.FontAwesomeKitConfig){var x=window.FontAwesomeKitConfig,M={detectingConflicts:x.detectConflictsUntil&&new Date<=new Date(x.detectConflictsUntil),detectionIgnoreAttr:"data-fa-detection-ignore",fetch:window.fetch,token:x.token,XMLHttpRequest:window.XMLHttpRequest,document:document},D=document.currentScript,N=D?D.parentElement:document.head;(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"js"===t.method?k(t,e):"css"===t.method?F(t,e,(function(t){L(t),T(t)})):void 0})(x,M).then((function(t){t.map((function(t){try{N.insertBefore(t,D?D.nextSibling:null)}catch(e){N.appendChild(t)}})),M.detectingConflicts&&D&&L((function(){D.setAttributeNode(document.createAttribute(M.detectionIgnoreAttr));var t=function(t,e){var n=document.createElement("script");return e&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n.src=c(t,{baseFilename:"conflict-detection",fileSuffix:"js",subdir:"js",minify:t.minify.enabled}),n}(x,M);document.body.appendChild(t)}))})).catch((function(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}))}}catch(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}}));
3 | 
4 | // script for manifest file
5 | // "content_security_policy": "script-src 'self' https://kit.fontawesome.com/2babf6893c.js; object-src 'self'",


--------------------------------------------------------------------------------
/src/extension/build/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "KangaVue",
 3 |   "description": "Developer Tool for Vue",
 4 |   "version": "1.0",
 5 |   "permissions": [
 6 |     "contextMenus",
 7 |     "tabs",
 8 |     "activeTab",
 9 |     "storage"
10 |   ],
11 |   "host_permissions": [
12 |     "http://localhost/*",
13 |     "https://localhost/*"
14 |   ],
15 |   "manifest_version": 3,
16 |   "minimum_chrome_version": "10.0",
17 |   "devtools_page": "devtools.html",
18 |   "background": {
19 |     "service_worker": "background.bundle.js"
20 |   },
21 |   "content_scripts": [
22 |     {
23 |       "matches": [
24 |         "http://localhost/*",
25 |         "https://localhost/*"
26 |       ],
27 |       "js": [
28 |         "content.bundle.js"
29 |       ],
30 |       "run_at": "document_start"
31 |     }
32 |   ],
33 |   "web_accessible_resources": [
34 |     {
35 |       "resources": [
36 |         "script.bundle.js"
37 |       ],
38 |       "matches": [
39 |         "http://localhost/*",
40 |         "https://localhost/*"
41 |       ]
42 |     }
43 |   ]
44 |   
45 | }


--------------------------------------------------------------------------------
/src/extension/build/panel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <script src="fontAwesome.js" crossorigin="anonymous"></script>
 9 |     <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
10 |     <title>KangaVue Extension Panel</title>
11 | </head>
12 | 
13 | <body>
14 |     <div id ="app"></div>
15 |     <script src="app.bundle.js"></script>
16 | </body>
17 | 
18 | </html>


--------------------------------------------------------------------------------
/src/extension/build/script.bundle.js:
--------------------------------------------------------------------------------
1 | window.addEventListener("keydown",(()=>{let e=function e(n,t={children:[]}){if(!n.$children)return t;let i=n.$vnode.tag;return i.startsWith("vue-component-")&&(i=i.slice(14)),t.name=i,n.$children.forEach((n=>t.children.push(e(n)))),t}(window.__VUE_DEVTOOLS_INSTANCE_MAP__.get("1:3"));window.postMessage({map:e,source:"kangaVUE",id:"filteredMap"},"*")}));


--------------------------------------------------------------------------------
/src/extension/build/script.js:
--------------------------------------------------------------------------------
 1 | window.addEventListener('keydown', () => {
 2 |   function getMap(c, output = { children: [] }) {
 3 |   if (!c.$children) {
 4 |     return output;
 5 |   }
 6 |   let tag = c.$vnode.tag
 7 |   if(tag.startsWith("vue-component-")){
 8 |     tag = tag.slice(14)
 9 |   }
10 |   output.name = tag;
11 |   c.$children.forEach((child) => output.children.push(getMap(child)));
12 |   return output;
13 | }
14 |   let map = getMap(window.__VUE_DEVTOOLS_INSTANCE_MAP__.get('1:3'))
15 |   window.postMessage({
16 |     map: map,
17 |     source: 'kangaVUE',
18 |     id: 'filteredMap'
19 |   }, '*')
20 |   // chrome.storage.sync.set(
21 |   //   {currTab: window.__VUE_DEVTOOLS_INSTANCE_MAP__}, () => {console.log("stored on", currTab)}
22 |   //   )
23 | });


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const { VueLoaderPlugin } = require('vue-loader');
  3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4 | // const autoprefixer = require("autoprefixer");
  5 | // const ChromeExtensionReloader = require('webpack-chrome-extension-reloader'); // enable hot reloading while developing a chrome extension
  6 | 
  7 | const isDevelopment = process.env.NODE_ENV !== 'production';
  8 | 
  9 | module.exports = {
 10 |   entry: {
 11 |     app: './src/app/index.js',
 12 |     background: './src/extension/build/background.js',
 13 |     content: './src/extension/build/content_script.js',
 14 |     script: './src/extension/build/script.js',
 15 |     // backend: './src/backend/index.ts',
 16 |   },
 17 |   output: {
 18 |     path: path.resolve(__dirname, 'src/extension/build'),
 19 |     filename: '[name].bundle.js',
 20 |   },
 21 |   module: {
 22 |     rules: [
 23 |       {
 24 |         test: /\.txt$/,
 25 |         use: 'raw-loader',
 26 |       },
 27 |       {
 28 |         test: /\.js$/,
 29 |         exclude: /node_modules/,
 30 |         use: {
 31 |           loader: 'babel-loader',
 32 |         },
 33 |       },
 34 |       {
 35 |         test: /\.vue$/,
 36 |         loader: 'vue-loader',
 37 |         options: {
 38 |           loaders: {
 39 |             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
 40 |             // the "scss" and "sass" values for the lang attribute to the right configs here.
 41 |             // other preprocessors should work out of the box, no loader config like this nessessary.
 42 |             scss: 'vue-style-loader!css-loader!sass-loader',
 43 |             sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
 44 |           },
 45 |           // other vue-loader options go here
 46 |         },
 47 |       },
 48 |       {
 49 |         test: /\.css$/,
 50 |         use: ['vue-style-loader', 'css-loader'],
 51 |       },
 52 |       // {
 53 |       //   test: /\.s?css$/,
 54 |       //   use: [
 55 |       //     "style-loader",
 56 |       //     MiniCssExtractPlugin.loader,
 57 |       //     "css-loader",
 58 |       //     {
 59 |       //       loader: "postcss-loader",
 60 |       //       options: {
 61 |       //         plugins: () => [autoprefixer()],
 62 |       //       },
 63 |       //     },
 64 |       //     "sass-loader",
 65 |       //   ],
 66 |       // },
 67 |       // {
 68 |       //   test: /\.module\.s(a|c)ss$/,
 69 |       //   loader: [
 70 |       //     isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
 71 |       //     {
 72 |       //       loader: 'css-loader',
 73 |       //       options: {
 74 |       //         modules: true,
 75 |       //         sourceMap: isDevelopment,
 76 |       //       },
 77 |       //     },
 78 |       //     {
 79 |       //       loader: 'sass-loader',
 80 |       //       options: {
 81 |       //         sourceMap: isDevelopment,
 82 |       //       },
 83 |       //     },
 84 |       //   ],
 85 |       // },
 86 |       // {
 87 |       //   test: /\.s(a|c)ss$/,
 88 |       //   exclude: /\.module.(s(a|c)ss)$/,
 89 |       //   loader: [
 90 |       //     isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
 91 |       //     'css-loader',
 92 |       //     {
 93 |       //       loader: 'sass-loader',
 94 |       //       options: {
 95 |       //         sourceMap: isDevelopment,
 96 |       //       },
 97 |       //     },
 98 |       //   ],
 99 |       // },
100 |     ],
101 |   },
102 |   plugins: [
103 |     new VueLoaderPlugin(),
104 |     // new MiniCssExtractPlugin(),
105 |     new MiniCssExtractPlugin({
106 |       filename: isDevelopment ? '[name].css' : '[name].[hash].css',
107 |       chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css',
108 |     }),
109 |   ],
110 |   // resolve: {
111 |   //   //   alias: {
112 |   //   //     vue$: "vue/dist/vue.runtime.esm.js",
113 |   //   //   },
114 |   //   //   extensions: ["*", ".js", ".vue", ".json"],
115 |   //   extensions: ['.js', '.jsx', '.scss'],
116 |   // },
117 | };
118 | 


--------------------------------------------------------------------------------