https://github.com/umbraco/umbraco.devtools
web browser extension that helps with Developer Experience for developing UI with the new WebComponent based backoffice
https://github.com/umbraco/umbraco.devtools
browser-extension umbraco webcomponents
Last synced: 7 months ago
JSON representation
web browser extension that helps with Developer Experience for developing UI with the new WebComponent based backoffice
- Host: GitHub
- URL: https://github.com/umbraco/umbraco.devtools
- Owner: umbraco
- Created: 2023-03-28T12:58:28.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-06T09:17:49.000Z (almost 2 years ago)
- Last Synced: 2025-06-30T00:53:18.628Z (9 months ago)
- Topics: browser-extension, umbraco, webcomponents
- Language: TypeScript
- Homepage:
- Size: 1.47 MB
- Stars: 7
- Watchers: 15
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Umbraco.DevTools
web browser extension that helps with Developer Experience for developing UI with the new WebComponent based backoffice
### Browser Extension Stores
* [Chrome Web Store](https://chrome.google.com/webstore/detail/umbraco-devtools/gpfiiillbldhondlbdogfaecbpoheedj)
* [FireFox Add-ons](https://addons.mozilla.org/en-GB/firefox/addon/umbraco-devtools/)
* [Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/umbraco-devtools/fdfbdnjojekbgkhlammjcigclgjlopep)
## Developing
* Run `npm install` in the terminal at the root of this repository
* Run `npm run build` or `npm run watch` to have the typescript files in the `src` folder built or watched for changes
* The typescript files are built and placed into the folder called `extension` which the browser extension will load from
* rollup.js is used to compile the typescript files along with bundle any npm node_modules that are used such as Lit for WebComponent development
* Run `npm run start:firefox` to have FireFox open with the extension loaded and monitoring any changes to the files in the `extension` folder
* Run `npm run start:chromium` to have Chrome or chromium based browser open with the extension loaded and monitoring any changes to the files in the `extension` folder
## How it works
#### Registering DevTools Pane
```mermaid
flowchart
A(Browser Extension) --> |Loads manifest from root of folder| B
B(manifest.json) --> |devtools_page| C(registration.html)
C --> | HTML page simply loads registration.js | D(registration.js)
D -->|Uses browser APIs to create the DevTools pane as needed |E[Dev Tools Pane]
```