Get rid of shared browser instance

src/css/content.scss

@@ -4,6 +4,7 @@
   }
 
   .moco-bx-bubble {
+    box-sizing: content-box;
     position: fixed;
     bottom: 2rem;
     z-index: 1000;

src/js/components/App.js

@@ -30,8 +30,7 @@ class App extends Component {
       subdomain: PropTypes.string,
       apiKey: PropTypes.string,
       version: PropTypes.string
-    }),
-    browser: PropTypes.object.isRequired
+    })
   };
 
   @observable projects = []
@@ -102,7 +101,7 @@ class App extends Component {
         this.lastTaskId = data.lastTaskId
       })
       .catch(error => {
-        console.log(error)
+        this.sendMessage({ type: 'closeForm' })
       })
       .finally(() => {
         this.isLoading = false
@@ -111,7 +110,7 @@ class App extends Component {
 
   createActivity = () => {
     this.isLoading = true
-    
+
     this.#apiClient
       .createActivity(this.changesetWithDefaults)
       .then(({ data }) => {
@@ -161,7 +160,7 @@ class App extends Component {
   }
 
   sendMessage = action =>
-    this.props.browser.tabs.query(
+    chrome.tabs.query(
       { active: true, currentWindow: true },
       tabs => chrome.tabs.sendMessage(tabs[0].id, action)
     )
@@ -172,14 +171,14 @@ class App extends Component {
     }
 
     const { service } = this.props;
-    
+
     return (
       <>
         <div className="moco-bx-logo__container">
-          <img className="moco-bx-logo" src={this.props.browser.extension.getURL(logoUrl)} />
+          <img className="moco-bx-logo" src={chrome.extension.getURL(logoUrl)} />
           <h1>MOCO Zeiterfassung</h1>
         </div>
-        
+
         <Form
           changeset={this.changesetWithDefaults}
           projects={this.projects}

src/js/components/Bubble.js

@@ -32,8 +32,7 @@ class Bubble extends Component {
       subdomain: PropTypes.string,
       apiKey: PropTypes.string,
       version: PropTypes.string
-    }),
-    browser: PropTypes.object.isRequired,
+    })
   };
 
   #apiClient;
@@ -64,12 +63,12 @@ class Bubble extends Component {
         fireImmediately: true
       })
     )
-    this.props.browser.runtime.onMessage.addListener(this.receiveMessage)
+    chrome.runtime.onMessage.addListener(this.receiveMessage)
     window.addEventListener("keydown", this.handleKeyDown, true)
   }
 
   componentWillUnmount() {
-    this.props.browser.runtime.onMessage.removeListener(this.receiveMessage)
+    chrome.runtime.onMessage.removeListener(this.receiveMessage)
     window.removeEventListener("keydown", this.handleKeyDown)
   }
 
@@ -137,11 +136,11 @@ class Bubble extends Component {
       return <Spinner />
     }
 
-    const { service, settings, browser } = this.props
+    const { service, settings } = this.props
 
     return (
       <div className="moco-bx-bubble" onClick={this.open} style={service.position}>
-        <img className="moco-bx-logo" src={this.props.browser.extension.getURL(logoUrl)} />
+        <img className="moco-bx-logo" src={chrome.extension.getURL(logoUrl)} />
         {this.bookedHours > 0
           ? <span className="moco-bx-badge">{this.bookedHours}h</span>
           : null
@@ -150,7 +149,6 @@ class Bubble extends Component {
           <Popup
             service={service}
             settings={settings}
-            browser={browser}
             unauthorizedError={this.unauthorizedError}
           />
         )}

src/js/components/Popup.js

@@ -18,7 +18,7 @@ const Popup = props => {
         {props.unauthorizedError
           ? <InvalidConfigurationError />
           : <iframe
-            src={props.browser.extension.getURL(`popup.html?${queryString.stringify(serializedProps)}`)}
+            src={chrome.extension.getURL(`popup.html?${queryString.stringify(serializedProps)}`)}
             width={styles.width}
             height={styles.height} />
         }
@@ -29,7 +29,6 @@ const Popup = props => {
 
 Popup.propTypes = {
   service: PropTypes.object.isRequired,
-  browser: PropTypes.object.isRequired,
   unauthorizedError: PropTypes.bool.isRequired
 }