{
16 | if (this.state.open) {
17 | this.setState({ open: false });
18 | }
19 | }}
20 | >
21 |
28 | {this.state.open ? (
29 |
36 | );
37 | }
38 | }
39 |
40 | type COProps = {
41 | option: ConfigOption;
42 | };
43 |
44 | type COState = {
45 | value: any;
46 | };
47 |
48 | abstract class ConfigOptionUI extends Component e.stopPropagation()}>
30 | {config.getAll().map((co) => (
31 |
34 | ) : null}
35 |
67 |
68 |
81 |
82 | );
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/src/ts/components/ExtensionInspector.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "preact";
2 | import FileExplorer from "./FileExplorer";
3 | import ExtensionMetaData from "./ExtensionMetaData";
4 | import { createInspector, Inspector } from "../inspector/InspectorFactory";
5 | import ExtensionPermissions from "./Permissions";
6 | import { openFileViewer } from "../openViewer";
7 | import UIBox from "./UIBox";
8 | import { getDownloadURL as getCWSDownloadURL } from "../inspector/worker/CWS";
9 | import { ExtensionId } from "../types/ExtensionId";
10 |
11 | type Props = {
12 | extension: ExtensionId;
13 | };
14 |
15 | type State = {
16 | inspector?: Inspector;
17 | statusMessage?: string;
18 | loading: boolean;
19 | };
20 |
21 | export default class ExtensionInspector extends Component-
73 |
- 74 | 79 | download the extension manually 80 | 81 | 82 |
- upload it on the start page 83 |
loading details...
;
29 | }
30 |
31 | const lastUpdateTime = details.last_updated
32 | ? new Date(details.last_updated)
33 | : undefined;
34 | const createdTime = details.created
35 | ? new Date(details.created)
36 | : undefined;
37 |
38 | return (
39 | | Name | 51 |{details.name} | 52 |
| Author | 56 |{details.author} | 57 |
| Version | 61 |62 | {details.version} 63 | {lastUpdateTime ? ( 64 | 68 | {`(${friendlyTime(lastUpdateTime)})`} 69 | 70 | ) : null} 71 | | 72 |
| Created | 76 |{friendlyTime(createdTime)} | 77 |
| Size | 81 |{prettyBytes(details.size)} | 82 |
-
46 |
- 47 | {"from the "} 48 | 49 | official add-on website 50 | 51 | : 52 | 77 | 78 |
- 79 | {"from the "} 80 | 84 | Chrome Web Store 85 | 86 | : 87 | 112 | 113 |
- 114 | or select a local file: 115 | 139 | 140 |
-
172 |
88 |
95 | {this.state.selectedFile ? (
96 | -
129 | {data.map((node) => {
130 | const objPath = (this.props.path + "/" + node.name).replace(
131 | /^\//,
132 | ""
133 | );
134 |
135 | if (node.type === "file") {
136 | return (
137 |
-
154 | {
164 | e.preventDefault();
165 | e.stopPropagation();
166 | if (isOpen) {
167 | this.props.data.delete(objPath);
168 | } else {
169 | const list =
170 | await this.props.inspector.listDirectoryContents(
171 | objPath
172 | );
173 | this.props.data.set(objPath, list);
174 | }
175 | this.forceUpdate();
176 | }}
177 | >
178 | {node.name}
179 |
180 | {node.numFiles >= 2 ? (
181 |
182 | {node.numFiles + " files"}
183 |
184 | ) : null}
185 | {isOpen ? (
186 |
192 | ) : null} 193 |
194 | );
195 | }
196 | })}
197 |
34 |
95 | );
96 | };
97 |
98 | export default FilePreview;
99 |
100 | type CPProps = {
101 | path: string;
102 | file: TreeNodeDTO;
103 | inspector: Inspector;
104 | onFileSelect: FileSelectListener;
105 | };
106 |
107 | const ContentPreview: FunctionComponent
35 |
36 |
37 |
57 |
59 | | Name | 39 |{node.name} | 40 |
|---|---|
| Folder | 44 |45 | 46 | {getFolder(props.path)} 47 | 48 | | 49 |
| Size | 53 |{prettyBytes(node.size)} | 54 |
67 | {canOpen ? (
68 | props.onFileOpen(props.path, node)}
71 | >
72 | Open
73 |
74 | ) : null}
75 | {
79 | const url = await props.inspector.getFileDownloadURL(
80 | props.path
81 | );
82 | startDownload(url, node.name);
83 | }}
84 | >
85 | Download
86 |
87 |
88 | props.closer()}
92 | data-native
93 | >
94 |
117 |
123 | );
124 | } else if (file.tags.includes("html")) {
125 | return (
126 |
127 |
134 | );
135 | }
136 |
137 | return null;
138 | };
139 |
--------------------------------------------------------------------------------
/src/ts/components/Permissions.tsx:
--------------------------------------------------------------------------------
1 | import { Component, FunctionalComponent as FC } from "preact";
2 | import { Inspector } from "../inspector/InspectorFactory";
3 | import { Manifest } from "../types/Manifest";
4 | import UIBox from "./UIBox";
5 |
6 | type Props = {
7 | inspector: Inspector;
8 | };
9 |
10 | type State = {
11 | manifest?: Manifest;
12 | };
13 |
14 | export default class ExtensionPermissions extends Component| Required | 45 |
46 | |
52 |
|---|---|
| Optional | 55 |
56 | |
62 |
-
42 | {this.state.extensions.map((e) => (
43 |
-
44 |
45 |
46 | ))}
47 |
57 | {e.name}
58 | {`version ${e.version}`}
59 |
68 |
69 | );
70 | }
71 |
72 | function extIdToURL(id: ExtensionId): string {
73 | if (id.source === "url") {
74 | return "/inspect/url/" + encodeURIComponent(id.url);
75 | }
76 |
77 | return `/inspect/${id.source}/${id.id}`;
78 | }
79 |
--------------------------------------------------------------------------------
/src/ts/components/TagList.tsx:
--------------------------------------------------------------------------------
1 | import { FunctionComponent } from "preact";
2 |
3 | type TLProps = { tags: string[]; showAll?: boolean };
4 |
5 | const ignoreTags = new Set(["code", "image", "text", "html", "stylesheet"]);
6 |
7 | const TagList: FunctionComponent
58 | {this.props.children}
59 |
60 | ) : null}
61 |
35 | Scripts
36 |
57 | );
58 | } else {
59 | return null;
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/ts/components/previews/ImagePreview.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "preact";
2 | import { Inspector } from "../../inspector/InspectorFactory";
3 |
4 | type Props = {
5 | path: string;
6 | name: string;
7 | inspector: Inspector;
8 | };
9 |
10 | type State = {
11 | dataURL?: string;
12 | };
13 |
14 | export default class ImagePreview extends Component-
37 | {this.state.references.map(({ path, node }) => (
38 |
- 39 | { 44 | e.preventDefault(); 45 | e.stopPropagation(); 46 | // TODO 47 | //@ts-ignore 48 | this.props.onFileSelect(path, node); 49 | }} 50 | > 51 | {node.name} 52 | 53 | 54 | ))} 55 |
31 | 
36 |
37 | );
38 | } else {
39 | return null;
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/ts/config.ts:
--------------------------------------------------------------------------------
1 | const configOptions: Map {
49 | const response = await fetch(`${API}/addons/addon/${slug}/`);
50 | return response.json();
51 | }
52 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/CWS.ts:
--------------------------------------------------------------------------------
1 | const chromeVersion = "96.0.4664.110";
2 |
3 | export function getProxiedDownloadURL(extId: string): string {
4 | return `https://web-ext-download-eu.herokuapp.com/cws/${extId}`;
5 | }
6 |
7 | export function getDownloadURL(extId: string): string {
8 | const host = "clients2.google.com";
9 | const path = "/service/update2/crx";
10 | const params = `response=redirect&prodversion=${chromeVersion}&x=id%3D${extId}%26installsource%3Dondemand%26uc&nacl_arch=x86-64&acceptformat=crx2,crx3`;
11 | return `https://${host}${path}?${params}`;
12 | }
13 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/CodeRenderer.ts:
--------------------------------------------------------------------------------
1 | import "./helpers/PrismJSSetup";
2 | import {
3 | cssBreakAfterComment,
4 | cssBreakAfterProperty,
5 | cssBreakAfterBlockStart,
6 | cssBreakAfterBlockEnd,
7 | cssBreakBeforeBlockEnd
8 | } from "prismjs-token-stream-transformer/dist/prefabs/css";
9 | import Prism from "prismjs";
10 | import { AnyToken } from "prismjs-token-stream-transformer/dist/Tokens";
11 |
12 | export type SupportedLanguage = "javascript" | "json" | "markup" | "css" | "plaintext";
13 |
14 | type CodeHighlighter = (code: string) => string;
15 |
16 | const highlighters = new Map();
17 | highlighters.set("markup", (code) =>
18 | Prism.highlight(code, Prism.languages.markup, "markup")
19 | );
20 | highlighters.set("javascript", (code) =>
21 | Prism.highlight(code, Prism.languages.javascript, "javascript")
22 | );
23 | highlighters.set("json", (code) =>
24 | Prism.highlight(code, Prism.languages.javascript, "javascript")
25 | );
26 | highlighters.set("css", (code) =>
27 | Prism.highlight(code, Prism.languages.css, "css")
28 | );
29 | highlighters.set("plaintext", (code) =>
30 | Prism.highlight(code, Prism.languages.plain, "plain")
31 | );
32 |
33 | Prism.hooks.add("after-tokenize", (env) => {
34 | const tokens = env.tokens as AnyToken[];
35 |
36 | if (env.language === "css") {
37 | cssBreakAfterComment.applyTo(tokens);
38 | cssBreakAfterProperty.applyTo(tokens);
39 | cssBreakAfterBlockStart.applyTo(tokens);
40 | cssBreakAfterBlockEnd.applyTo(tokens);
41 | cssBreakBeforeBlockEnd.applyTo(tokens);
42 | }
43 | });
44 |
45 | export function renderCode(code: string, language: SupportedLanguage): string {
46 | const highlighter = highlighters.get(language);
47 |
48 | if(language === "json") {
49 | code = JSON.stringify(JSON.parse(code), null, 4);
50 | }
51 |
52 | if (!highlighter) {
53 | return code;
54 | }
55 |
56 | return highlighter(code);
57 | }
58 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/Extension.ts:
--------------------------------------------------------------------------------
1 | import { ExtensionId } from "../../types/ExtensionId";
2 | import AsyncEvent from "../../utils/AsyncEvent";
3 | import { createFileTree, TreeFile, TreeFolder, TreeNode } from "./FileTree";
4 | import * as zip from "@zip.js/zip.js";
5 | import { Manifest } from "../../types/Manifest";
6 | import { ExtensionDetails } from "../../types/ExtensionDetails";
7 | import * as ScriptFinder from "./helpers/ScriptFinder";
8 | import * as ResourceLocator from "./helpers/ResourceLocator";
9 | import { Translations } from "../../types/Translations";
10 | import { OptionalMetaData } from "../../types/ExtensionCache";
11 |
12 | export default class Extension {
13 | readonly id: ExtensionId;
14 | manifest: Manifest;
15 | details: ExtensionDetails;
16 |
17 | private readonly initialized = new AsyncEvent("extension initialized");
18 | rootDir: TreeFolder; // TODO consider making this private
19 | private defaultTranslations: Translations | null = null;
20 |
21 | private constructor(
22 | id: ExtensionId,
23 | zipData: Blob,
24 | extraInfo: OptionalMetaData
25 | ) {
26 | this.id = id;
27 | const zipReader = new zip.ZipReader(new zip.BlobReader(zipData));
28 |
29 | (async () => {
30 | // load files & directory structure
31 | this.rootDir = createFileTree(await zipReader.getEntries());
32 |
33 | // load manifest
34 | const manifestNode = this.rootDir.get("manifest.json");
35 | if (!(manifestNode instanceof TreeFile)) {
36 | throw new Error("Could not find manifest.json.");
37 | }
38 | manifestNode.addTag("manifest");
39 | // TODO: manifest.json may contain single line comments (//)
40 | this.manifest = JSON.parse(await manifestNode.getTextContent());
41 | if (this.manifest.manifest_version !== 2) {
42 | console.error(
43 | `Unsupported manifest version ${this.manifest.manifest_version}.`
44 | );
45 | // TODO: add manifest v3 (currently Chrome-only) support
46 | }
47 |
48 | // translations
49 | if (this.manifest.default_locale !== undefined) {
50 | const messagesFile = this.rootDir.get(
51 | "_locales/" +
52 | this.manifest.default_locale +
53 | "/messages.json"
54 | );
55 | if (messagesFile instanceof TreeFile) {
56 | this.defaultTranslations = JSON.parse(
57 | await messagesFile.getTextContent()
58 | );
59 | }
60 | }
61 |
62 | await zipReader.close();
63 |
64 | await this.createDetails(extraInfo);
65 | await this.findScriptsAndResources();
66 |
67 | this.initialized.fire();
68 | })();
69 | }
70 |
71 | public static async create(
72 | id: ExtensionId,
73 | zipData: Blob,
74 | extraInfo: OptionalMetaData = {}
75 | ): Promise {
76 | const extension = new Extension(id, zipData, extraInfo);
77 | await extension.initialized.waitFor();
78 | return extension;
79 | }
80 |
81 | public async getFileDownloadURL(
82 | path: string,
83 | timeout: number = 10.0
84 | ): Promise {
85 | if (!this.rootDir) {
86 | await this.initialized.waitFor();
87 | }
88 |
89 | const fileNode = this.rootDir.get(path);
90 |
91 | if (!(fileNode instanceof TreeFile)) {
92 | throw new Error(`"${path}" is not a file.`);
93 | }
94 |
95 | let blob: Blob = await fileNode.entry.getData!(new zip.BlobWriter());
96 | if (path.endsWith(".svg")) {
97 | blob = blob.slice(0, blob.size, "image/svg+xml");
98 | }
99 |
100 | const url = URL.createObjectURL(blob);
101 |
102 | if (timeout > 0.0) {
103 | setTimeout(() => URL.revokeObjectURL(url), timeout * 1000);
104 | }
105 |
106 | return url;
107 | }
108 |
109 | public async getFileOrFolder(path: string): Promise {
110 | await this.initialized.waitFor();
111 |
112 | const node = this.rootDir.get(path);
113 |
114 | if (!node) {
115 | throw new Error(`No such file or folder: ${path}`);
116 | }
117 |
118 | return node;
119 | }
120 |
121 | private fileExists(path: string): boolean {
122 | if (!this.rootDir) {
123 | throw new Error("File tree not initialized.");
124 | }
125 |
126 | const node = this.rootDir.get(path);
127 |
128 | if (!node) {
129 | return false;
130 | }
131 |
132 | return node instanceof TreeFile;
133 | }
134 |
135 | private async createDetails(extraInfo: OptionalMetaData): Promise {
136 | const manifest = this.manifest;
137 |
138 | let iconUrl: string | undefined = undefined;
139 |
140 | if (manifest.icons) {
141 | const sizes = Object.keys(manifest.icons).map((s) =>
142 | parseInt(s, 10)
143 | );
144 | // sort sizes descending
145 | sizes.sort((a, b) => b - a);
146 |
147 | if (sizes.length > 0) {
148 | const optimalSizes = sizes
149 | .filter((s) => this.fileExists(manifest.icons!["" + s]))
150 | .filter((s) => s >= 48 && s <= 96);
151 | const size =
152 | optimalSizes.length > 0 ? optimalSizes[0] : sizes[0];
153 | iconUrl = await this.getFileDownloadURL(
154 | manifest.icons["" + size],
155 | 0.0 // TODO: revoke URL before worker gets destroyed
156 | );
157 | }
158 | }
159 |
160 | this.details = {
161 | name: this.translate(manifest.name),
162 | version: manifest.version,
163 | size: this.rootDir.byteSize,
164 | icon_url: iconUrl,
165 | author: manifest.author ?? extraInfo.author,
166 | last_updated: extraInfo.last_updated,
167 | created: extraInfo.created,
168 | };
169 | }
170 |
171 | private async findScriptsAndResources(): Promise {
172 | const root = this.rootDir;
173 | const manifest = this.manifest;
174 |
175 | await ScriptFinder.identifyBackgroundScripts(root, manifest);
176 | await ScriptFinder.identifyDevtoolsScripts(root, manifest);
177 |
178 | ScriptFinder.identifyContentScripts(root, manifest);
179 | ScriptFinder.identifySidebarScripts(root, manifest);
180 | ScriptFinder.identifyUserScriptAPI(root, manifest);
181 | ScriptFinder.identifyActionScripts(root, manifest);
182 |
183 | ResourceLocator.identifyWebAccessibleResources(root, manifest);
184 | }
185 |
186 | private translate(rawString: string): string {
187 | if (this.defaultTranslations === null) {
188 | return rawString;
189 | }
190 |
191 | const matches = rawString.match(/^__MSG_(.+)__$/);
192 |
193 | if (matches === null || matches.length !== 2) {
194 | return rawString;
195 | }
196 |
197 | const messageName = matches[1];
198 | const translation = this.defaultTranslations[messageName];
199 |
200 | if (translation) {
201 | return translation.message;
202 | }
203 |
204 | return rawString;
205 | }
206 | }
207 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/ExtensionProvider.ts:
--------------------------------------------------------------------------------
1 | import { ExtensionId } from "../../types/ExtensionId";
2 | import Extension from "./Extension";
3 | import * as AMOAPI from "./AMO";
4 | import * as CWS from "./CWS";
5 | import {
6 | getExtensionCache,
7 | getCacheData,
8 | storeCacheInfo,
9 | } from "../CacheHelper";
10 |
11 | type StatusUpdater = (status: string) => void;
12 |
13 | export async function getExtension(
14 | ext: ExtensionId,
15 | updateStatus: StatusUpdater
16 | ): Promise {
17 | const cacheInfo = await getCacheData(ext);
18 |
19 | let downloadUrl = cacheInfo?.url;
20 | let extraInfo = cacheInfo?.extraInfo;
21 |
22 | if (!cacheInfo) {
23 | if (ext.source === "firefox") {
24 | const info = await AMOAPI.getInfo(ext.id);
25 | downloadUrl = info.current_version.file.url;
26 | extraInfo = {
27 | last_updated: info.last_updated,
28 | created: info.created,
29 | author: info.authors
30 | .map((a) => a.name ?? a.username)
31 | .join(", "),
32 | };
33 | } else if (ext.source === "chrome") {
34 | downloadUrl = CWS.getProxiedDownloadURL(ext.id);
35 | } else if (ext.source === "url") {
36 | downloadUrl = ext.url;
37 | }
38 | }
39 |
40 | let blob: Blob | null = null;
41 | const cachedResponse = await getResponseFromCache(downloadUrl!);
42 |
43 | if (cachedResponse) {
44 | blob = await cachedResponse.blob();
45 |
46 | if (cacheInfo) {
47 | const age = Date.now() - cacheInfo.date.valueOf();
48 | const aDay = 1000 * 60 * 60 * 24;
49 | if (age > aDay) {
50 | // TODO check for new version
51 | }
52 | }
53 | } else {
54 | updateStatus("downloading...");
55 | const response = await fetch(downloadUrl!);
56 |
57 | if (!response.ok) {
58 | return Promise.reject(
59 | `Failed to download extension. ${response.statusText} (${response.status})`
60 | );
61 | }
62 |
63 | // navigator.storage is only available in secure contexts
64 | if (navigator.storage) {
65 | const cache = await getExtensionCache();
66 | const { quota, usage } = await navigator.storage.estimate();
67 |
68 | if (cache && quota! < usage!) {
69 | // response can only be used once
70 | blob = await response.clone().blob();
71 |
72 | if (usage! + blob.size <= quota!) {
73 | // response can only be used once
74 | cache.put(downloadUrl!, response);
75 | } else if (usage! > 0) {
76 | // TODO remove oldest entry
77 | }
78 | }
79 | }
80 |
81 | if (!blob) {
82 | blob = await response.blob();
83 | }
84 | }
85 |
86 | updateStatus("extracting...");
87 |
88 | const extension = await Extension.create(ext, blob, extraInfo);
89 |
90 | if (ext.source !== "url") {
91 | // TODO
92 | await storeCacheInfo(ext, {
93 | id: ext,
94 | url: downloadUrl!,
95 | date: new Date(),
96 | version: extension.details.version,
97 | name: extension.details.name,
98 | extraInfo,
99 | });
100 | }
101 |
102 | return extension;
103 | }
104 |
105 | async function getResponseFromCache(
106 | url: string
107 | ): Promise {
108 | const cache = await getExtensionCache();
109 |
110 | if (!cache) {
111 | return undefined;
112 | }
113 |
114 | const cachedResponse = await cache.match(url);
115 |
116 | if (cachedResponse) {
117 | console.info(`Loading extension from cache.`);
118 | return cachedResponse;
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/FileTree.ts:
--------------------------------------------------------------------------------
1 | import * as zip from "@zip.js/zip.js";
2 |
3 | export type TreeNodeDTO =
4 | | { name: string; type: "folder"; numFiles: number }
5 | | { name: string; type: "file"; size: number; tags: string[] };
6 |
7 | export abstract class TreeNode {
8 | public name: string;
9 | protected parent: TreeFolder | undefined;
10 |
11 | public constructor(name: string, parent?: TreeFolder) {
12 | this.name = name;
13 | this.parent = parent;
14 | }
15 |
16 | public abstract toDTO(): TreeNodeDTO;
17 |
18 | public get path(): string {
19 | if (this.parent) {
20 | const parentPath = this.parent.path;
21 | return parentPath ? parentPath + "/" + this.name : this.name;
22 | } else if (this instanceof TreeFolder) {
23 | return "";
24 | } else {
25 | return this.name;
26 | }
27 | }
28 | }
29 |
30 | export class TreeFolder extends TreeNode {
31 | public children: Map = new Map();
32 | private fileCount: number = 0;
33 | private uncompressedSize: number = 0;
34 |
35 | public insertEntry(entry: zip.Entry): void {
36 | this.insert(entry.filename, entry);
37 | }
38 |
39 | private insert(relPath: string, entry: zip.Entry): void {
40 | if (entry.directory) {
41 | // we extract folders from file paths
42 | // some zips do not contain directory entries
43 | return;
44 | }
45 |
46 | this.fileCount++;
47 | let parts = relPath.split("/");
48 | const name = parts.shift()!;
49 |
50 | if (parts.length === 0) {
51 | const file = new TreeFile(entry, name, this);
52 | this.children.set(name, file);
53 | this.uncompressedSize += entry.uncompressedSize;
54 | } else {
55 | const folder =
56 | (this.children.get(name) as TreeFolder) ??
57 | new TreeFolder(name, this);
58 | this.children.set(name, folder);
59 | folder.insert(parts.join("/"), entry);
60 | }
61 | }
62 |
63 | public get numFiles(): number {
64 | return this.fileCount;
65 | }
66 |
67 | public get byteSize(): number {
68 | return this.uncompressedSize;
69 | }
70 |
71 | public get(path: string): TreeNode | undefined {
72 | if (path === "") {
73 | return this;
74 | }
75 |
76 | let parts = path.split("/");
77 |
78 | if (parts.length > 0 && parts[0] === "") {
79 | // fix paths starting with /
80 | parts.shift();
81 | }
82 |
83 | const name = parts.shift()!;
84 |
85 | let node;
86 |
87 | if (name === "..") {
88 | node = this.parent;
89 | } else if (name === ".") {
90 | node = this;
91 | } else {
92 | node = this.children.get(name);
93 | }
94 |
95 | if (node instanceof TreeFolder && parts.length > 0) {
96 | return node.get(parts.join("/"));
97 | }
98 |
99 | return node;
100 | }
101 |
102 | public getAll(path: string): TreeNode[] {
103 | if (path === "") {
104 | return [this];
105 | }
106 |
107 | let parts = path.split("/");
108 | const name = parts.shift()!;
109 |
110 | if (name === "*") {
111 | const children = Array.from(this.children.values());
112 | const subPath = parts.length > 0 ? parts.join("/") : "*";
113 | return children.flatMap((c) => {
114 | if (c instanceof TreeFolder) {
115 | return c.getAll(subPath);
116 | } else {
117 | return parts.length > 0 ? [] : c;
118 | }
119 | });
120 | }
121 |
122 | let node;
123 |
124 | if (name === "..") {
125 | node = this.parent;
126 | } else if (name === ".") {
127 | node = this;
128 | } else {
129 | node = this.children.get(name);
130 | }
131 |
132 | if (node instanceof TreeFolder && parts.length > 0) {
133 | return node.getAll(parts.join("/"));
134 | } else if (node) {
135 | return [node];
136 | } else {
137 | return [];
138 | }
139 | }
140 |
141 | public toDTO(): TreeNodeDTO {
142 | return { name: this.name, type: "folder", numFiles: this.fileCount };
143 | }
144 | }
145 |
146 | export class TreeFile extends TreeNode {
147 | public entry: zip.Entry;
148 | private tags: Set = new Set();
149 |
150 | public constructor(entry: zip.Entry, name: string, parent: TreeFolder) {
151 | super(name, parent);
152 | this.entry = entry;
153 |
154 | if (entry.directory) {
155 | throw new Error(`Entry is a directory: ${entry.filename}`);
156 | }
157 |
158 | if (entry.encrypted) {
159 | this.tags.add("encrypted");
160 | }
161 |
162 | if (/\.(js|jsx|json)$/i.test(name)) {
163 | this.tags.add("code");
164 | } else if (/\.(html|htm)$/i.test(name)) {
165 | this.tags.add("html");
166 | } else if (/\.(jpg|png|gif|svg)$/i.test(name)) {
167 | this.tags.add("image");
168 | } else if (/\.(txt|md)$/i.test(name) || name === "LICENSE") {
169 | this.tags.add("text");
170 | } else if (/\.css$/i.test(name)) {
171 | this.tags.add("stylesheet");
172 | }
173 | }
174 |
175 | public addTag(tag: string): void {
176 | this.tags.add(tag);
177 | }
178 |
179 | public hasTag(tag: string): boolean {
180 | return this.tags.has(tag);
181 | }
182 |
183 | public toDTO(): TreeNodeDTO {
184 | return {
185 | name: this.name,
186 | type: "file",
187 | size: this.entry.uncompressedSize,
188 | tags: Array.from(this.tags),
189 | };
190 | }
191 |
192 | public getTextContent(): Promise {
193 | return this.entry.getData!(new zip.TextWriter());
194 | }
195 | }
196 |
197 | export function createFileTree(entries: zip.Entry[]): TreeFolder {
198 | const root = new TreeFolder("root");
199 | for (const entry of entries) {
200 | root.insertEntry(entry);
201 | }
202 | return root;
203 | }
204 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/helpers/PrismJSSetup.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This code has to be executed before prismjs, order of imports matters:
3 | * ```js
4 | * import "PrismJSSetup.ts";
5 | * import Prism from "prismjs";
6 | * ```
7 | */
8 |
9 | self.Prism = self.Prism || {};
10 | // @ts-ignore
11 | self.Prism.disableWorkerMessageHandler = true;
12 | // @ts-ignore
13 | self.Prism.manual = true;
14 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/helpers/ResourceLocator.ts:
--------------------------------------------------------------------------------
1 | import { Manifest } from "../../../types/Manifest";
2 | import { cleanPath } from "../../../utils/paths";
3 | import { TreeFile, TreeFolder } from "../FileTree";
4 |
5 | export function identifyWebAccessibleResources(
6 | root: TreeFolder,
7 | manifest: Manifest
8 | ): void {
9 | if (!manifest.web_accessible_resources) {
10 | return;
11 | }
12 |
13 | manifest.web_accessible_resources
14 | .flatMap((path) => root.getAll(cleanPath(path)))
15 | .forEach((node) => {
16 | if (node instanceof TreeFile) {
17 | node.addTag("web");
18 | }
19 | });
20 | }
21 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/helpers/ScriptFinder.ts:
--------------------------------------------------------------------------------
1 | import { Manifest } from "../../../types/Manifest";
2 | import { cleanPath, getFolder, joinPaths } from "../../../utils/paths";
3 | import { TreeFile, TreeFolder, TreeNode } from "../FileTree";
4 | import * as zip from "@zip.js/zip.js";
5 | import { extractScripts } from "../../../utils/html";
6 |
7 | export async function identifyBackgroundScripts(
8 | root: TreeFolder,
9 | manifest: Manifest
10 | ): Promise {
11 | if (!manifest.background) {
12 | return;
13 | }
14 |
15 | if (manifest.background.scripts) {
16 | manifest.background.scripts
17 | .map((path) => root.get(cleanPath(path)))
18 | .filter(isFile)
19 | .forEach((file) => file.addTag("background"));
20 | } else if (manifest.background.page) {
21 | findScriptNodes(manifest.background.page, root, "background");
22 | } else {
23 | throw new Error("Unsupported background scripts.");
24 | }
25 | }
26 |
27 | export async function identifyDevtoolsScripts(
28 | root: TreeFolder,
29 | manifest: Manifest
30 | ): Promise {
31 | if (!manifest.devtools_page) {
32 | return;
33 | }
34 |
35 | findScriptNodes(manifest.devtools_page, root, "devtools");
36 | }
37 |
38 | export function identifyContentScripts(
39 | root: TreeFolder,
40 | manifest: Manifest
41 | ): void {
42 | if (!manifest.content_scripts) {
43 | return;
44 | }
45 |
46 | const scripts = manifest.content_scripts
47 | .flatMap((cs) => cs.js ?? [])
48 | .map((path) => root.get(cleanPath(path)))
49 | .filter(isFile);
50 |
51 | scripts.forEach((script) => script.addTag("content"));
52 | }
53 |
54 | export function identifyUserScriptAPI(
55 | root: TreeFolder,
56 | manifest: Manifest
57 | ): void {
58 | if (manifest.user_scripts && manifest.user_scripts.api_script) {
59 | const node = root.get(cleanPath(manifest.user_scripts.api_script));
60 | if (!isFile(node)) {
61 | return;
62 | }
63 |
64 | node.addTag("user-script-api");
65 | }
66 | }
67 |
68 | export async function identifySidebarScripts(
69 | root: TreeFolder,
70 | manifest: Manifest
71 | ): Promise {
72 | if (!manifest.sidebar_action) {
73 | return;
74 | }
75 |
76 | await findScriptNodes(
77 | manifest.sidebar_action.default_panel,
78 | root,
79 | "sidebar"
80 | );
81 | }
82 |
83 | export async function identifyActionScripts(
84 | root: TreeFolder,
85 | manifest: Manifest
86 | ): Promise {
87 | if (manifest.browser_action && manifest.browser_action.default_popup) {
88 | await findScriptNodes(
89 | manifest.browser_action.default_popup,
90 | root,
91 | "browser-action"
92 | );
93 | }
94 |
95 | if (manifest.page_action && manifest.page_action.default_popup) {
96 | await findScriptNodes(
97 | manifest.page_action.default_popup,
98 | root,
99 | "page-action"
100 | );
101 | }
102 | }
103 |
104 | export async function findScriptNodes(
105 | pagePath: string,
106 | root: TreeFolder,
107 | tag?: string
108 | ): Promise {
109 | const path = cleanPath(pagePath);
110 | const basePath = getFolder(path);
111 | const htmlNode = root.get(path);
112 | if (!isFile(htmlNode) || !htmlNode.hasTag("html")) {
113 | return [];
114 | }
115 |
116 | if (tag) {
117 | htmlNode.addTag(tag);
118 | }
119 |
120 | const html = await htmlNode.entry.getData!(new zip.TextWriter());
121 | const scripts = extractScripts(html);
122 | let results = [];
123 |
124 | for (const script of scripts) {
125 | const node = root.get(joinPaths(basePath, script.src));
126 |
127 | if (!isFile(node)) {
128 | continue;
129 | }
130 |
131 | if (tag) {
132 | node.addTag(tag);
133 | if (script.type === "module") {
134 | node.addTag("module");
135 | }
136 | }
137 |
138 | results.push(node);
139 | }
140 |
141 | return results;
142 | }
143 |
144 | const isFile = function (node: TreeNode | undefined): node is TreeFile {
145 | return node !== undefined && node instanceof TreeFile;
146 | };
147 |
--------------------------------------------------------------------------------
/src/ts/inspector/worker/worker.ts:
--------------------------------------------------------------------------------
1 | import * as Comlink from "comlink";
2 | import * as zip from "@zip.js/zip.js";
3 | import { TreeFile, TreeFolder, TreeNodeDTO } from "./FileTree";
4 | import { Manifest } from "../../types/Manifest";
5 | import * as ScriptFinder from "./helpers/ScriptFinder";
6 | import AsyncEvent from "../../utils/AsyncEvent";
7 | import { renderCode, SupportedLanguage } from "./CodeRenderer";
8 | import { ExtensionDetails } from "../../types/ExtensionDetails";
9 | import Extension from "./Extension";
10 | import { getExtension } from "./ExtensionProvider";
11 | import { ExtensionId } from "../../types/ExtensionId";
12 |
13 | zip.configure({
14 | useWebWorkers: false, // this is already a worker
15 | });
16 |
17 | export type StatusListener = (status: string) => void;
18 |
19 | export class WorkerAPI {
20 | private statusListener: StatusListener = () => {};
21 | private initialized: AsyncEvent = new AsyncEvent("WorkerInitialized");
22 | private extension: Extension;
23 |
24 | public async init(
25 | ext: ExtensionId,
26 | statusListener?: StatusListener
27 | ): Promise {
28 | this.statusListener = statusListener ?? this.statusListener;
29 |
30 | this.extension = await getExtension(ext, this.statusListener);
31 | this.setStatus("");
32 |
33 | this.initialized.fire();
34 | }
35 |
36 | public async getDetails(): Promise {
37 | await this.initialized.waitFor();
38 | return this.extension.details;
39 | }
40 |
41 | public async listDirectoryContents(path: string): Promise {
42 | const dir = await this.extension.getFileOrFolder(path);
43 |
44 | if (dir instanceof TreeFolder) {
45 | const contents = Array.from(dir.children.values(), (tn) =>
46 | tn.toDTO()
47 | );
48 | contents.sort((a, b) => {
49 | if (a.type === b.type) {
50 | return a.name.localeCompare(b.name);
51 | } else {
52 | return a.type === "folder" ? -1 : 1;
53 | }
54 | });
55 | return contents;
56 | } else {
57 | throw new Error(`${path} is not a directory.`);
58 | }
59 | }
60 |
61 | public async getManifest(): Promise {
62 | await this.initialized.waitFor();
63 | return this.extension.manifest;
64 | }
65 |
66 | public async analyzeHTML(path: string) {
67 | const scripts = await ScriptFinder.findScriptNodes(
68 | path,
69 | this.extension.rootDir
70 | );
71 |
72 | return {
73 | scripts: scripts.map((s) => ({
74 | path: s.path,
75 | node: s.toDTO(),
76 | })),
77 | };
78 | }
79 |
80 | public async getPrettyCode(path: string): Promise {
81 | const file = (await this.extension.getFileOrFolder(path)) as TreeFile;
82 |
83 | if (!file || file instanceof TreeFolder) {
84 | throw new Error(`File ${path} not found.`);
85 | }
86 |
87 | let content: string = await file.entry.getData!(new zip.TextWriter());
88 | let language: SupportedLanguage = "plaintext";
89 |
90 | if (/\.(htm|html|xml)$/i.test(file.name)) {
91 | language = "markup";
92 | } else if (/\.(js|mjs)$/i.test(file.name)) {
93 | language = "javascript";
94 | } else if (/\.json$/i.test(file.name)) {
95 | language = "json";
96 | } else if (/\.css$/i.test(file.name)) {
97 | language = "css";
98 | }
99 |
100 | const html = renderCode(content, language);
101 |
102 | return {
103 | language,
104 | code: html,
105 | };
106 | }
107 |
108 | public async getFileDownloadURL(
109 | path: string,
110 | timeout: number = 10.0
111 | ): Promise {
112 | await this.initialized.waitFor();
113 | return this.extension.getFileDownloadURL(path, timeout);
114 | }
115 |
116 | private setStatus(status: string) {
117 | this.statusListener(status);
118 | }
119 | }
120 |
121 | Comlink.expose(new WorkerAPI());
122 |
123 | type HighlightedCode = {
124 | language: SupportedLanguage;
125 | code: string;
126 | };
127 |
--------------------------------------------------------------------------------
/src/ts/main.tsx:
--------------------------------------------------------------------------------
1 | import * as Preact from "preact";
2 | import { Router, Link, Switch, Route, useLocation } from "wouter-preact";
3 |
4 | import ExtensionInspector from "./components/ExtensionInspector";
5 | import ExtensionSelector from "./components/ExtensionSelector";
6 | import ConfigUI from "./components/ConfigUI";
7 | import { setPortal } from "./modal";
8 | import * as LFP from "./utils/LocalFileProvider";
9 |
10 | // create styles (in )
11 | import "prismjs/themes/prism-okaidia.css";
12 | import "../less/app.less";
13 | import { removeOld } from "./inspector/CacheHelper";
14 |
15 | const pathBase = window.location.host.endsWith("github.io")
16 | ? "/web-ext-inspector"
17 | : undefined;
18 |
19 | const App: Preact.FunctionalComponent = () => {
20 | const urlParams = new URLSearchParams(window.location.search);
21 | const navigate = useLocation()[1];
22 |
23 | if (urlParams.has("route")) {
24 | console.info("routing to " + urlParams.get("route"));
25 | navigate(urlParams.get("route")!, { replace: true });
26 | } else if (urlParams.has("extension")) {
27 | // map old URLs to new URLs
28 | if (/^[a-z0-9\-]+$/.test(urlParams.get("extension")!)) {
29 | const sources = new Map([
30 | ["amo", "firefox"],
31 | ["cws", "chrome"],
32 | ]);
33 | const store = urlParams.get("store");
34 | const source =
35 | store && sources.has(store) ? sources.get(store) : "firefox";
36 | const route =
37 | "/inspect/" + source + "/" + urlParams.get("extension")!;
38 | const prefix = pathBase ? pathBase : "";
39 | navigate(prefix + route, { replace: true });
40 | }
41 | }
42 |
43 | return (
44 |
45 |
46 |
47 |
54 |
55 |
56 |
57 | {({ id }) => (
58 |
63 |
64 | {({ id }) => (
65 |
70 |
71 | {({ id }) => {
72 | const url = LFP.getURL(id);
73 | const navigate = useLocation()[1];
74 | if (!url) {
75 | navigate("/", { replace: true });
76 | return null;
77 | }
78 | return (
79 |
85 |
86 |
88 |
89 |
90 |
99 |
101 | );
102 | };
103 |
104 | const root = document.createElement("div");
105 | root.id = "root";
106 | document.body.appendChild(root);
107 |
108 | const modalPortal = document.createElement("div");
109 | modalPortal.id = "modalPortal";
110 | document.body.appendChild(modalPortal);
111 | setPortal(modalPortal);
112 |
113 | removeOld();
114 | Preact.render( = (props) => {
15 | const classes = ["modal-window"].concat(props.classes);
16 | return (
17 |
49 | {content}
50 | ,
51 | portal
52 | );
53 | }
54 |
55 | export function hideModal() {
56 | if (portal) {
57 | render(null, portal);
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/ts/openViewer.tsx:
--------------------------------------------------------------------------------
1 | import * as Comlink from "comlink";
2 | import { Inspector } from "./inspector/InspectorFactory";
3 | import { getFile } from "./utils/paths";
4 | import { FileViewerAPI } from "./viewer/viewer";
5 | import * as config from "./config";
6 | import { showModal } from "./modal";
7 |
8 | const windowFeatures = "menubar=no,location=no,scrollbars=yes";
9 |
10 | export async function openFileViewer(filePath: string, remote: Inspector): Promise {
11 | const openIn = config.get("open-files-in");
12 |
13 | if (openIn === "popup" || openIn === "tab") {
14 | openFileViewerWindow(filePath, remote, openIn === "popup");
15 | } else if (openIn === "modal") {
16 | await openFileViewerModal(filePath, remote);
17 | }
18 | }
19 |
20 | async function openFileViewerModal(filePath: string, remote: Inspector) {
21 | const result = await remote.getPrettyCode(filePath);
22 |
23 | const html = { __html: result.code };
24 |
25 | showModal(
26 | getFile(filePath),
27 | ["file-viewer"],
28 | (
55 | Comlink.windowEndpoint(fileWnd)
56 | );
57 |
58 | if ((await viewer.ping()) !== "pong") {
59 | alert("Failed to communicate with popup window.");
60 | return;
61 | }
62 |
63 | const result = await remote.getPrettyCode(filePath);
64 |
65 | viewer.show(getFile(filePath), result.code, result.language);
66 | };
67 | }
68 |
--------------------------------------------------------------------------------
/src/ts/types/ExtensionCache.ts:
--------------------------------------------------------------------------------
1 | import { ExtensionId } from "./ExtensionId";
2 |
3 | export type OptionalMetaData = Partial<{
4 | last_updated: string;
5 | created: string;
6 | author: string;
7 | }>;
8 |
9 | export type ExtensionCacheInfo = {
10 | id: ExtensionId;
11 | url: string;
12 | date: Date;
13 | version: string;
14 | name: string;
15 | extraInfo?: OptionalMetaData;
16 | };
17 |
18 | export type ExtCacheMap = Map;
19 |
--------------------------------------------------------------------------------
/src/ts/types/ExtensionDetails.ts:
--------------------------------------------------------------------------------
1 | export type ExtensionDetails = {
2 | name: string;
3 | version: string;
4 | size: number;
5 |
6 | author?: string;
7 | last_updated?: string;
8 | created?: string;
9 | icon_url?: string;
10 | download_url?: string;
11 | };
12 |
--------------------------------------------------------------------------------
/src/ts/types/ExtensionId.ts:
--------------------------------------------------------------------------------
1 | export type ExtensionId =
2 | | {
3 | id: string;
4 | source: "firefox" | "chrome";
5 | }
6 | | {
7 | url: string;
8 | source: "url";
9 | };
10 |
--------------------------------------------------------------------------------
/src/ts/types/Manifest.ts:
--------------------------------------------------------------------------------
1 | export type Manifest = Manifest2;
2 |
3 | type Manifest2 = {
4 | manifest_version: 2;
5 | name: string;
6 | version: string;
7 | author?: string;
8 | default_locale?: string;
9 |
10 | background?: {
11 | page: string;
12 | scripts: string[];
13 | persistent?: boolean;
14 | };
15 |
16 | content_scripts?: ContentScript[];
17 | user_scripts?: {
18 | api_script?: string;
19 | };
20 |
21 | optional_permissions?: Permission[];
22 | permissions?: Permission[];
23 |
24 | commands?: {
25 | [commandName: string]: Command;
26 | };
27 |
28 | web_accessible_resources?: string[];
29 |
30 | sidebar_action?: {
31 | default_panel: string;
32 | open_at_install?: boolean;
33 | };
34 |
35 | browser_action?: BrowserOrPageAction;
36 | page_action?: BrowserOrPageAction;
37 |
38 | icons?: {
39 | [iconSize: string]: string
40 | };
41 |
42 | devtools_page?: string,
43 |
44 | // TODO
45 | content_security_policy?: string;
46 | protocol_handlers?: any[];
47 | };
48 |
49 | type Permission = string;
50 |
51 | type Command = {
52 | suggested_key?: {
53 | default?: string;
54 | mac?: string;
55 | linux?: string;
56 | windows?: string;
57 | chromeos?: string;
58 | android?: string;
59 | ios?: string;
60 | };
61 | description?: string;
62 | };
63 |
64 | type ContentScript = {
65 | matches: string[];
66 | exclude_matches?: string[];
67 | include_globs?: string[];
68 | exclude_globs?: string[];
69 | css?: string[];
70 | js?: string[];
71 | all_frames?: boolean;
72 | match_about_blank?: boolean;
73 | run_at?: "document_start" | "document_end" | "document_idle";
74 | };
75 |
76 | type BrowserOrPageAction = {
77 | default_popup?: string;
78 | default_title?: string;
79 | browser_style?: boolean;
80 | };
81 |
--------------------------------------------------------------------------------
/src/ts/types/PackagedFiles.ts:
--------------------------------------------------------------------------------
1 | import { TreeNodeDTO } from "../inspector/worker/FileTree";
2 |
3 | export type TreeFileDTO = TreeNodeDTO & { type: "file" };
4 | export type TreeFolderDTO = TreeNodeDTO & { type: "folder" };
5 |
6 | export type FileSelectListener = (path: string, file: TreeFileDTO) => void;
7 | export type FileAsyncAction = (path: string, file: TreeFileDTO) => Promise;
8 |
--------------------------------------------------------------------------------
/src/ts/types/Translations.ts:
--------------------------------------------------------------------------------
1 | export type Translations = Record<
2 | string,
3 | {
4 | message: string;
5 | description?: string;
6 | placeholders?: Record<
7 | string,
8 | {
9 | content: string;
10 | example?: string;
11 | }
12 | >;
13 | }
14 | >;
15 |
--------------------------------------------------------------------------------
/src/ts/utils/AsyncEvent.ts:
--------------------------------------------------------------------------------
1 | export default class AsyncEvent {
2 | private resolve: () => void;
3 | private promise: Promise;
4 | private fired: boolean = false;
5 | private name: string;
6 |
7 | public constructor(name?: string) {
8 | this.promise = new Promise((resolve) => {
9 | this.resolve = resolve;
10 | });
11 | this.name = name ?? "";
12 | }
13 |
14 | public fire(): void {
15 | if (!this.fired) {
16 | this.fired = true;
17 | this.resolve();
18 | } else {
19 | console.warn(`Event '${this.name}' already fired.`);
20 | }
21 | }
22 |
23 | public get hasFired(): boolean {
24 | return this.fired;
25 | }
26 |
27 | public waitFor(): Promise {
28 | return this.promise;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/ts/utils/FunctionTypes.ts:
--------------------------------------------------------------------------------
1 | // export type Consumer = (data: T) => void;
2 |
3 | // export type BiConsumer = (a: T1, b: T2) => void;
4 |
5 | // export type Supplier = () => T;
6 |
7 | // export type Callback = () => void;
8 |
9 | // export type Predicate = (data: T) => boolean;
10 |
11 | // export type Producer = () => T;
12 |
13 | // export type Provider = Producer;
14 |
--------------------------------------------------------------------------------
/src/ts/utils/LocalFileProvider.ts:
--------------------------------------------------------------------------------
1 | const files = new Map();
2 |
3 | export function addFile(file: File, id: string = file.name): string {
4 | files.set(id, URL.createObjectURL(file));
5 | return file.name;
6 | }
7 |
8 | export function getURL(id: string): string | undefined {
9 | return files.get(id);
10 | }
11 |
12 | export function free(id: string): void {
13 | const url = files.get(id);
14 | if (url) {
15 | URL.revokeObjectURL(url);
16 | }
17 | files.delete(id);
18 | }
19 |
--------------------------------------------------------------------------------
/src/ts/utils/download.ts:
--------------------------------------------------------------------------------
1 | export function startDownload(url: string, filename: string): void {
2 | const a = document.createElement("a");
3 | a.href = url;
4 | a.download = filename;
5 | a.click();
6 | }
7 |
--------------------------------------------------------------------------------
/src/ts/utils/html.ts:
--------------------------------------------------------------------------------
1 | import { Parser } from "htmlparser2";
2 |
3 | type ScriptInfo = {
4 | src: string;
5 | type: string;
6 | };
7 |
8 | export function extractScripts(html: string): ScriptInfo[] {
9 | let scripts: ScriptInfo[] = [];
10 |
11 | const parser = new Parser({
12 | onopentag(name, attributes) {
13 | if (name === "script" && attributes.src) {
14 | scripts.push({
15 | src: attributes.src,
16 | type: attributes.type ?? "text/javascript",
17 | });
18 | }
19 | },
20 | });
21 |
22 | parser.write(html);
23 | parser.end();
24 |
25 | return scripts;
26 | }
27 |
--------------------------------------------------------------------------------
/src/ts/utils/paths.ts:
--------------------------------------------------------------------------------
1 | export function cleanPath(dirtyPath: string): string {
2 | const fixedSeparators = dirtyPath.replace(/\\/g, "/").replace(/\+/g, "/");
3 | const fixedStart = fixedSeparators.replace(/^\.\//, "");
4 | const fixedEnd = fixedStart.replace(/\/$/, "");
5 | return fixedEnd;
6 | }
7 |
8 | export function getFolder(filePath: string): string {
9 | let parts = cleanPath(filePath).split("/");
10 | parts.pop();
11 | return parts.join("/");
12 | }
13 |
14 | export function getFile(filePath: string): string {
15 | const parts = filePath.split("/");
16 | return parts.length > 0 ? parts.pop()! : "";
17 | }
18 |
19 | export function joinPaths(path1: string, path2: string): string {
20 | const parts1 = cleanPath(path1).split("/");
21 | const parts2 = cleanPath(path2).split("/");
22 | return parts1
23 | .concat(parts2)
24 | .filter((part) => part !== "")
25 | .join("/");
26 | }
27 |
--------------------------------------------------------------------------------
/src/ts/viewer/viewer.tsx:
--------------------------------------------------------------------------------
1 | import * as Comlink from "comlink";
2 | import * as Preact from "preact";
3 |
4 | // create styles (in )
5 | import "prismjs/themes/prism-okaidia.css";
6 | import "../../less/file-viewer.less";
7 |
8 | type Props = {
9 | html: string;
10 | language?: string;
11 | };
12 |
13 | class FileViewer extends Preact.Component {
14 | public render() {
15 | const html = { __html: this.props.html };
16 | const codeClasses = [];
17 |
18 | if (this.props.language) {
19 | codeClasses.push("language-" + this.props.language);
20 | }
21 |
22 | return (
23 | <>
24 | {
46 | document.title = filename;
47 |
48 | Preact.render(
49 | Failed to connect with opener window. ,
64 | document.body
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./public",
4 | "target": "es2020",
5 | "module": "es2020",
6 | "moduleResolution": "node",
7 | "sourceMap": true,
8 | "jsx": "react-jsx",
9 | "jsxImportSource": "preact",
10 | "strict": true,
11 | "noImplicitAny": true,
12 | "strictPropertyInitialization": false,
13 | "allowSyntheticDefaultImports": true
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = (env, {mode}) => ({
4 | mode: mode ?? "development",
5 | entry: {
6 | main: path.join(__dirname, "src", "ts", "main.tsx"),
7 | worker: path.join(
8 | __dirname,
9 | "src",
10 | "ts",
11 | "inspector",
12 | "worker",
13 | "worker.ts"
14 | ),
15 | viewer: path.join(__dirname, "src", "ts", "viewer", "viewer.tsx"),
16 | },
17 | target: "web",
18 | devtool: mode === "development" ? "eval-cheap-module-source-map" : undefined,
19 | resolve: {
20 | extensions: [".ts", ".tsx", ".js"],
21 | },
22 | module: {
23 | rules: [
24 | {
25 | test: /\.tsx?$/,
26 | loader: "ts-loader",
27 | options: {
28 | onlyCompileBundledFiles: true,
29 | },
30 | },
31 | {
32 | test: /\.(less|css)$/i,
33 | use: [
34 | { loader: "style-loader" }, // creates style nodes from JS strings
35 | { loader: "css-loader" }, // translates CSS into a JS module (CommonJS)
36 | { loader: "less-loader" }, // compiles Less to CSS
37 | ],
38 | },
39 | {
40 | test: /\.svg/,
41 | loader: "svg-url-loader",
42 | },
43 | ],
44 | },
45 | output: {
46 | filename: "[name].bundle.js",
47 | path: path.resolve(__dirname, "public"),
48 | },
49 | devServer: {
50 | contentBase: path.join(__dirname, "public"),
51 | },
52 | });
53 |
--------------------------------------------------------------------------------
47 |
48 |
49 | Extension Inspector
50 |
51 | Extension Inspector
52 |
53 |
54 | e.stopPropagation()}
21 | >
22 |
33 |
34 |
35 | );
36 | };
37 |
38 | export function showModal(
39 | title: string,
40 | classes: string[],
41 | content: JSX.Element
42 | ): void {
43 | if (portal === null) {
44 | throw new Error("Modal portal not set.");
45 | }
46 |
47 | render(
48 |
29 |
34 | );
35 | }
36 |
37 | function openFileViewerWindow(
38 | filePath: string,
39 | remote: Inspector,
40 | popup: boolean
41 | ): void {
42 | const fileWnd = window.open(
43 | "/file.html?path=" + filePath,
44 | "ext-file-window",
45 | popup ? windowFeatures : ""
46 | );
47 |
48 | if (fileWnd === null) {
49 | alert("Could not open file viewer popup.");
50 | return;
51 | }
52 |
53 | fileWnd.onload = async () => {
54 | const viewer = Comlink.wrap
25 |
26 |
27 |
28 |
35 |
36 | );
37 | }
38 | }
39 |
40 | export class FileViewerAPI {
41 | public async show(
42 | filename: string,
43 | html: string,
44 | language: string
45 | ): Promise
29 |
34 |