traceparent work

[scott-cotton]

wanted to put this up as a draft to get review and ask questions along the way, since I'm new to this.

edit: this seems to working ok to me, marking ready for review

[scott-cotton]

added settings work

[scott-cotton]

There are errors reported on the manage extensions page:

s/background.js:2 (anonymous function)
1
2
/*! For license information please see background.js.LICENSE.txt */
(()=>{"use strict";var e={8015:(e,t,n)=>{n.d(t,{Z:()=>c});var r=n(8081),o=n.n(r),a=n(3645),i=n.n(a)()(o());i.push([e.id,".Settings-module__container___ncIUN {\n  padding: 0 16px 16px 0;\n}\n\n.Settings-module__title___fJho0 {\n  font-size: 20px;\n  font-weight: bold;\n  margin-bottom: 16px;\n}\n\n.Settings-module__formGroup___N76CI {\n  margin-bottom: 16px;\n}\n\n.Settings-module__label___RMkrS {\n  display: block;\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 8px;\n}\n\n.Settings-module__input___FpDPj {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n}\n\n.Settings-module__input___FpDPj:focus {\n  outline: none;\n  border-color: #2e77ff;\n}\n\n.Settings-module__actions___ttAnZ {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.Settings-module__button___TdREv {\n  background-color: #2e77ff;\n  color: white;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.Settings-module__button___TdREv:hover {\n  background-color: #0049d1;\n}\n\n.Settings-module__cancel_action___nh5OT {\n  background-color: #4f5f69;\n  color: white;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.Settings-module__cancel_action___nh5OT:hover {\n  background-color: #3d4950;\n}\n\n.Settings-module__header___PGx_X {\n  display: flex;\n  align-items: center;\n}\n\n.Settings-module__title___fJho0 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.Settings-module__section___sGI2k {\n  margin-bottom: 24px;\n}\n\n.Settings-module__sectionHeader___OG6bq {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.Settings-module__sectionTitle___Y0aPQ {\n  font-size: 14px;\n  font-weight: 500;\n  color: #4A5568;\n  margin: 0;\n}\n\n.Settings-module__headersList___fLKYn {\n  background: #F7FAFC;\n  border-radius: 8px;\n  padding: 12px;\n  font-size: 13px;\n}\n\n.Settings-module__headerItem___HO2do {\n  margin-bottom: 8px;\n  font-family: monospace;\n  line-height: 1.4;\n}\n\n.Settings-module__headerItem___HO2do:last-child {\n  margin-bottom: 0;\n}\n\n.Settings-module__headerName___eTFWl {\n  color: #2D3748;\n  font-weight: 500;\n}\n\n.Settings-module__headerValue___iCJ3T {\n  color: #4A5568;\n  margin-top: 4px;\n  padding-left: 16px;\n  font-size: 12px;\n}\n\n.Settings-module__unlockHint___Nkmx9 {\n  color: #718096;\n  font-size: 12px;\n}\n\n.Settings-module__input___FpDPj:disabled {\n  background-color: #EDF2F7;\n  cursor: not-allowed;\n}\n\n.Settings-module__button___TdREv:disabled {\n  background-color: #CBD5E0;\n  cursor: not-allowed;\n} ",""]),i.locals={container:"Settings-module__container___ncIUN",title:"Settings-module__title___fJho0",formGroup:"Settings-module__formGroup___N76CI",label:"Settings-module__label___RMkrS",input:"Settings-module__input___FpDPj",actions:"Settings-module__actions___ttAnZ",button:"Settings-module__button___TdREv",cancel_action:"Settings-module__cancel_action___nh5OT",header:"Settings-module__header___PGx_X",section:"Settings-module__section___sGI2k",sectionHeader:"Settings-module__sectionHeader___OG6bq",sectionTitle:"Settings-module__sectionTitle___Y0aPQ",headersList:"Settings-module__headersList___fLKYn",headerItem:"Settings-module__headerItem___HO2do",headerName:"Settings-module__headerName___eTFWl",headerValue:"Settings-module__headerValue___iCJ3T",unlockHint:"Settings-module__unlockHint___Nkmx9"};const c=i},3645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(i[s]=!0)}for(var u=0;u<e.length;u++){var l=[].concat(e[u]);r&&i[l[0]]||(void 0!==a&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=a),n&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=n):l[2]=n),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),t.push(l))}},t}},8081:e=>{e.exports=function(e){return e[1]}},6977:(e,t,n)=>{var r=n(7294);n(5893);var o=["shift","alt","meta","mod","ctrl"],a={esc:"escape",return:"enter",".":"period",",":"comma","-":"slash"," ":"space","`":"backquote","#":"backslash","+":"bracketright",ShiftLeft:"shift",ShiftRight:"shift",AltLeft:"alt",AltRight:"alt",MetaLeft:"meta",MetaRight:"meta",OSLeft:"meta",OSRight:"meta",ControlLeft:"ctrl",ControlRight:"ctrl"};function i(e){return(e&&a[e]||e||"").trim().toLowerCase().replace(/key|digit|numpad|arrow/,"")}"undefined"!=typeof document&&(document.addEventListener("keydown",(function(e){var t,n;void 0!==e.key&&(t=[i(e.key),i(e.code)],n=Array.isArray(t)?t:[t],c.has("meta")&&c.forEach((function(e){return!function(e){return o.includes(e)}(e)&&c.delete(e.toLowerCase())})),n.forEach((function(e){return c.add(e.toLowerCase())})))})),document.addEventListener("keyup",(function(e){var t,n;void 0!==e.key&&(t=[i(e.key),i(e.code)],n=Array.isArray(t)?t:[t],"meta"===t?c.clear():n.forEach((function(e){return c.delete(e.toLowerCase())})))}))),"undefined"!=typeof window&&window.addEventListener("blur",(function(){c.clear()}));var c=new Set;"undefined"!=typeof window?r.useLayoutEffect:r.useEffect},5251:(e,t,n)=>{var r=n(7294);Symbol.for("react.element"),Symbol.for("react.fragment"),Object.prototype.hasOwnProperty,r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner},2408:(e,t)=>{var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),c=Symbol.for("react.provider"),s=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),l=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),p=Symbol.iterator,_={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,g={};function h(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||_}function y(){}function v(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||_}h.prototype.isReactComponent={},h.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},h.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},y.prototype=h.prototype;var b=v.prototype=new y;b.constructor=v,m(b,h.prototype),b.isPureReactComponent=!0;var S=Array.isArray,E=Object.prototype.hasOwnProperty,w={current:null},x={key:!0,ref:!0,__self:!0,__source:!0};function R(e,t,r){var o,a={},i=null,c=null;if(null!=t)for(o in void 0!==t.ref&&(c=t.ref),void 0!==t.key&&(i=""+t.key),t)E.call(t,o)&&!x.hasOwnProperty(o)&&(a[o]=t[o]);var s=arguments.length-2;if(1===s)a.children=r;else if(1<s){for(var u=Array(s),l=0;l<s;l++)u[l]=arguments[l+2];a.children=u}if(e&&e.defaultProps)for(o in s=e.defaultProps)void 0===a[o]&&(a[o]=s[o]);return{$$typeof:n,type:e,key:i,ref:c,props:a,_owner:w.current}}function k(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}var T=/\/+/g;function U(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function O(e,t,o,a,i){var c=typeof e;"undefined"!==c&&"boolean"!==c||(e=null);var s=!1;if(null===e)s=!0;else switch(c){case"string":case"number":s=!0;break;case"object":switch(e.$$typeof){case n:case r:s=!0}}if(s)return i=i(s=e),e=""===a?"."+U(s,0):a,S(i)?(o="",null!=e&&(o=e.replace(T,"$&/")+"/"),O(i,t,o,"",(function(e){return e}))):null!=i&&(k(i)&&(i=function(e,t){return{$$typeof:n,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(i,o+(!i.key||s&&s.key===i.key?"":(""+i.key).replace(T,"$&/")+"/")+e)),t.push(i)),1;if(s=0,a=""===a?".":a+":",S(e))for(var u=0;u<e.length;u++){var l=a+U(c=e[u],u);s+=O(c,t,o,l,i)}else if(l=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=p&&e[p]||e["@@iterator"])?e:null}(e),"function"==typeof l)for(e=l.call(e),u=0;!(c=e.next()).done;)s+=O(c=c.value,t,o,l=a+U(c,u++),i);else if("object"===c)throw t=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return s}function H(e,t,n){if(null==e)return e;var r=[],o=0;return O(e,r,"","",(function(e){return t.call(n,e,o++)})),r}function C(e){if(-1===e._status){var t=e._result;(t=t()).then((function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)}),(function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)})),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var I={current:null},j={transition:null},P={ReactCurrentDispatcher:I,ReactCurrentBatchConfig:j,ReactCurrentOwner:w};t.Children={map:H,forEach:function(e,t,n){H(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return H(e,(function(){t++})),t},toArray:function(e){return H(e,(function(e){return e}))||[]},only:function(e){if(!k(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},t.Component=h,t.Fragment=o,t.Profiler=i,t.PureComponent=v,t.StrictMode=a,t.Suspense=l,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=P,t.cloneElement=function(e,t,r){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var o=m({},e.props),a=e.key,i=e.ref,c=e._owner;if(null!=t){if(void 0!==t.ref&&(i=t.ref,c=w.current),void 0!==t.key&&(a=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(u in t)E.call(t,u)&&!x.hasOwnProperty(u)&&(o[u]=void 0===t[u]&&void 0!==s?s[u]:t[u])}var u=arguments.length-2;if(1===u)o.children=r;else if(1<u){s=Array(u);for(var l=0;l<u;l++)s[l]=arguments[l+2];o.children=s}return{$$typeof:n,type:e.type,key:a,ref:i,props:o,_owner:c}},t.createContext=function(e){return(e={$$typeof:s,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:c,_context:e},e.Consumer=e},t.createElement=R,t.createFactory=function(e){var t=R.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:u,render:e}},t.isValidElement=k,t.lazy=function(e){return{$$typeof:f,_payload:{_status:-1,_result:e},_init:C}},t.memo=function(e,t){return{$$typeof:d,type:e,compare:void 0===t?null:t}},t.startTransition=function(e){var t=j.transition;j.transition={};try{e()}finally{j.transition=t}},t.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")},t.useCallback=function(e,t){return I.current.useCallback(e,t)},t.useContext=function(e){return I.current.useContext(e)},t.useDebugValue=function(){},t.useDeferredValue=function(e){return I.current.useDeferredValue(e)},t.useEffect=function(e,t){return I.current.useEffect(e,t)},t.useId=function(){return I.current.useId()},t.useImperativeHandle=function(e,t,n){return I.current.useImperativeHandle(e,t,n)},t.useInsertionEffect=function(e,t){return I.current.useInsertionEffect(e,t)},t.useLayoutEffect=function(e,t){return I.current.useLayoutEffect(e,t)},t.useMemo=function(e,t){return I.current.useMemo(e,t)},t.useReducer=function(e,t,n){return I.current.useReducer(e,t,n)},t.useRef=function(e){return I.current.useRef(e)},t.useState=function(e){return I.current.useState(e)},t.useSyncExternalStore=function(e,t,n){return I.current.useSyncExternalStore(e,t,n)},t.useTransition=function(){return I.current.useTransition()},t.version="18.2.0"},7294:(e,t,n)=>{e.exports=n(2408)},5893:(e,t,n)=>{n(5251)},3379:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var a={},i=[],c=0;c<e.length;c++){var s=e[c],u=r.base?s[0]+r.base:s[0],l=a[u]||0,d="".concat(u," ").concat(l);a[u]=l+1;var f=n(d),p={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==f)t[f].references++,t[f].updater(p);else{var _=o(p,r);r.byIndex=c,t.splice(c,0,{identifier:d,updater:_,references:1})}i.push(d)}return i}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=n(a[i]);t[c].references--}for(var s=r(e,o),u=0;u<a.length;u++){var l=n(a[u]);0===t[l].references&&(t[l].updater(),t.splice(l,1))}a=s}}},569:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},9216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},3565:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},7795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},4589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},2881:(e,t,n)=>{n.d(t,{L$:()=>h,K2:()=>v,ad:()=>y,NX:()=>b}),n(7294);var r=n(3379),o=n.n(r),a=n(7795),i=n.n(a),c=n(569),s=n.n(c),u=n(3565),l=n.n(u),d=n(9216),f=n.n(d),p=n(4589),_=n.n(p),m=n(8015),g={};g.styleTagTransform=_(),g.setAttributes=l(),g.insert=s().bind(null,"head"),g.domAPI=i(),g.insertStyleElement=f(),o()(m.Z,g),m.Z&&m.Z.locals&&m.Z.locals,n(1606),n(6977),n(6881);const h="https://api.signadot.com",y="https://browser-extension-auth-redirect.preview.signadot.com",v="https://app.signadot.com",b="00-abcdef0123456789-abcdef01-00"},1606:(e,t,n)=>{n(6881)},6881:(e,t,n)=>{n.d(t,{Q:()=>r,R:()=>c});var r,o=n(7294),a=n(2870),i=n(2881);!function(e){e.RoutingKey="routingKey",e.Enabled="enabled",e.ExtraHeaders="extraHeaders",e.TraceparentHeader="traceparentHeader",e.InjectedHeaders="injectedHeaders",e.ApiUrl="apiUrl",e.PreviewUrl="previewUrl",e.DashboardUrl="dashboardUrl"}(r||(r={}));const c=()=>{const[e,t]=o.useState(!1),[n,c]=o.useState(!0),[s,u]=o.useState(void 0),[l,d]=o.useState(void 0),[f,p]=o.useState(i.NX),[_,m]=o.useState(void 0),[g,h]=o.useState(void 0),[y,v]=o.useState(void 0),[b,S]=o.useState(void 0),E=e=>chrome.storage.local.set({[r.ApiUrl]:e}),w=e=>chrome.storage.local.set({[r.PreviewUrl]:e}),x=e=>chrome.storage.local.set({[r.DashboardUrl]:e});return o.useEffect((()=>{m((0,a.w)(l))}),[l]),o.useEffect((()=>{chrome.storage.local.get([r.ApiUrl,r.PreviewUrl,r.DashboardUrl],(e=>{e.apiUrl?(E(e.apiUrl),h(e.apiUrl)):(E(i.L$),h(i.L$)),e.previewUrl?(w(e.previewUrl),v(e.previewUrl)):(w(i.ad),v(i.ad)),e.dashboardUrl?(x(e.dashboardUrl),S(e.dashboardUrl)):(x(i.K2),S(i.K2))}))}),[]),o.useEffect((()=>{chrome.storage.local.get([r.RoutingKey,r.Enabled,r.ExtraHeaders,r.TraceparentHeader,r.ApiUrl,r.PreviewUrl,r.DashboardUrl],(e=>{c(!!e[r.Enabled]),r.RoutingKey in e&&u(null==e?void 0:e[r.RoutingKey]),r.ExtraHeaders in e&&d(e[r.ExtraHeaders]),r.TraceparentHeader in e&&p(e[r.TraceparentHeader]),r.InjectedHeaders in e&&m(e[r.InjectedHeaders]),r.ApiUrl in e&&h(e[r.ApiUrl]),r.PreviewUrl in e&&v(e[r.PreviewUrl]),r.DashboardUrl in e&&S(e[r.DashboardUrl]),t(!0)}));const e=(e,t)=>{"local"===t&&(r.Enabled in e&&c(!!e[r.Enabled].newValue),r.RoutingKey in e&&u(e[r.RoutingKey].newValue),r.ExtraHeaders in e&&d(e[r.ExtraHeaders].newValue),r.TraceparentHeader in e&&p(e[r.TraceparentHeader].newValue),r.InjectedHeaders in e&&m(e[r.InjectedHeaders].newValue),r.ApiUrl in e&&h(e[r.ApiUrl].newValue),r.PreviewUrl in e&&v(e[r.PreviewUrl].newValue),r.DashboardUrl in e&&S(e[r.DashboardUrl].newValue))};return chrome.storage.onChanged.addListener(e),()=>chrome.storage.onChanged.removeListener(e)}),[]),o.useEffect((()=>{n&&s?chrome.action.setIcon({path:{16:"images/icons/icon16_active.png",48:"images/icons/icon48_active.png",128:"images/icons/icon128_active.png"}}):chrome.action.setIcon({path:{16:"images/icons/icon16_inactive.png",48:"images/icons/icon48_inactive.png",128:"images/icons/icon128_inactive.png"}})}),[n,s]),{init:e,enabled:n,setEnabled:e=>chrome.storage.local.set({[r.Enabled]:e}),routingKey:s,setRoutingKeyFn:e=>e?chrome.storage.local.set({[r.RoutingKey]:e}):chrome.storage.local.remove(r.RoutingKey),extraHeaders:l,setExtraHeaders:e=>e?chrome.storage.local.set({[r.ExtraHeaders]:e}):chrome.storage.local.remove(r.ExtraHeaders),traceparentHeader:f,setTraceparentHeader:e=>chrome.storage.local.set({[r.TraceparentHeader]:e}),injectedHeaders:_,apiUrl:g,previewUrl:y,dashboardUrl:b,setApiUrl:E,setPreviewUrl:w,setDashboardUrl:x}}},2870:(e,t,n)=>{n.d(t,{w:()=>d});var r=n(6881),o=function(e,t,n,r){return new(n||(n=Promise))((function(o,a){function i(e){try{s(r.next(e))}catch(e){a(e)}}function c(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,c)}s((r=r.apply(e,t||[])).next())}))};const a="routingKey",i=`{${a}}`,c={baggage:{value:`sd-routing-key=${i},sd-sandbox=${i}`,kind:"always"},"ot-baggage-sd-routing-key":{value:`${i}`,kind:"defaultBeforeV191"},"ot-baggage-sd-sandbox":{value:`${i}`,kind:"defaultBeforeV191"},tracestate:{value:`sd-routing-key=${i},sd-sandbox=${i}`,kind:"always"},"uberctx-sd-routing-key":{value:`${i}`,kind:"defaultBeforeV191"},"uberctx-sd-sandbox":{value:`${i}`,kind:"defaultBeforeV191"}},s=chrome.declarativeNetRequest.ResourceType,u=[s.MAIN_FRAME,s.SUB_FRAME,s.STYLESHEET,s.SCRIPT,s.IMAGE,s.FONT,s.OBJECT,s.XMLHTTPREQUEST,s.PING,s.CSP_REPORT,s.MEDIA,s.WEBSOCKET,s.OTHER],l=(e,t)=>{const n=new RegExp(i,"g");return e.replace(n,t)},d=e=>{const{traceparentHeader:t}=(0,r.R)();if(t&&(c.traceparent={value:t,kind:"always"}),!e)return Object.entries(c).reduce(((e,[t,n])=>Object.assign(Object.assign({},e),{[t]:n})),{});const n=Object.entries(c).filter((([e,t])=>"always"===t.kind)).reduce(((e,[t,n])=>Object.assign(Object.assign({},e),{[t]:n})),{}),o=e.reduce(((e,t)=>Object.assign(Object.assign({},e),{[t]:{value:`${i}`,kind:"extra"}})),{});return Object.assign(Object.assign({},n),o)};function f(){return o(this,void 0,void 0,(function*(){chrome.storage.local.get([r.Q.RoutingKey,r.Q.Enabled,r.Q.ExtraHeaders],(e=>o(this,void 0,void 0,(function*(){const t=e[r.Q.RoutingKey],n=!!e[r.Q.Enabled],o=e[r.Q.ExtraHeaders];if(n&&t)try{const e=d(o),n=((e,t)=>Object.keys(e).map(((n,r)=>({id:r+1,priority:1,action:{type:chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,requestHeaders:[{header:n,operation:chrome.declarativeNetRequest.HeaderOperation.SET,value:l(e[n].value,t)}]},condition:{urlFilter:"*",excludedRequestDomains:["preview.signadot.com","preview.staging.signadot.com","localhost.signadot.com"],resourceTypes:u}}))))(e,t),a=yield chrome.declarativeNetRequest.getDynamicRules();yield chrome.storage.local.set({[r.Q.InjectedHeaders]:e}),yield chrome.declarativeNetRequest.updateDynamicRules({addRules:n,removeRuleIds:a.map((e=>e.id))}),console.log("Dynamic rules updated successfully.")}catch(e){console.error("Error updating dynamic rules: ",e)}else try{const e=yield chrome.declarativeNetRequest.getDynamicRules();yield chrome.declarativeNetRequest.updateDynamicRules({removeRuleIds:e.map((e=>e.id))}),console.log("Dynamic rules cleared.")}catch(e){console.error("Error clearing dynamic rules: ",e)}}))))}))}chrome.runtime.onInstalled.addListener(f),chrome.runtime.onStartup.addListener(f),chrome.storage.onChanged.addListener(((e,t)=>{"local"===t&&(e[a]||e.enabled)&&f()}))}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={id:r,exports:{}};return e[r](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.nc=void 0,n(2870)})();

And there are compile warnings:

25-01-10 scott@air browser-extension % yarn build
yarn run v1.22.22
$ webpack --config webpack/webpack.prod.js
assets by path ../ 140 KiB
  assets by path ../images/ 139 KiB
    assets by path ../images/icons/*.png 50.5 KiB 6 assets
    assets by path ../images/*.png 83.5 KiB
      asset ../images/signadot-full-logo.png 67.3 KiB [compared for emit] [from: public/images/signadot-full-logo.png] [copied]
      asset ../images/signadot-logo.png 16.2 KiB [compared for emit] [from: public/images/signadot-logo.png] [copied]
    asset ../images/loading.gif 4.67 KiB [compared for emit] [from: public/images/loading.gif] [copied]
  asset ../manifest.json 910 bytes [compared for emit] [from: public/manifest.json] [copied]
  asset ../popup.html 215 bytes [compared for emit] [from: public/popup.html] [copied]
assets by path *.js 1.21 MiB
  asset vendor.js 1.16 MiB [compared for emit] [minimized] [big] (name: vendor) (id hint: vendors) 1 related asset
  asset popup.js 38.6 KiB [compared for emit] [minimized] (name: popup)
  asset background.js 20.9 KiB [compared for emit] [minimized] (name: background) 1 related asset
  asset content_script.js 0 bytes [compared for emit] [minimized] (name: content_script)
Entrypoint popup [big] 1.19 MiB = vendor.js 1.16 MiB popup.js 38.6 KiB
Entrypoint background 20.9 KiB = background.js
Entrypoint content_script = content_script.js
orphan modules 3.08 MiB [orphan] 2038 modules
runtime modules 4.26 KiB 12 modules
cacheable modules 3.01 MiB
  modules by path ./node_modules/ 2.94 MiB 76 modules
  modules by path ./src/ 70.8 KiB
    modules by path ./src/components/ 18.8 KiB 7 modules
    modules by path ./src/*.tsx 30 KiB 2 modules
    + 4 modules
  asset modules 2.75 KiB
    data:image/svg+xml,%3csvg xmlns=%27.. 419 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 300 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 419 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 300 bytes [built] [code generated]
    + 4 modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  vendor.js (1.16 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  popup (1.19 MiB)
      vendor.js
      popup.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.89.0 compiled with 3 warnings in 5838 ms
✨  Done in 6.68s.
25-01-10 scott@air browser-extension %

I am not sure what these mean. any insights appreciated.

[scott-cotton]

I found and got rid of the errors in the last commit.

It seems to work correctly overall with one exception: it requires selecting a sandbox or enabling/disabling to get a change to the trace parent header to start being injected.

[scott-cotton]

Fixed reactivity in last commit

[davixcky]

I haven't test it, but one thing we have to consider is how user will access that configuration panel and also how we plan to obfuscate the API configuration.

So probably we will have to add the setting button again, and add under settings the shortcut to access the API configuration.

FYI @foxish

[scott-cotton]

I haven't test it, but one thing we have to consider is how user will access that configuration panel and also how we plan to obfuscate the API configuration.

So probably we will have to add the setting button again, and add under settings the shortcut to access the API configuration.

FYI @foxish

Can this be considered in a separate PR?

[davixcky]

LGTM, tested that is adding the traceparent.

Note that I didn't test if the routing key is being propagated, but just that is being set

[davixcky]

I don't like this since is not really the traceparentObj but a map of headers

[scott-cotton]

done in 37272a9

[davixcky]

If you could update existing keys, we will awesome too

[scott-cotton]

Sorry, don't understand concretely what you suggest. Could you explain in more detail?

[scott-cotton]

Do you mean use StorageKey.Enabled instead of ENABLED and the like? I did that in 37272a9

[scott-cotton]

Further testing showed that for some reason I don't understand, the DEFAULT_TRACEPARENT_HEADER wasn't effectively the default, rather undefined, unless the user saved settings.

I added an explicit check for undefined and use the default at the updateDynamicHeaders function body, and that fixed it.

[scott-cotton]

Even further testing revealed that there is odd behavior w.r.t. the default value and empty string. When setting it to the empty string, it behaves as intended and does not add a traceparent header. However, when re-opening the settings pop-up, it comes back as the default.

Not sure what we should do about that, I was hoping to avoid requiring an extra checkbox for whether to inject or not. Thoughts?

[davixcky]

Screen.Recording.2025-03-03.at.4.14.43.PM.mov

Created this settings panel to disable/enable the traceparent header with a switch instead of a empty value which cause some confussion

Thoughts? cc: @signadot/engineering

[foxish]

Screen.Recording.2025-03-03.at.4.14.43.PM.mov
Created this settings panel to disable/enable the traceparent header with a switch instead of a empty value which cause some confussion

Thoughts? cc: @signadot/engineering

This seems to be the right behavior to me. @scott-cotton can you please double check based on the video? I'll do a full code review asap.

[scott-cotton]

Screen.Recording.2025-03-03.at.4.14.43.PM.mov
Created this settings panel to disable/enable the traceparent header with a switch instead of a empty value which cause some confussion
Thoughts? cc: @signadot/engineering

This seems to be the right behavior to me. @scott-cotton can you please double check based on the video? I'll do a full code review asap.

Sorry for the delay, the video looks great!

[davixcky]

@foxish @scott-cotton this is ready for review since i added the toggle and minor tweaks.

@foxish should i merge this to main and test from there?

[scott-cotton]

@foxish @scott-cotton this is ready for review since i added the toggle and minor tweaks.

@foxish should i merge this to main and test from there?

Awesome, thanks much. I'll leave the review to @foxish as I'd just rubber stamp it.

[foxish]

LGTM, let's test with the extension built from main @davixcky for a week or two before releasing.