-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(@lexical/devtools): Added basic extension scaffolding (#5747)
- Loading branch information
Showing
44 changed files
with
10,454 additions
and
519 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
packages/lexical-devtools/.browser-profiles/chromium/.gitignore
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
* | ||
!.gitignore |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
.output | ||
stats.html | ||
stats-*.json | ||
.wxt | ||
web-ext.config.ts | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
# Lexical DevTools browser extension | ||
|
||
This is the source code for the Lexical DevTools browser extension. | ||
|
||
## Local development | ||
|
||
Lexical DevTools extension uses [WXT](https://wxt.dev/) framework to simplify development. Please refer to [WXT Development Guide](https://wxt.dev/guide/development.html) for comprehensive documentation. | ||
|
||
**TLDR:** | ||
```bash | ||
$ npm run dev | ||
# In browser: Alt+R to force reload extension | ||
``` | ||
|
||
**Useful Hints:** | ||
- Extension activity log: [chrome://extensions/?activity=eddfjidloofnnmloonifcjkpmfmlblab](chrome://extensions/?activity=eddfjidloofnnmloonifcjkpmfmlblab) | ||
- Status of ServiceWorkers: [chrome://serviceworker-internals/?devtools](chrome://serviceworker-internals/?devtools) | ||
- WXT Framework debugging: `DEBUG_WXT=1 npm run dev` | ||
|
||
## Design | ||
|
||
This extension follows typical [Browser DevTools architecture](https://developer.chrome.com/docs/extensions/how-to/devtools/extend-devtools) that includes sereral independent contexts that communicate via events or extension APIs. | ||
|
||
<figure align="center"> | ||
<img src="./docs/architecture-diagram.png" alt="DevTools extension architecture" width="526"> | ||
<figcaption>DevTools extension architecture.</figcaption> | ||
</figure> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
{ | ||
"name": "@lexical/devtools", | ||
"description": "Lexical DevTools browser extension", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"scripts": { | ||
"dev": "wxt", | ||
"dev:firefox": "wxt -b firefox", | ||
"build": "wxt build", | ||
"build:firefox": "wxt build -b firefox", | ||
"zip": "wxt zip", | ||
"zip:firefox": "wxt zip -b firefox", | ||
"compile": "tsc --noEmit", | ||
"postinstall": "wxt prepare" | ||
}, | ||
"dependencies": { | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"@eduardoac-skimlinks/webext-redux": "3.0.1-release-candidate", | ||
"zustand": "^4.5.1", | ||
"webext-bridge": "~6.0.1" | ||
}, | ||
"devDependencies": { | ||
"@types/react": "^18.2.46", | ||
"@types/react-dom": "^18.2.18", | ||
"@vitejs/plugin-react": "^4.2.1", | ||
"typescript": "^5.3.3", | ||
"lexical": "0.14.2", | ||
"wxt": "^0.17.0", | ||
"vite": "^5.2.2" | ||
} | ||
} |
38 changes: 38 additions & 0 deletions
38
packages/lexical-devtools/src/components/EditorsRefreshCTA.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
*/ | ||
|
||
import * as React from 'react'; | ||
import {useState} from 'react'; | ||
|
||
interface Props { | ||
tabID: number; | ||
setErrorMessage: (value: string) => void; | ||
sendMessage: (message: string, t: null, target: string) => Promise<unknown>; | ||
} | ||
|
||
function EditorsRefreshCTA({tabID, setErrorMessage, sendMessage}: Props) { | ||
const [isRefreshing, setIsRefreshing] = useState(false); | ||
|
||
const handleRefreshClick = () => { | ||
setIsRefreshing(true); | ||
sendMessage('refreshLexicalEditorsForTabID', null, `window@${tabID}`) | ||
.catch((err) => { | ||
setErrorMessage(err.message); | ||
console.error(err); | ||
}) | ||
.finally(() => setIsRefreshing(false)); | ||
}; | ||
|
||
return ( | ||
<button onClick={handleRefreshClick} disabled={isRefreshing}> | ||
{isRefreshing ? 'Refreshing...' : 'Refresh'} | ||
</button> | ||
); | ||
} | ||
|
||
export default EditorsRefreshCTA; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
*/ | ||
import {onMessage} from 'webext-bridge/background'; | ||
|
||
import store from '../store'; | ||
import storeBackgroundWrapper from '../store-sync/background'; | ||
|
||
export default defineBackground(() => { | ||
// Way for content script & injected scripts to get their tab ID | ||
onMessage('getTabID', async (message) => { | ||
let tabID: number | undefined = message.sender.tabId; | ||
if (message.sender.context === 'popup') { | ||
tabID = (await browser.tabs.query({active: true, currentWindow: true}))[0] | ||
.id; | ||
} | ||
if (tabID === undefined) { | ||
throw new Error( | ||
`Could not get tab ID for message: ${message.toString()}`, | ||
); | ||
} | ||
return tabID; | ||
}); | ||
|
||
// Store initialization so other extension surfaces can use it | ||
// as all changes go through background SW | ||
storeBackgroundWrapper(store); | ||
}); |
29 changes: 29 additions & 0 deletions
29
packages/lexical-devtools/src/entrypoints/content/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
*/ | ||
import {allowWindowMessaging, sendMessage} from 'webext-bridge/content-script'; | ||
|
||
import useExtensionStore from '../../store'; | ||
import storeReadyPromise from '../../store-sync/content-script'; | ||
import injectScript from './injectScript'; | ||
|
||
export default defineContentScript({ | ||
main(ctx) { | ||
allowWindowMessaging('lexical-extension'); | ||
|
||
sendMessage('getTabID', null, 'background') | ||
.then((tabID) => { | ||
return storeReadyPromise(useExtensionStore).then(() => { | ||
injectScript('/injected.js'); | ||
}); | ||
}) | ||
.catch(console.error); | ||
}, | ||
matches: ['<all_urls>'], | ||
registration: 'manifest', | ||
runAt: 'document_end', | ||
}); |
17 changes: 17 additions & 0 deletions
17
packages/lexical-devtools/src/entrypoints/content/injectScript.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
*/ | ||
|
||
import {PublicPath} from 'wxt/browser'; | ||
|
||
export default function injectScript(src: PublicPath) { | ||
const s = document.createElement('script'); | ||
s.src = browser.runtime.getURL(src); | ||
s.type = 'module'; // ESM module support | ||
s.onload = () => s.remove(); | ||
(document.head || document.documentElement).append(s); | ||
} |
73 changes: 73 additions & 0 deletions
73
packages/lexical-devtools/src/entrypoints/devtools-panel/App.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
*/ | ||
|
||
import * as React from 'react'; | ||
import {useState} from 'react'; | ||
import {sendMessage} from 'webext-bridge/devtools'; | ||
|
||
import lexicalLogo from '@/public/lexical.svg'; | ||
|
||
import EditorsRefreshCTA from '../../components/EditorsRefreshCTA'; | ||
import useStore from '../../store'; | ||
|
||
interface Props { | ||
tabID: number; | ||
} | ||
|
||
function App({tabID}: Props) { | ||
const [errorMessage, setErrorMessage] = useState(''); | ||
|
||
const {lexicalState} = useStore(); | ||
const states = lexicalState[tabID] ?? {}; | ||
const lexicalCount = Object.keys(states ?? {}).length; | ||
|
||
return ( | ||
<> | ||
<div> | ||
<a href="https://lexical.dev" target="_blank"> | ||
<img src={lexicalLogo} className="logo" alt="Lexical logo" /> | ||
</a> | ||
</div> | ||
{errorMessage !== '' ? ( | ||
<div className="card error">{errorMessage}</div> | ||
) : null} | ||
<div className="card"> | ||
{states === undefined ? ( | ||
<span>Loading...</span> | ||
) : ( | ||
<span> | ||
Found <b>{lexicalCount}</b> editor{lexicalCount > 1 ? 's' : ''} on | ||
the page | ||
</span> | ||
)} | ||
<p> | ||
<EditorsRefreshCTA | ||
tabID={tabID} | ||
setErrorMessage={setErrorMessage} | ||
sendMessage={sendMessage} | ||
/> | ||
</p> | ||
</div> | ||
{Object.entries(states).map(([key, state]) => ( | ||
<p key={key}> | ||
<b>ID: {key}</b> | ||
<br /> | ||
<textarea | ||
readOnly={true} | ||
value={JSON.stringify(state)} | ||
rows={5} | ||
cols={150} | ||
/> | ||
<hr /> | ||
</p> | ||
))} | ||
</> | ||
); | ||
} | ||
|
||
export default App; |
11 changes: 11 additions & 0 deletions
11
packages/lexical-devtools/src/entrypoints/devtools-panel/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="./main.tsx"></script> | ||
</body> | ||
</html> |
24 changes: 24 additions & 0 deletions
24
packages/lexical-devtools/src/entrypoints/devtools-panel/main.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
*/ | ||
|
||
import React from 'react'; | ||
import ReactDOM from 'react-dom/client'; | ||
|
||
import store from '../../store.ts'; | ||
import storeReadyPromise from '../../store-sync/content-script'; | ||
import App from './App.tsx'; | ||
|
||
const tabID = browser.devtools.inspectedWindow.tabId; | ||
|
||
storeReadyPromise(store).then(() => | ||
ReactDOM.createRoot(document.getElementById('root')!).render( | ||
<React.StrictMode> | ||
<App tabID={tabID} /> | ||
</React.StrictMode>, | ||
), | ||
); |
8 changes: 8 additions & 0 deletions
8
packages/lexical-devtools/src/entrypoints/devtools/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<script type="module" src="./main.ts"></script> | ||
</head> | ||
</html> |
14 changes: 14 additions & 0 deletions
14
packages/lexical-devtools/src/entrypoints/devtools/main.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
*/ | ||
|
||
// Create the panel which appears within the browser devtools | ||
browser.devtools.panels.create( | ||
'Lexical', | ||
'icon/128.png', | ||
'devtools-panel.html', | ||
); |
22 changes: 22 additions & 0 deletions
22
packages/lexical-devtools/src/entrypoints/injected/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
/** | ||
* Copyright (c) Meta Platforms, Inc. and affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
* | ||
*/ | ||
|
||
import {sendMessage, setNamespace} from 'webext-bridge/window'; | ||
|
||
import extensionStore from '../../store'; | ||
import storeReadyPromise from '../../store-sync/window'; | ||
import main from './main'; | ||
|
||
export default defineUnlistedScript({ | ||
main() { | ||
setNamespace('lexical-extension'); | ||
sendMessage('getTabID', null, 'background').then((tabID) => | ||
storeReadyPromise(extensionStore).then(() => main(tabID, extensionStore)), | ||
); | ||
}, | ||
}); |
Oops, something went wrong.