fix: use same condition for popup page and devtool when detect Konva

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva-inspector",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Devtools for your Konva App",
   "license": "MIT",
   "repository": {

src/pages/content/detector.ts

@@ -1,15 +1,15 @@
-import type Konva from "konva";
+import type Konva from 'konva';
 
 declare global {
   interface Window {
     Konva: typeof Konva;
   }
 }
 
-document.addEventListener("__KONVA_DEVTOOLS__DETECT_KONVA", function (e) {
+document.addEventListener('__KONVA_DEVTOOLS__DETECT_KONVA', function () {
   document.dispatchEvent(
-    new CustomEvent("__KONVA_DEVTOOLS__DETECTION_RESULT", {
-      detail: !!window.Konva,
-    })
+    new CustomEvent('__KONVA_DEVTOOLS__DETECTION_RESULT', {
+      detail: !!window.Konva && !!window.Konva.stages && !!window.Konva.Util,
+    }),
   );
 });

src/pages/popup/Popup.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useState } from "react";
-import "@pages/popup/Popup.css";
-import checkIcon from "@assets/images/check-mark-icon.svg";
-import logoIcon from "@assets/images/icon128.png";
+import { useEffect, useState } from 'react';
+import '@pages/popup/Popup.css';
+import checkIcon from '@assets/images/check-mark-icon.svg';
+import logoIcon from '@assets/images/icon128.png';
+import contentSamples from '@assets/images/content-samples.png';
+import contentUsage from '@assets/images/content-usage.png';
 
 const Popup = () => {
   const [isKonva, setIsKonva] = useState<boolean>(false);
@@ -11,16 +13,12 @@ const Popup = () => {
 
     function detect() {
       chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-        chrome.tabs.sendMessage(
-          tabs[0].id,
-          { type: "__KONVA_DEVTOOLS__REQUEST_DETECTION" },
-          function (response) {
-            setIsKonva(response);
-            if (response) {
-              clearInterval(timeout);
-            }
+        chrome.tabs.sendMessage(tabs[0].id, { type: '__KONVA_DEVTOOLS__REQUEST_DETECTION' }, function (response) {
+          setIsKonva(response);
+          if (response) {
+            clearInterval(timeout);
           }
-        );
+        });
       });
     }
 
@@ -44,34 +42,25 @@ const Popup = () => {
         <div>
           <div
             style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
               marginBottom: 10,
-            }}
-          >
+            }}>
             <img className="pulse" src={logoIcon} width={32} />
             Looking for Konva...
           </div>
           <div>
-            Using <strong style={{ color: "#0f83cd" }}>Konva</strong>?
+            Using <strong style={{ color: '#0f83cd' }}>Konva</strong>?
           </div>
           <div style={{ marginTop: 8 }}>
-            After creating Konva app. Make sure to set it to Window object. Try
-            to log it to console:
+            After creating Konva app. Make sure to set it to Window object. Try to log it to console:
           </div>
-          <div style={{ marginTop: 20, marginBottom: 10 }}>
-            <code
-              style={{
-                backgroundColor: "#202020",
-                color: "rgb(145, 168, 203)",
-                padding: 8,
-                borderRadius: 4,
-              }}
-            >
-              console.log(window.Konva)
-            </code>
+          <img style={{ width: '100%' }} src={contentSamples} />
+          <div style={{ marginTop: 8, marginBottom: 8 }}>
+            There&apos;re 2 ways of using Konva, if you&apos;re using the second one (Way 2) please follow as below:
           </div>
+          <img style={{ width: '100%' }} src={contentUsage} />
         </div>
       )}
     </div>