feat: chrome extension build

packages/js/assets/user-feedback-form.html

@@ -132,7 +132,30 @@ <h2 id="honeybadger-feedback-heading">
     <p id="honeybadger-feedback-footer">
         <a id="honeybadger-feedback-link" href="https://www.honeybadger.io/" target="_blank" title="Exception, uptime, and performance monitoring for PHP.">
             Powered by
-            <img src="https://www.honeybadger.io/images/navbar_logo.svg?1670031500" width="100"/>
+            <svg class="honeybadger-logo" height="40" viewBox="0 0 190 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+            <style>
+                #logoText {
+                    fill: var(--bs-brand);
+                }
+                [data-bs-theme=dark] #logoText {
+                    fill: white;
+                }
+                #logoBolt, #logoBorder {
+                    fill: var(--bs-brand);
+                }
+                [data-bs-theme=dark] #logoBolt {
+                    fill:url(#_Linear1);fill-rule:nonzero;
+                }
+            </style>
+                <path id="logoText" d="M58.59,34.57L62.786,5.798L58.115,5.798L56.398,17.497L52.161,17.497L53.878,5.798L49.207,5.798L44.978,34.57L49.649,34.57L51.527,21.799L55.764,21.799L53.886,34.57L58.59,34.57ZM67.303,28.803C71.974,28.803 73.809,26.83 74.777,19.78C75.678,13.085 74.11,10.886 69.772,10.886C65.168,10.886 63.199,13.15 62.365,20.039C61.498,26.798 63.266,28.803 67.303,28.803ZM67.77,25.504C66.602,25.504 66.302,24.372 66.936,20.006C67.537,15.479 68.104,14.153 69.438,14.153C70.606,14.153 70.84,15.22 70.239,19.683C69.639,24.114 69.071,25.504 67.77,25.504ZM81.42,12.697C82.454,11.727 83.956,10.886 85.29,10.886C87.993,10.886 88.927,12.73 88.46,15.964L86.591,28.415L82.254,28.415L84.022,16.449C84.189,15.285 83.956,14.702 83.088,14.702C82.421,14.702 81.787,15.285 81.387,15.673L79.518,28.415L75.181,28.415L77.683,11.274L81.353,11.274L81.42,12.697ZM136.677,11.274L136.176,12.536C135.442,11.468 134.341,10.886 132.973,10.886C129.804,10.886 127.868,13.409 127.067,20.103C126.266,26.733 127.801,28.803 130.304,28.803C131.805,28.803 132.973,28.092 133.84,27.089L133.874,28.415L137.878,28.415L140.413,11.274L136.677,11.274ZM134.14,24.243C133.773,24.696 133.073,25.181 132.472,25.181C131.404,25.181 131.071,24.178 131.638,20.006C132.238,15.576 132.873,14.541 133.94,14.541C134.574,14.541 135.108,14.993 135.408,15.479L134.14,24.243ZM154.727,5.798L151.39,28.415L147.42,28.415L147.386,27.089C146.519,28.124 145.318,28.803 143.85,28.803C141.347,28.803 139.779,26.733 140.614,20.103C141.414,13.409 143.316,10.886 146.519,10.886C147.754,10.886 148.721,11.404 149.422,12.212L150.391,5.798L154.727,5.798ZM145.185,20.006C144.584,24.178 144.951,25.181 146.019,25.181C146.586,25.181 147.32,24.696 147.687,24.243L148.955,15.479C148.655,14.993 148.087,14.541 147.487,14.541C146.419,14.541 145.786,15.576 145.185,20.006ZM107.145,34.563L158.879,34.563C161.976,34.563 164.601,32.283 165.035,29.215L167.572,11.274L163.835,11.274L163.435,12.568C162.768,11.63 161.633,10.886 160.399,10.886C157.029,10.886 155.194,12.73 154.259,19.909C153.359,26.442 154.827,28.447 157.463,28.447C158.797,28.447 160.032,27.865 160.866,26.895L160.733,28.124C160.375,29.66 158.797,30.879 156.204,30.879L109.231,30.879C108.618,32.327 108.021,33.499 107.315,34.363C107.259,34.431 107.203,34.498 107.145,34.563ZM159.698,24.89C158.63,24.89 158.23,23.952 158.797,19.877C159.365,15.608 160.032,14.541 161.132,14.541C161.733,14.541 162.267,14.993 162.567,15.446L161.333,23.952C160.965,24.405 160.265,24.89 159.698,24.89ZM177.647,27.283C175.88,28.318 174.044,28.803 172.443,28.803C168.706,28.803 167.004,25.569 167.738,20.071C168.606,13.473 171.075,10.886 175.312,10.886C177.948,10.886 179.583,12.245 179.583,14.638C179.583,17.839 177.782,21.332 171.909,22.4C171.909,22.575 171.919,22.703 171.928,22.82C171.935,22.918 171.942,23.008 171.942,23.111C171.975,24.437 172.676,25.148 173.844,25.148C174.645,25.148 175.579,24.89 176.914,24.275L177.647,27.283ZM174.812,14.088C173.778,14.088 172.843,15.64 172.276,19.068C174.745,18.745 175.679,16.772 175.679,15.349C175.679,14.573 175.412,14.088 174.812,14.088ZM183.133,28.415L184.901,16.675C185.769,15.899 186.736,15.479 187.703,15.479C187.971,15.479 188.204,15.479 188.471,15.511L189.339,11.339C188.871,11.016 188.471,10.886 187.971,10.886C186.703,10.886 185.602,11.889 184.801,13.312L184.734,11.274L181.331,11.274L178.795,28.415L183.133,28.415ZM99.105,27.283C97.337,28.318 95.502,28.803 93.9,28.803C90.164,28.803 88.462,25.569 89.196,20.071C90.064,13.473 92.532,10.886 96.77,10.886C99.406,10.886 101.04,12.245 101.04,14.638C101.04,17.839 99.239,21.332 93.367,22.4C93.367,22.576 93.376,22.704 93.385,22.82C93.393,22.918 93.4,23.008 93.4,23.111C93.433,24.437 94.134,25.148 95.302,25.148C96.103,25.148 97.037,24.89 98.372,24.275L99.105,27.283ZM96.269,14.088C95.235,14.088 94.301,15.64 93.734,19.068C96.203,18.745 97.137,16.772 97.137,15.349C97.137,14.573 96.87,14.088 96.269,14.088ZM119.965,28.803C123.769,28.803 125.237,25.795 126.038,18.777C126.805,12.503 125.571,10.886 122.935,10.886C121.601,10.886 120.432,11.436 119.398,12.245L120.266,6.273L115.93,6.273L112.692,28.415L116.629,28.415L117.029,27.121C117.597,28.059 118.631,28.803 119.965,28.803ZM119.131,25.181C118.531,25.181 117.897,24.857 117.63,24.243L118.931,15.446C119.431,14.929 120.098,14.541 120.733,14.541C121.734,14.541 121.934,15.543 121.5,18.939C121.1,22.982 120.432,25.181 119.131,25.181ZM105.859,23.758L109.629,11.274L114.1,11.274L107.427,28.609C105.592,33.331 104.558,34.564 101.656,34.564L60.91,34.564L61.451,30.879L96.923,30.878L100.944,30.878C102.286,30.878 103.023,29.947 103.023,28.738L101.522,11.274L106.226,11.274L105.859,23.758Z"/>
+                <path id="logoBorder" d="M28.229,12.072L36.157,20L20,36.157L18.241,34.399L15.854,36.786L18.408,39.341C19.287,40.22 20.713,40.22 21.592,39.341L39.341,21.592C40.22,20.713 40.22,19.287 39.341,18.408L29.651,8.719L28.229,12.072ZM27.934,7.002L26.512,10.355L23.521,7.364L25.909,4.977L27.934,7.002ZM24.317,3.385L21.592,0.659C20.713,-0.22 19.287,-0.22 18.408,0.659L0.659,18.408C-0.22,19.287 -0.22,20.713 0.659,21.592L11.063,31.995L12.587,28.744L3.843,20L20,3.843L21.93,5.772L24.317,3.385ZM12.755,33.688L14.279,30.437L16.65,32.807L14.262,35.195L12.755,33.688Z"/>
+                <g>
+                <path id="logoBolt" d="M29.788,2.63C30.029,2.061 29.309,1.575 28.872,2.013L9.533,21.352L17.411,21.352L11.142,36.785C10.911,37.353 11.627,37.829 12.061,37.395L30.918,18.538L23.039,18.538L29.788,2.63Z"/>
+            </g>
+                <defs>
+                <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.18719e-15,35.7195,-35.7195,2.18719e-15,20.2253,1.84375)"><stop offset="0" style="stop-color:white;stop-opacity:1"/><stop offset="0.46" style="stop-color:rgb(255,204,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,113,67);stop-opacity:1"/></linearGradient>
+            </defs>
+        </svg>
         </a>
     </p>
 </div>

packages/js/examples/chrome-extension/options.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <link rel="stylesheet" href="button.css">
-  <script src="vendor/honeybadger.min.js"></script>
+  <script src="vendor/honeybadger.ext.min.js"></script>
   <script src="error-reporting.js"></script>
 </head>
 <body>
@@ -16,4 +16,4 @@
 </div>
 </body>
 <script src="options.js"></script>
-</html>
+</html>

packages/js/examples/chrome-extension/popup.html

@@ -2,11 +2,11 @@
 <html>
 <head>
     <link rel="stylesheet" href="button.css">
-    <script src="vendor/honeybadger.min.js"></script>
+    <script src="vendor/honeybadger.ext.min.js"></script>
     <script src="error-reporting.js"></script>
 </head>
 <body>
 <button id="changeColor"></button>
 <script src="popup.js"></script>
 </body>
-</html>
+</html>

packages/js/examples/chrome-extension/setup.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-curl -o vendor/honeybadger.min.js https://js.honeybadger.io/v3.2/honeybadger.min.js
+curl -o vendor/honeybadger.min.js https://js.honeybadger.io/v6.9/honeybadger.ext.min.js

packages/js/package.json

@@ -69,6 +69,7 @@
     "jest-fetch-mock": "^3.0.3",
     "nock": "^13.2.1",
     "rollup": "^2.77.0",
+    "rollup-plugin-strip-code": "^0.2.7",
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^14.0.0",
     "supertest": "^6.1.6",

packages/js/rollup.config.js

@@ -2,6 +2,7 @@ import replace from '@rollup/plugin-replace'
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
+import stripCode from 'rollup-plugin-strip-code'
 import pkg from './package.json'
 
 const sharedPlugins = [
@@ -43,6 +44,25 @@ export default [
     plugins: [...sharedPlugins, terser()]
   },
 
+  // Chrome Extension build (minified) - https://github.com/honeybadger-io/honeybadger-js/issues/1383
+  {
+    input: 'build/src/browser.js',
+    output: {
+      name: 'Honeybadger',
+      file: 'dist/browser/honeybadger.ext.min.js',
+      format: 'umd',
+      sourcemap: true
+    },
+    plugins: [
+      stripCode({
+        start_comment: 'ROLLUP_STRIP_CODE_CHROME_EXTENSION_START',
+        end_comment: 'ROLLUP_STRIP_CODE_CHROME_EXTENSION_END'
+      }),
+      ...sharedPlugins,
+      terser()
+    ]
+  },
+
   // Server build
   {
     input: 'build/src/server.js',

packages/js/scripts/release-cdn.sh

@@ -34,6 +34,8 @@ aws s3 sync dist/browser/ s3://$HONEYBADGER_JS_S3_BUCKET/$PREFIX \
   --include 'honeybadger.js.map'\
   --include 'honeybadger.min.js' \
   --include 'honeybadger.min.js.map' \
+  --include 'honeybadger.ext.min.js' \
+  --include 'honeybadger.ext.min.js.map' \
   --include 'honeybadger-feedback-form.js'
 
 aws cloudfront create-invalidation --distribution-id $HONEYBADGER_DISTRIBUTION_ID --paths "/$PREFIX/*"

packages/js/src/browser.ts

@@ -6,6 +6,7 @@ import breadcrumbs from './browser/integrations/breadcrumbs'
 import timers from './browser/integrations/timers'
 import eventListeners from './browser/integrations/event_listeners'
 import { BrowserTransport } from './browser/transport'
+import { BrowserFeedbackForm } from './browser/feedback-form';
 
 const { merge, filter, objectIsExtensible, globalThisOrWindow } = Util
 
@@ -20,6 +21,7 @@ const getProjectRoot = () => {
 
   return projectRoot
 }
+
 export const getUserFeedbackScriptUrl = (version: string) => {
   const majorMinorVersion = version.split('.').slice(0,2).join('.')
   return `https://js.honeybadger.io/v${majorMinorVersion}/honeybadger-feedback-form.js`
@@ -99,58 +101,8 @@ class Honeybadger extends Client {
   }
 
   public async showUserFeedbackForm(options: Types.UserFeedbackFormOptions = {}) {
-    if (!this.config || !this.config.apiKey) {
-      this.logger.debug('Client not initialized')
-      return
-    }
-
-    if (!this.__lastNoticeId) {
-      this.logger.debug("Can't show user feedback form without a notice already reported")
-      return
-    }
-
-    const global = globalThisOrWindow()
-    if (typeof global.document === 'undefined') {
-      this.logger.debug('global.document is undefined. Cannot attach script')
-      return
-    }
-
-    if (this.isUserFeedbackScriptUrlAlreadyVisible()) {
-      this.logger.debug('User feedback form is already visible')
-      return
-    }
-
-    global['honeybadgerUserFeedbackOptions'] = {
-      ...options,
-      apiKey: this.config.apiKey,
-      endpoint: this.config.userFeedbackEndpoint,
-      noticeId: this.__lastNoticeId
-    }
-
-    this.appendUserFeedbackScriptTag(global, options)
-  }
-
-  private appendUserFeedbackScriptTag(window: typeof globalThis, options: Types.UserFeedbackFormOptions = {}) {
-    const script = window.document.createElement('script')
-    script.setAttribute('src', this.getUserFeedbackSubmitUrl())
-    script.setAttribute('async', 'true')
-    if (options.onLoad) {
-      script.onload = options.onLoad
-    }
-    (global.document.head || global.document.body).appendChild(script)
-  }
-
-  private isUserFeedbackScriptUrlAlreadyVisible() {
-    const global = globalThisOrWindow()
-    const feedbackScriptUrl =this.getUserFeedbackSubmitUrl()
-    for (let i = 0; i < global.document.scripts.length; i++) {
-      const script = global.document.scripts[i]
-      if (script.src === feedbackScriptUrl) {
-        return true
-      }
-    }
-
-    return false
+    const form = new BrowserFeedbackForm(this.config, this.logger, this.getUserFeedbackSubmitUrl());
+    form.show(this.__lastNoticeId, options);
   }
 
   private getUserFeedbackSubmitUrl() {

packages/js/src/browser/feedback-form.ts

@@ -0,0 +1,73 @@
+import { Types, Util } from '@honeybadger-io/core'
+const { globalThisOrWindow } = Util
+
+export class BrowserFeedbackForm {
+
+  private readonly config: Types.BrowserConfig
+  private readonly logger: Types.Logger
+  private readonly scriptUrl: string
+
+  constructor(config: Types.BrowserConfig, logger: Types.Logger, scriptUrl: string) {
+    this.config = config
+    this.logger = logger
+    this.scriptUrl = scriptUrl
+  }
+
+  /* ROLLUP_STRIP_CODE_CHROME_EXTENSION_START */
+  public show(lastNoticeId: string, options: Types.UserFeedbackFormOptions = {}) {
+    if (!this.config || !this.config.apiKey) {
+      this.logger.debug('Client not initialized')
+      return
+    }
+
+    if (!lastNoticeId) {
+      this.logger.debug("Can't show user feedback form without a notice already reported")
+      return
+    }
+
+    const global = globalThisOrWindow()
+    if (typeof global.document === 'undefined') {
+      this.logger.debug('global.document is undefined. Cannot attach script')
+      return
+    }
+
+    if (this.isUserFeedbackScriptUrlAlreadyVisible()) {
+      this.logger.debug('User feedback form is already visible')
+      return
+    }
+
+    global['honeybadgerUserFeedbackOptions'] = {
+      ...options,
+      apiKey: this.config.apiKey,
+      endpoint: this.config.userFeedbackEndpoint,
+      noticeId: lastNoticeId,
+    }
+
+    this.appendUserFeedbackScriptTag(global, options)
+
+  }
+
+  private appendUserFeedbackScriptTag(window: typeof globalThis, options: Types.UserFeedbackFormOptions = {}) {
+    const script = window.document.createElement('script')
+    script.setAttribute('src', this.scriptUrl)
+    script.setAttribute('async', 'true')
+    if (options.onLoad) {
+      script.onload = options.onLoad
+    }
+    (global.document.head || global.document.body).appendChild(script)
+  }
+
+  private isUserFeedbackScriptUrlAlreadyVisible() {
+    const global = globalThisOrWindow()
+    const feedbackScriptUrl = this.scriptUrl
+    for (let i = 0; i < global.document.scripts.length; i++) {
+      const script = global.document.scripts[i]
+      if (script.src === feedbackScriptUrl) {
+        return true
+      }
+    }
+
+    return false
+  }
+  /* ROLLUP_STRIP_CODE_CHROME_EXTENSION_END */
+}