diff --git a/package.json b/package.json index 4f3e5e0..877073d 100644 --- a/package.json +++ b/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": { diff --git a/src/assets/images/content-samples.png b/src/assets/images/content-samples.png new file mode 100644 index 0000000..7138f4c Binary files /dev/null and b/src/assets/images/content-samples.png differ diff --git a/src/assets/images/content-usage.png b/src/assets/images/content-usage.png new file mode 100644 index 0000000..9825a50 Binary files /dev/null and b/src/assets/images/content-usage.png differ diff --git a/src/pages/content/detector.ts b/src/pages/content/detector.ts index da62dcf..bddefa6 100644 --- a/src/pages/content/detector.ts +++ b/src/pages/content/detector.ts @@ -1,4 +1,4 @@ -import type Konva from "konva"; +import type Konva from 'konva'; declare global { interface Window { @@ -6,10 +6,10 @@ declare global { } } -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, + }), ); }); diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx index a1f4b79..9c15d71 100644 --- a/src/pages/popup/Popup.tsx +++ b/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(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 = () => {
+ }}> Looking for Konva...
- Using Konva? + Using Konva?
- 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:
-
- - console.log(window.Konva) - + +
+ There're 2 ways of using Konva, if you're using the second one (Way 2) please follow as below:
+
)}