diff --git a/packages/extension/assets/icons/solid-gray-128.png b/packages/extension/public/solid-gray-128.png similarity index 100% rename from packages/extension/assets/icons/solid-gray-128.png rename to packages/extension/public/solid-gray-128.png diff --git a/packages/extension/assets/icons/solid-gray-16.png b/packages/extension/public/solid-gray-16.png similarity index 100% rename from packages/extension/assets/icons/solid-gray-16.png rename to packages/extension/public/solid-gray-16.png diff --git a/packages/extension/assets/icons/solid-gray-32.png b/packages/extension/public/solid-gray-32.png similarity index 100% rename from packages/extension/assets/icons/solid-gray-32.png rename to packages/extension/public/solid-gray-32.png diff --git a/packages/extension/assets/icons/solid-gray-48.png b/packages/extension/public/solid-gray-48.png similarity index 100% rename from packages/extension/assets/icons/solid-gray-48.png rename to packages/extension/public/solid-gray-48.png diff --git a/packages/extension/assets/icons/solid-normal-128.png b/packages/extension/public/solid-normal-128.png similarity index 100% rename from packages/extension/assets/icons/solid-normal-128.png rename to packages/extension/public/solid-normal-128.png diff --git a/packages/extension/assets/icons/solid-normal-16.png b/packages/extension/public/solid-normal-16.png similarity index 100% rename from packages/extension/assets/icons/solid-normal-16.png rename to packages/extension/public/solid-normal-16.png diff --git a/packages/extension/assets/icons/solid-normal-32.png b/packages/extension/public/solid-normal-32.png similarity index 100% rename from packages/extension/assets/icons/solid-normal-32.png rename to packages/extension/public/solid-normal-32.png diff --git a/packages/extension/assets/icons/solid-normal-48.png b/packages/extension/public/solid-normal-48.png similarity index 100% rename from packages/extension/assets/icons/solid-normal-48.png rename to packages/extension/public/solid-normal-48.png diff --git a/packages/extension/shared/icons.ts b/packages/extension/shared/icons.ts deleted file mode 100644 index 082a8d2c..00000000 --- a/packages/extension/shared/icons.ts +++ /dev/null @@ -1,26 +0,0 @@ - -export const SOLID_BLUE_16 = 'assets/icons/solid-normal-16.png' -export const SOLID_BLUE_32 = 'assets/icons/solid-normal-32.png' -export const SOLID_BLUE_48 = 'assets/icons/solid-normal-48.png' -export const SOLID_BLUE_128 = 'assets/icons/solid-normal-128.png' - -export const SOLID_GRAY_16 = 'assets/icons/solid-gray-16.png' -export const SOLID_GRAY_32 = 'assets/icons/solid-gray-32.png' -export const SOLID_GRAY_48 = 'assets/icons/solid-gray-48.png' -export const SOLID_GRAY_128 = 'assets/icons/solid-gray-128.png' - -export const OUTLINE_32 = 'solid-white-32.png' - -export const blue: chrome.runtime.ManifestIcons = { - 16: SOLID_BLUE_16, - 32: SOLID_BLUE_32, - 48: SOLID_BLUE_48, - 128: SOLID_BLUE_128, -} - -export const gray: chrome.runtime.ManifestIcons = { - 16: SOLID_GRAY_16, - 32: SOLID_GRAY_32, - 48: SOLID_GRAY_48, - 128: SOLID_GRAY_128, -} diff --git a/packages/extension/background/background.ts b/packages/extension/src/background.ts similarity index 98% rename from packages/extension/background/background.ts rename to packages/extension/src/background.ts index 12907dee..68add328 100644 --- a/packages/extension/background/background.ts +++ b/packages/extension/src/background.ts @@ -7,9 +7,9 @@ It has to coordinate the communication between the different scripts based on th */ import {error, log} from '@solid-devtools/shared/utils' -import * as bridge from '../shared/bridge.ts' -import * as icons from '../shared/icons.ts' import * as debug from '@solid-devtools/debugger/types' +import * as bridge from './bridge.ts' +import * as icons from './icons.ts' log(bridge.Place_Name.Background+' loaded.') @@ -39,7 +39,7 @@ const queryActiveTabId = async (): Promise => { let tab = tabs[0]! if (!tab.id) return new Error('Active tab has no id') - + return tab.id } catch (e) { return e instanceof Error ? e : new Error('Unknown error') @@ -159,7 +159,7 @@ chrome.runtime.onConnect.addListener(async port => { error(tab) break } - + let devtools_messanger = bridge.createPortMessanger( bridge.Place_Name.Background, bridge.Place_Name.Devtools_Script, @@ -172,7 +172,7 @@ chrome.runtime.onConnect.addListener(async port => { /* Devtools Script Disconnected */ port.onDisconnect.addListener(() => { - + tab.devtools_messanger = undefined if (tab.content) { @@ -261,7 +261,7 @@ function panel_handle_versions(tab: TabData, panel_messanger: PortMessanger, ver } } -/** +/** To be called whenever direct connection between content-script and panel needs to be recreated Like when page refreshes or panel gets closed and opened */ diff --git a/packages/extension/shared/bridge.ts b/packages/extension/src/bridge.ts similarity index 100% rename from packages/extension/shared/bridge.ts rename to packages/extension/src/bridge.ts diff --git a/packages/extension/content/content.ts b/packages/extension/src/content.ts similarity index 96% rename from packages/extension/content/content.ts rename to packages/extension/src/content.ts index 7fe9f665..3854489e 100644 --- a/packages/extension/content/content.ts +++ b/packages/extension/src/content.ts @@ -10,12 +10,12 @@ This script is injected into every page and is responsible for: */ import {error, log} from '@solid-devtools/shared/utils' -import * as bridge from '../shared/bridge.ts' +import * as bridge from './bridge.ts' // @ts-expect-error ?script&module query ensures output in ES module format and only import the script path -import detectorPath from './detector?script&module' +import detectorPath from './detector.ts?script&module' // @ts-expect-error ?script&module query ensures output in ES module format and only import the script path -import debuggerPath from './debugger?script&module' +import debuggerPath from './debugger.ts?script&module' if (import.meta.env.DEV) log(bridge.Place_Name.Content_Script+' loaded.') @@ -85,7 +85,7 @@ window.addEventListener('message', e => { }) fromClient('Debugger_Connected', versions => { - + // eslint-disable-next-line no-console console.log( '🚧 %csolid-devtools%c is in early development! 🚧\nPlease report any bugs to https://github.com/thetarnav/solid-devtools/issues', diff --git a/packages/extension/content/debugger.ts b/packages/extension/src/debugger.ts similarity index 98% rename from packages/extension/content/debugger.ts rename to packages/extension/src/debugger.ts index 131bf3d8..c301c11f 100644 --- a/packages/extension/content/debugger.ts +++ b/packages/extension/src/debugger.ts @@ -8,7 +8,7 @@ Debugger Client injected into the inspected page import {useDebugger} from '@solid-devtools/debugger' import {type Debugger} from '@solid-devtools/debugger/types' import {log, warn} from '@solid-devtools/shared/utils' -import * as bridge from '../shared/bridge.ts' +import * as bridge from './bridge.ts' if (import.meta.env.DEV) log(bridge.Place_Name.Debugger_Real_World+' loaded.') diff --git a/packages/extension/content/detector.ts b/packages/extension/src/detector.ts similarity index 96% rename from packages/extension/content/detector.ts rename to packages/extension/src/detector.ts index 3cf15ed4..283696e6 100644 --- a/packages/extension/content/detector.ts +++ b/packages/extension/src/detector.ts @@ -7,7 +7,7 @@ and notify the content script import {detectSolid, onSolidDevDetect, onSolidDevtoolsDetect} from '@solid-devtools/shared/detect' import {log, warn} from '@solid-devtools/shared/utils' -import * as bridge from '../shared/bridge.ts' +import * as bridge from './bridge.ts' if (import.meta.env.DEV) log(bridge.Place_Name.Detector_Real_World+' loaded.') diff --git a/packages/extension/devtools/devtools.html b/packages/extension/src/devtools.html similarity index 99% rename from packages/extension/devtools/devtools.html rename to packages/extension/src/devtools.html index 52814b26..ab97d2d0 100644 --- a/packages/extension/devtools/devtools.html +++ b/packages/extension/src/devtools.html @@ -2,9 +2,8 @@ + - - diff --git a/packages/extension/devtools/devtools.ts b/packages/extension/src/devtools.ts similarity index 89% rename from packages/extension/devtools/devtools.ts rename to packages/extension/src/devtools.ts index d3ea3b0a..4a9be4be 100644 --- a/packages/extension/devtools/devtools.ts +++ b/packages/extension/src/devtools.ts @@ -8,8 +8,8 @@ It connects to the background script. */ import {error, log} from '@solid-devtools/shared/utils' -import * as bridge from '../shared/bridge.ts' -import * as icons from '../shared/icons.ts' +import * as bridge from './bridge.ts' +import * as icons from './icons.ts' log(bridge.Place_Name.Devtools_Script+' loaded.') @@ -32,7 +32,7 @@ bridge.once(bg_messanger.on, 'Versions', () => { chrome.devtools.panels.create( 'Solid', PATH_PREFIX + icons.OUTLINE_32, - PATH_PREFIX + 'index.html', + PATH_PREFIX + 'src/panel.html', () => { if (chrome.runtime.lastError) { error('Creating Devtools_Panel Failed', chrome.runtime.lastError) diff --git a/packages/extension/env.d.ts b/packages/extension/src/env.d.ts similarity index 100% rename from packages/extension/env.d.ts rename to packages/extension/src/env.d.ts diff --git a/packages/extension/src/icons.ts b/packages/extension/src/icons.ts new file mode 100644 index 00000000..3020141a --- /dev/null +++ b/packages/extension/src/icons.ts @@ -0,0 +1,26 @@ + +export const SOLID_BLUE_16 = 'solid-normal-16.png' +export const SOLID_BLUE_32 = 'solid-normal-32.png' +export const SOLID_BLUE_48 = 'solid-normal-48.png' +export const SOLID_BLUE_128 = 'solid-normal-128.png' + +export const SOLID_GRAY_16 = 'solid-gray-16.png' +export const SOLID_GRAY_32 = 'solid-gray-32.png' +export const SOLID_GRAY_48 = 'solid-gray-48.png' +export const SOLID_GRAY_128 = 'solid-gray-128.png' + +export const OUTLINE_32 = 'solid-white-32.png' + +export const blue: chrome.runtime.ManifestIcons = { + 16: SOLID_BLUE_16, + 32: SOLID_BLUE_32, + 48: SOLID_BLUE_48, + 128: SOLID_BLUE_128, +} + +export const gray: chrome.runtime.ManifestIcons = { + 16: SOLID_GRAY_16, + 32: SOLID_GRAY_32, + 48: SOLID_GRAY_48, + 128: SOLID_GRAY_128, +} diff --git a/packages/extension/index.html b/packages/extension/src/panel.html similarity index 66% rename from packages/extension/index.html rename to packages/extension/src/panel.html index 8eaf6712..4f7f2ad8 100644 --- a/packages/extension/index.html +++ b/packages/extension/src/panel.html @@ -3,14 +3,11 @@ - - Solid Devtools +
- - diff --git a/packages/extension/panel/panel.tsx b/packages/extension/src/panel.tsx similarity index 97% rename from packages/extension/panel/panel.tsx rename to packages/extension/src/panel.tsx index dafab412..79fba773 100644 --- a/packages/extension/panel/panel.tsx +++ b/packages/extension/src/panel.tsx @@ -7,7 +7,7 @@ import {render} from 'solid-js/web' import {type Debugger} from '@solid-devtools/debugger/types' import {log} from '@solid-devtools/shared/utils' import {createDevtools, MountIcons} from '@solid-devtools/frontend' -import * as bridge from '../shared/bridge.ts' +import * as bridge from './bridge.ts' import '@solid-devtools/frontend/dist/styles.css' diff --git a/packages/extension/popup/popup.css b/packages/extension/src/popup.css similarity index 100% rename from packages/extension/popup/popup.css rename to packages/extension/src/popup.css diff --git a/packages/extension/popup/popup.html b/packages/extension/src/popup.html similarity index 75% rename from packages/extension/popup/popup.html rename to packages/extension/src/popup.html index 863cfc37..b97f0768 100644 --- a/packages/extension/popup/popup.html +++ b/packages/extension/src/popup.html @@ -3,12 +3,10 @@ - - Solid Devtools +
- diff --git a/packages/extension/popup/popup.tsx b/packages/extension/src/popup.tsx similarity index 98% rename from packages/extension/popup/popup.tsx rename to packages/extension/src/popup.tsx index 8cffaa05..94894998 100644 --- a/packages/extension/popup/popup.tsx +++ b/packages/extension/src/popup.tsx @@ -3,7 +3,7 @@ import * as s from 'solid-js' import {render} from 'solid-js/web' import {log} from '@solid-devtools/shared/utils' -import * as bridge from '../shared/bridge.ts' +import * as bridge from './bridge.ts' import './popup.css' diff --git a/packages/extension/tsconfig.json b/packages/extension/tsconfig.json index 384a1eeb..698d9e3c 100644 --- a/packages/extension/tsconfig.json +++ b/packages/extension/tsconfig.json @@ -4,13 +4,5 @@ "outDir": "dist", "types": ["vite/client", "@types/chrome"], }, - "include": [ - "panel/**/*", - "background/**/*", - "content/**/*", - "devtools/**/*", - "shared/**/*", - "popup/**/*", - "env.d.ts" - ] + "include": ["src/**/*"] } diff --git a/packages/extension/vite.config.ts b/packages/extension/vite.config.ts index a73813e1..5add7675 100644 --- a/packages/extension/vite.config.ts +++ b/packages/extension/vite.config.ts @@ -5,7 +5,7 @@ import * as assert from 'node:assert' import * as vite from 'vite' import solid from 'vite-plugin-solid' import pkg from './package.json' with {type: 'json'} -import * as icons from './shared/icons.js' +import * as icons from './src/icons.ts' const require = module.createRequire(import.meta.url) @@ -42,40 +42,26 @@ const manifest: crx.ManifestV3Export & Manifest_Additional_Fields = { : {gecko: {id: '{abfd162e-9948-403a-a75c-6e61184e1d47}'}}, author: is_chrome ? {email: 'gthetarnav@gmail.com'} : 'Damian Tarnawski' as any, minimum_chrome_version: '94', - devtools_page: 'devtools/devtools.html', - /* - TODO: instead of running a content script on document start for every url - could potentially be replaced with `permissions: ['activeTab']`, - removing the content_script field - and running the content script programatically in bg script - - chrome.action.onClicked.addListener((tab) => { - if (tab.id) chrome.scripting.executeScript({ - target: { tabId: tab.id }, - files: ['content/content.ts'], - }); - }); - - */ + devtools_page: 'src/devtools.html', content_scripts: [{ matches: ['*://*/*'], - js: ['content/content.ts'], + js: ['src/content.ts'], run_at: 'document_start', }], background: is_chrome ? { - service_worker: 'background/background.ts', + service_worker: 'src/background.ts', type: 'module', } : { - scripts: ['background/background.ts'], + scripts: ['src/background.ts'], type: 'module', }, permissions: [], action: { default_icon: icons.gray, default_title: 'Solid Devtools', - default_popup: 'popup/popup.html', + default_popup: 'src/popup.html', }, icons: icons.blue, } @@ -114,7 +100,9 @@ const vite_config: vite.UserConfig = { emptyOutDir: !is_dev, outDir: 'dist/' + browser, rollupOptions: { - input: {panel: 'index.html'}, + // adds panel as additional input because it's not a part of the manifest + // and is loaded dynamically in devtools.ts + input: {panel: 'src/panel.html'}, }, target: 'esnext', },