feat: add devtools support (#40)

* Add devtools_page support * Add devtool section to README
samrum · Aug 12, 2022 · 627e7f0 · 627e7f0
1 parent e2ec88e
commit 627e7f0
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -153,6 +153,47 @@ A sample of supported browsers:
 
 The plugin will automatically default vite's `build.target` config option to these minimum browser versions if not already defined by the user.
 
+### Devtools
+
+If you want to create a developer tools, add `devtools_page` in your manifest
+
+```js
+  devtools_page: "src/entries/devtools/index.html",
+```
+
+Place a script `devtools.js` in `public` dir.
+
+```js
+var _browser;
+if (chrome) {
+  _browser = chrome;
+} else {
+  _browser = browser;
+}
+_browser.devtools.panels.create(
+  "My Panel", // title
+  "images/icon-16.png", // icon
+  "src/entries/devtools/index.html" // content
+);
+```
+
+Then load the script from your devtools html which placed in `src/entries/devtools/index.html`.
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Devtools</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+    <script src="/devtools.js"></script>
+  </body>
+</html>
+```
+
 ## How it works
 
 The plugin will take the provided manifest, parse rollup input scripts from all supported manifest properties, then output an ES module based web extension.

diff --git a/src/manifestParser/manifestV2.ts b/src/manifestParser/manifestV2.ts
@@ -28,6 +28,7 @@ export default class ManifestV2 extends ManifestParser<Manifest> {
       manifest.background?.page,
       manifest.browser_action?.default_popup,
       manifest.options_ui?.page,
+      manifest.devtools_page,
       ...(manifest.web_accessible_resources ?? []).filter(isSingleHtmlFilename),
     ].filter((fileName): fileName is string => typeof fileName === "string");
   }

diff --git a/src/manifestParser/manifestV3.ts b/src/manifestParser/manifestV3.ts
@@ -35,6 +35,7 @@ export default class ManifestV3 extends ManifestParser<Manifest> {
     return [
       manifest.action?.default_popup,
       manifest.options_ui?.page,
+      manifest.devtools_page,
       ...webAccessibleResourcesHtmlFileNames,
     ].filter((fileName): fileName is string => typeof fileName === "string");
   }

diff --git a/test/fixture/index/javascript/manifestV2/devtoolsHtml.ts b/test/fixture/index/javascript/manifestV2/devtoolsHtml.ts
@@ -0,0 +1,18 @@
+import { getExpectedHtml, getExpectedLog } from "../../../fixtureUtils";
+import { getExpectedCode } from "../shared/devtoolsHtml";
+
+const resourceDir = "test/fixture/index/javascript/resources/devtoolsHtml";
+
+const inputManifest = {
+  devtools_page: `${resourceDir}/devtools.html`,
+};
+
+const expectedManifest = {
+  devtools_page: `${resourceDir}/devtools.html`,
+};
+
+export default {
+  inputManifest,
+  expectedManifest,
+  ...getExpectedCode(resourceDir),
+};
diff --git a/test/fixture/index/javascript/manifestV2/index.ts b/test/fixture/index/javascript/manifestV2/index.ts
@@ -7,6 +7,7 @@ export { default as ContentWithChunkedImport } from "./contentWithChunkedImport"
 export { default as ContentWithUnchunkedImport } from "./contentWithUnchunkedImport";
 export { default as ContentWithNoImports } from "./contentWithNoImports";
 export { default as ContentWithSameScriptName } from "./contentWithSameScriptName";
+export { default as DevtoolsHtml } from "./devtoolsHtml";
 export { default as OptionsHtml } from "./optionsHtml";
 export { default as PopupHtml } from "./popupHtml";
 export { default as WebAccessibleResourceHtml } from "./webAccessibleResourceHtml";

diff --git a/test/fixture/index/javascript/manifestV3/devtoolsHtml.ts b/test/fixture/index/javascript/manifestV3/devtoolsHtml.ts
@@ -0,0 +1,18 @@
+import { getExpectedHtml, getExpectedLog } from "../../../fixtureUtils";
+import { getExpectedCode } from "../shared/devtoolsHtml";
+
+const resourceDir = "test/fixture/index/javascript/resources/devtoolsHtml";
+
+const inputManifest = {
+  devtools_page: `${resourceDir}/devtools.html`,
+};
+
+const expectedManifest = {
+  devtools_page: `${resourceDir}/devtools.html`,
+};
+
+export default {
+  inputManifest,
+  expectedManifest,
+  ...getExpectedCode(resourceDir),
+};
diff --git a/test/fixture/index/javascript/manifestV3/index.ts b/test/fixture/index/javascript/manifestV3/index.ts
@@ -7,6 +7,7 @@ export { default as ContentWithChunkedImport } from "./contentWithChunkedImport"
 export { default as ContentWithUnchunkedImport } from "./contentWithUnchunkedImport";
 export { default as ContentWithSameScriptName } from "./contentWithSameScriptName";
 export { default as ContentWithNoImports } from "./contentWithNoImports";
+export { default as DevtoolsHtml } from "./devtoolsHtml";
 export { default as OptionsHtml } from "./optionsHtml";
 export { default as PopupHtml } from "./popupHtml";
 export { default as WebAccessibleResourceHtml } from "./webAccessibleResourceHtml";

diff --git a/test/fixture/index/javascript/resources/devtoolsHtml/devtools.html b/test/fixture/index/javascript/resources/devtoolsHtml/devtools.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script type="module" src="./devtools.js"></script>
+
+    <script type="module" src="http://example.com/httpModuleScript.js"></script>
+  </head>
+</html>
diff --git a/test/fixture/index/javascript/resources/devtoolsHtml/devtools.js b/test/fixture/index/javascript/resources/devtoolsHtml/devtools.js
@@ -0,0 +1,3 @@
+import log from "./../shared/log";
+
+log("devtools");
diff --git a/test/fixture/index/javascript/shared/devtoolsHtml.ts b/test/fixture/index/javascript/shared/devtoolsHtml.ts
@@ -0,0 +1,18 @@
+import { getExpectedHtml, getExpectedLog } from "../../../fixtureUtils";
+
+export function getExpectedCode(resourceDir: string) {
+  const chunkCode = {
+    [`assets/${resourceDir}/devtools.js`]: getExpectedLog("devtools"),
+  };
+
+  const assetCode = {
+    [`${resourceDir}/devtools.html`]: getExpectedHtml(
+      `${resourceDir}/devtools`
+    ),
+  };
+
+  return {
+    chunkCode,
+    assetCode,
+  };
+}