feat: fetch packageInfo when the Indicator component created

gulpfile.js

@@ -41,7 +41,10 @@ async function buildCustomElements(outputDirPath) {
       },
     },
     define: {
-      'process.env': {},
+      'process.env': {
+        // TODO: Need to run this for each extension (chrome/firefox)
+        EXTENSION_ID: process.env.EXTENSION_ID,
+      },
     },
     plugins: [vue({ customElement: true }), svgLoader()],
   });

src/background/bridge.js

@@ -20,8 +20,11 @@ const listeners = {
 };
 
 export const listen = () => {
-  chrome.runtime.onMessage.addListener(({ action, data }, _sender, sendResponse) => {
+  const listener = ({ action, data }, _sender, sendResponse) => {
     Promise.resolve(listeners[action](data)).then(sendResponse);
     return true;
-  });
+  };
+
+  chrome.runtime.onMessage.addListener(listener);
+  chrome.runtime.onMessageExternal.addListener(listener);
 };

src/content/bridge.js

@@ -3,6 +3,7 @@ import { PACKAGE_INFO_ACTION } from '../bridge-sync';
 export const getPackageInfo = async (packageID) => {
   return new Promise((resolve) =>
     chrome.runtime.sendMessage(
+      process.env.EXTENSION_ID,
       {
         action: PACKAGE_INFO_ACTION,
         data: packageID,

src/custom-elements/indicator.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="overlay-indicator"
-    :class="{ 'overlay-indicator--issues': package.issues ?? length }"
+    :class="{ 'overlay-indicator--issues': issues }"
     @mouseenter="
       initTooltipPosition();
       this.overIndicator = true;
@@ -13,7 +13,7 @@
     "
     ref="overlay"
   >
-    <div class="overlay-indicator__icon">{{ package.issues }}</div>
+    <div class="overlay-indicator__icon">{{ issues }}</div>
     <div class="overlay-indicator__text">
       <slot></slot>
     </div>
@@ -29,21 +29,24 @@
         ref="overlayTooltip"
       >
         <!-- test to open url in new page svg-->
-        <a target="_blank" :href="`https://www.npmjs.com/package/${package.name}`">{{ package.name }}</a>
+        <a target="_blank" :href="`https://www.npmjs.com/package/${packageInfo?.name}`">{{ packageInfo?.name }}</a>
 
         <!-- test to load svg-->
-        <component :is="`${package.type}_logo`"></component>
+        <component :is="`${packageInfo?.type}_logo`"></component>
 
         <!-- just show all package json at the moment-->
-        <div>{{ package }}</div>
+        <div>{{ packageInfo }}</div>
       </div>
     </teleport>
   </div>
 </template>
 
 <script>
+import { getPackageInfo } from '../content/bridge';
 import npm_logo from './assets/npm_logo.svg?component';
 
+const sum = (arr) => arr.reduce((a, b) => a + b, 0);
+
 const TOOLTIP_POSITION = {
   TOP_START: 'top_start',
   TOP_END: 'top_end',
@@ -74,17 +77,12 @@ export default {
       tooltipOpen: false,
       overTooltip: false,
       overIndicator: false,
+      packageInfo: null,
     };
   },
   computed: {
-    store() {
-      return window.__overlay_global_store || {};
-    },
-    packageId() {
-      return `${this.overlayIndicatorPackageType}/${this.overlayIndicatorPackageName}`;
-    },
-    package() {
-      return this.store.packages[this.packageId] || {};
+    issues() {
+      return this.packageInfo ? sum(Object.values(this.packageInfo.sources).map(({ issues }) => issues)) : 0;
     },
   },
   methods: {
@@ -263,6 +261,12 @@ export default {
       }, 300);
     },
   },
+  created() {
+    getPackageInfo({ type: this.overlayIndicatorPackageType, name: this.overlayIndicatorPackageName }).then((res) => {
+      console.log('res', res);
+      this.packageInfo = res;
+    });
+  },
   mounted() {
     this.initTooltipPosition();
   },

src/manifest.chrome.json

@@ -31,5 +31,8 @@
       "matches": ["<all_urls>"]
     }
   ],
+  "externally_connectable": {
+    "matches": ["*://stackoverflow.com/*"]
+  },
   "manifest_version": 3
 }