Skip to content

Commit

Permalink
feat: add firefox support (#185)
Browse files Browse the repository at this point in the history
  • Loading branch information
ignatiusmb authored Mar 26, 2024
1 parent aea036f commit 0436889
Show file tree
Hide file tree
Showing 9 changed files with 29 additions and 33 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/release.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ jobs:

- run: pnpm install
- run: pnpm build
- run: cd build && zip -r svelte-devtools-${{ github.sha }} *
- run: cd build && zip -r svelte-devtools *

- uses: actions/upload-artifact@v3
with:
name: extension-${{ github.sha }}
path: build/svelte-devtools-${{ github.sha }}.zip
path: build/svelte-devtools.zip

# publish:
# runs-on: ubuntu-latest
Expand Down
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@
</picture>
</a>

Svelte DevTools is a Chrome extension for the [Svelte](https://svelte.dev/) framework. It allows you to inspect the Svelte state and component hierarchies in the Developer Tools.
Svelte DevTools is a browser extension for the [Svelte](https://svelte.dev/) framework. It allows you to inspect the Svelte state and component hierarchies in the Developer Tools.

After installing you will see a new tab in Developer Tools. This tab displays a tree of Svelte components, HTMLx blocks, and DOM elements that were rendered on the page. By selecting one of the nodes in the tree, you can inspect and edit its current state in the panel to the right.

> For Firefox users, you can grab the [`.zip` file of the latest version from the GitHub releases page](https://github.com/sveltejs/svelte-devtools/releases/latest) and load it as a temporary extension. Note that you may need to enable "Always Allow on localhost" in the extension settings.
![2.0.0 Screenshot](./.github/assets/screenshot-2.0.0.png '2.0.0 Screenshot')

## Requirements
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
"dev": "pnpm run --parallel \"/dev:*/\"",
"dev:app": "vite build --watch",
"dev:scripts": "rollup -cw",
"build": "vite build && rollup -c",
"build": "rollup -c && vite build",
"build:zip": "cd build && zip -r svelte-devtools.zip *",
"build:tar": "cd build && tar -czf svelte-devtools.tar.gz *",
"format": "prettier -w .",
"check": "pnpm run --parallel \"/check:*/\"",
"check:style": "prettier -c .",
Expand Down
6 changes: 0 additions & 6 deletions rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,6 @@ export default defineConfig([
file: 'build/background.js',
},
},
{
input: 'static/sensor.js',
output: {
file: 'build/sensor.js',
},
},
{
input: 'src/client/index.js',
output: [
Expand Down
2 changes: 1 addition & 1 deletion src/app.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ declare global {
children: SvelteBlockDetail[];
/** `type: 'element' | 'component'` */
parent?: SvelteBlockDetail;
/** like `parent` but `type: 'component'` */
/** like `parent` but `type: 'component'` */
container?: SvelteBlockDetail;

block: SvelteComponentDetail['component']['$$']['fragment'];
Expand Down
25 changes: 17 additions & 8 deletions static/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,27 +108,36 @@ function courier(tabId, changed) {

chrome.tabs.onActivated.addListener(({ tabId }) => sensor(tabId));
chrome.tabs.onUpdated.addListener(
(tabId, changed) => changed.status === 'unloaded' && sensor(tabId),
(tabId, changed) => changed.status === 'complete' && sensor(tabId),
);

/** @param {number} tabId */
async function sensor(tabId) {
try {
// add SvelteDevTools event listener
await chrome.scripting.executeScript({
target: { tabId },

func: () => {
const source = chrome.runtime.getURL('/sensor.js');
document.querySelector(`script[src="${source}"]`)?.remove();
const script = document.createElement('script');
script.setAttribute('src', source);
document.head.appendChild(script);

document.addEventListener('SvelteDevTools', ({ detail }) => {
chrome.runtime.sendMessage(detail);
});
},
});
// capture data to send to listener
await chrome.scripting.executeScript({
target: { tabId },
world: 'MAIN',
func: () => {
// @ts-ignore - injected if the website is using svelte
const [major] = [...(window.__svelte?.v ?? [])];

document.dispatchEvent(
new CustomEvent('SvelteDevTools', {
detail: { type: 'bypass::ext/icon:set', payload: major },
}),
);
},
});
} catch {
// for internal URLs like `chrome://` or `edge://` and extension gallery
// https://chromium.googlesource.com/chromium/src/+/ee77a52baa1f8a98d15f9749996f90e9d3200f2d/chrome/common/extensions/chrome_extensions_client.cc#131
Expand Down
6 changes: 2 additions & 4 deletions static/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,11 @@
}
},
"background": {
"scripts": ["background.js"],
"service_worker": "background.js"
},
"devtools_page": "register.html",
"host_permissions": ["*://*/*"],
"permissions": ["activeTab", "scripting"],
"web_accessible_resources": [
{ "matches": ["*://*/*"], "resources": ["courier.js"] },
{ "matches": ["*://*/*"], "resources": ["sensor.js"], "world": "MAIN" }
]
"web_accessible_resources": [{ "matches": ["*://*/*"], "resources": ["courier.js"] }]
}
1 change: 1 addition & 0 deletions static/register.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!doctype html>
<html>
<body>
<script src="register.js"></script>
Expand Down
10 changes: 0 additions & 10 deletions static/sensor.js

This file was deleted.

0 comments on commit 0436889

Please sign in to comment.