Merge pull request #87 from preactjs/devtools-css

Only inject devtools css when Preact was detected

Author: marvinhagemeister

src/shells/chrome/manifest.json

@@ -34,5 +34,9 @@
 			"run_at": "document_start"
 		}
 	],
-	"web_accessible_resources": ["installHook.css", "panel.html", "devtools.html"]
+	"web_accessible_resources": [
+		"preact-devtools-page.css",
+		"panel.html",
+		"devtools.html"
+	]
 }

src/shells/edge/manifest.json

@@ -34,5 +34,9 @@
 			"run_at": "document_start"
 		}
 	],
-	"web_accessible_resources": ["installHook.css", "panel.html", "devtools.html"]
+	"web_accessible_resources": [
+		"preact-devtools-page.css",
+		"panel.html",
+		"devtools.html"
+	]
 }

src/shells/firefox/manifest.json

@@ -38,5 +38,9 @@
 			"run_at": "document_start"
 		}
 	],
-	"web_accessible_resources": ["installHook.css", "panel.html", "devtools.html"]
+	"web_accessible_resources": [
+		"preact-devtools-page.css",
+		"panel.html",
+		"devtools.html"
+	]
 }

src/shells/shared/initClient.ts

@@ -13,6 +13,8 @@ window.addEventListener("message", ev => {
 				hasPreact: true,
 			}),
 		);
+
+		injectStyles(chrome.runtime.getURL("preact-devtools-page.css"));
 	}
 });
 
@@ -42,5 +44,4 @@ if (document.contentType === "text/html") {
 	//
 	// The string "CODE_TO_INJECT" will be replaced by our build tool.
 	inject(`;(${"CODE_TO_INJECT"}(window))`, "code");
-	injectStyles(chrome.runtime.getURL("installHook.css"));
 }

tools/build.js

@@ -1,13 +1,13 @@
 const archiver = require("archiver");
 const fs = require("fs");
 const path = require("path");
-const rimraf = require("rimraf");
 
 const browser = process.env.BROWSER;
 
 // Manually bundle injection code to make sure it runs before everything else
-const source = path.join(__dirname, "..", "dist", browser, "installHook.js");
-const target = path.join(__dirname, "..", "dist", browser, "initClient.js");
+const dist = path.join(__dirname, "..", "dist", browser);
+const source = path.join(dist, "installHook.js");
+const target = path.join(dist, "initClient.js");
 const hook = fs
 	.readFileSync(source, "utf8")
 	.replace(/\(function \(\) \{/g, "function install() {")
@@ -33,6 +33,12 @@ fs.writeFileSync(target, targetFile);
 // Now that we inlined installHook.js we can delete it
 fs.unlinkSync(source);
 
+// Rename injected css file so users understand where it's coming from.
+fs.renameSync(
+	path.join(dist, "installHook.css"),
+	path.join(dist, "preact-devtools-page.css"),
+);
+
 // Package extension
 const output = fs.createWriteStream(__dirname + `/../dist/${browser}.zip`);
 const archive = archiver("zip", { zlib: { level: 9 } });