Konva Devtools

Chrome Extension • Firefox Addon • Edge Addon

Features

• Support all Konva objects (Text, Image, Rect, Star, Group, Stage, Layer,....)
• Edit object attributes in place, right in the extension
• Changing Filter is supported
• Select object by Cursor
• Dark theme supported
• Multiple stages supported

Develop

To Develop the extension:

• First clone the project
• Run yarn install
• Run yarn dev (for Chrome/Edge) or yarn dev:firefox for Firefox

After that, a dist folder will be generated, next based on your browser do the following

• Chrome: open chrome://extensions/ and drag dist folder there
• Edge: open edge://extensions/ and drag dist folder there
• Firefox: open about:debugging#/runtime/this-firefox > Load Temporary Add > Select any file in the dist folder

Note: for Firefox, to make background script + popup page work on load, right click the Konva extension icon on browser bar -> select "Always allow....""

Build

To build project for publish, run npm run build (for Chrome/Edge) or npm run build:firefox for Firefox

Architecture

Overview

Module	File	Description	Screenshot
background_script	pages/background/index.ts	Background script runs in background, used to receive detection result from content_script, and update extension icon from black to blue (if Konva is found)
content_script	pages/content/index.ts	Content script runs on host page loaded, it has an interval to detect Konva by injecting detector.ts to the host page (because content_script doesn't shared same JS runtime with host page) then push message background script to update extension icon. It also receives message for detection request from popup page to detect Konva immediately
devtools	pages/devtools/index.ts	Devtools page, which will spawn panel for devtools UI. It has an interval to keep on detecting Konva from host page until found, and only add panel if Konva is found
panel	pages/panel/index.tsx	React UI for the devtool, details see below
popup	pages/popup/index.tsx	React UI for popup page, on click the icon to open the popup page, we send a message to content_script to request detect immediately

Panel architecture

Panel is just a normal React app that renders detected Konva element tree except it has 2 extra parts:

• devtools: global variables that will be injected to host page at runtime
• bridge function: a function to execute JS code at host page, it's just a wrapper of chrome.devtools.inspectedWindow.eval that returns a Promise

The devtools will inject the follow global variables to host page:

• root __KONVA_DEVTOOLS_GLOBAL_HOOK__: has some common functions Konva(), content(), stage()
• window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.outline: helper functions to get Konva object tree
• window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.selection helper functions to select/highlight/active/update attributes for Konva object
• window.__KONVA_DEVTOOLS_GLOBAL_HOOK__.overlay: function to render a blue highlight box on top of Konva object when highlighting

The devtools has a root method connect that will convert all the above variables/functions to string then use bridge to execute it on the host page

Note that the bridge uses chrome.devtools.inspectedWindow.eval requires result of the evaluation expression to be serializable so if it returns something like an instance of a Class then it'll throw error

Thanks

• pixi-inspector: which gives me very great idea on how to structure my code
• react devtools: My extension UI is inspired by this
• chrome-extension-boilerplate-react-vite : Boiler template project to create Chrome extension