Skip to content

Commit

Permalink
feat: chrome extension build (#1386)
Browse files Browse the repository at this point in the history
  • Loading branch information
subzero10 authored Aug 25, 2024
1 parent f6a110a commit c2a8f34
Show file tree
Hide file tree
Showing 14 changed files with 341 additions and 216 deletions.
25 changes: 24 additions & 1 deletion packages/js/assets/user-feedback-form.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions packages/js/examples/chrome-extension/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -16,4 +16,4 @@
</div>
</body>
<script src="options.js"></script>
</html>
</html>
4 changes: 2 additions & 2 deletions packages/js/examples/chrome-extension/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion packages/js/examples/chrome-extension/setup.sh
Original file line number Diff line number Diff line change
@@ -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
73 changes: 73 additions & 0 deletions packages/js/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/js/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
20 changes: 20 additions & 0 deletions packages/js/rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions packages/js/scripts/release-cdn.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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/*"
Expand Down
56 changes: 4 additions & 52 deletions packages/js/src/browser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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`
Expand Down Expand Up @@ -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() {
Expand Down
73 changes: 73 additions & 0 deletions packages/js/src/browser/feedback-form.ts
Original file line number Diff line number Diff line change
@@ -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 */
}
Loading

0 comments on commit c2a8f34

Please sign in to comment.