show different popup messages per platform

sean-adams · Jun 2, 2019 · b0241d4 · b0241d4
1 parent 29dd08c
commit b0241d4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/public/popup.html b/public/popup.html
@@ -5,8 +5,13 @@
 </head>
 <body style="width: 200px;">
 <div>
-To use <strong>dataslayer</strong>, please open Developer Tools from the Chrome menu (<span style="writing-mode:vertical-lr; width: 5px;">...</span> > More Tools > Developer Tools).
+To use <strong>dataslayer</strong>, please open Developer Tools from the 
+<span id="platformName"></span> menu 
+(<span id="chromeMenuIcon" style="writing-mode:vertical-lr; width: 5px;">...</span>
+<span id="firefoxMenuIcon" style="writing-mode:vertical-lr; width: 18px;">|||</span>
+&nbsp;>&nbsp;<span id="menuTree">More Tools > Developer Tools</span>).
 </div>
+<script src="popup.js"></script>
 </body>
 </html>
 
diff --git a/public/popup.js b/public/popup.js
@@ -0,0 +1,9 @@
+if (/Firefox/.test(navigator.userAgent)) {
+  document.querySelector('#platformName').innerText = 'Firefox';
+  document.querySelector('#menuTree').innerText =
+    'Web Developer > Toggle Tools';
+  document.querySelector('#chromeMenuIcon').setAttribute('style', 'display: none;');
+} else {
+  document.querySelector('#platformName').innerText = 'Chrome';
+  document.querySelector('#firefoxMenuIcon').setAttribute('style', 'display: none;');
+}