Merge Chrome and Firefox implementations

js/ZipkinPlugin.js

@@ -1,29 +1,30 @@
-import attachBeforeSendHeadersListeners from './attachBeforeSendHeadersListener';
 import checkZipkinUI from './checkZipkinUI';
 
 export default class ZipkinPlugin {
-  constructor({pubsub, storage, setInterval, clearInterval, XMLHttpRequest /* network */}) {
+  constructor({ pubsub, storage, setInterval, clearInterval /* network */ }) {
     this.pubsub = pubsub;
     this.storage = storage;
     this.setInterval = setInterval;
     this.clearInterval = clearInterval;
-    this.XMLHttpRequest = XMLHttpRequest;
     this.zipkinUrls = [];
 
     this.pubsub.sub('zipkinUrls.load', this.loadFromStorage.bind(this));
     this.pubsub.sub('zipkinUrls.add', this.addZipkinUrl.bind(this));
     this.pubsub.sub('zipkinUrls.remove', this.removeZipkinUrl.bind(this));
   }
 
-  loadFromStorage() {
-    this.storage.get('zipkinUrls', []).then(zipkinUrls => {
-      zipkinUrls.forEach(zipkinUrl => {
-        const exists = this.zipkinUrls.find(z => z.url === zipkinUrl.url);
-        if (!exists) {
-          this.addZipkinUrl(zipkinUrl.url, false);
-        }
-      });
-    }).then(this.publishZipkinUrlStatus.bind(this));
+  async loadFromStorage() {
+    const zipkinUrls = await this.storage.get('zipkinUrls', []);
+
+    await Promise.all(zipkinUrls.map(zipkinUrl => {
+      const exists = this.zipkinUrls.find(z => z.url === zipkinUrl.url);
+      if (!exists) {
+        return this.addZipkinUrl(zipkinUrl.url, false);
+      }
+    })
+      .filter(Boolean));
+
+    this.publishZipkinUrlStatus();
   }
 
   publishZipkinUrlStatus() {
@@ -40,15 +41,22 @@ export default class ZipkinPlugin {
   }
 
   saveZipkinUrls() {
-    this.storage.set('zipkinUrls', this.zipkinUrls.map(z => ({url: z.url})));
+    return this.storage.set('zipkinUrls',
+      this.zipkinUrls
+        .map(url => new URL(url.url))
+        // Don't save the path part of the URL
+        .map(url => ({ url: url.origin }))
+    );
   }
 
   async addZipkinUrl(url, saveToStorage = true) {
     // Fetch the endpoint to check if we get redirected
     const fetchUrl = await fetch(url);
 
-    // Never actually download the body
-    await fetchUrl.body.cancel();
+    if (fetchUrl.body) {
+      // Never actually download the body
+      await fetchUrl.body.cancel();
+    }
 
     if (fetchUrl.redirected && fetchUrl.url === `${url}/zipkin/`) {
       url = `${url}/zipkin`
@@ -75,12 +83,14 @@ export default class ZipkinPlugin {
   }
 
   makeZipkinCheckInterval(url) {
-    const poll = () => {
-      checkZipkinUI(this.XMLHttpRequest, url).then(response => {
-        this.setZipkinUIStatus(url, 'up', response.instrumented);
-      }).catch(err => {
-        this.setZipkinUIStatus(url, err.status ? err.status : 'down', []);
-      });
+    const poll = async () => {
+      try {
+        const instrumented = await checkZipkinUI(url);
+
+        this.setZipkinUIStatus(url, 'up', instrumented);
+      } catch (err) {
+        this.setZipkinUIStatus(url, err.message || 'down', []);
+      }
     };
     poll();
     return this.setInterval(poll, 30000);

js/addNetworkEvents.js

@@ -2,7 +2,8 @@ export default function addNetworkEvents(network, pubsub) {
   network.onNavigated.addListener(() => {
     pubsub.pub('navigated');
   });
-  network.onRequestFinished.addListener(request => {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1311171
+  network.onRequestFinished && network.onRequestFinished.addListener(request => {
     pubsub.pub('requestFinished', {
       headers: request.request.headers,
       url: request.request.url

js/attachBeforeSendHeadersListener.js

@@ -10,7 +10,7 @@ const filter = {
 };
 
 export default function attachBeforeSendHeadersListener(webRequest) {
-  webRequest.onBeforeSendHeaders.addListener(details => {
+  webRequest.onBeforeSendHeaders.addListener(({requestHeaders = []}) => {
     const traceId = generateZipkinTraceId();
     const zipkinHeaders = {
       'X-Zipkin-Extension': '1',
@@ -24,11 +24,8 @@ export default function attachBeforeSendHeadersListener(webRequest) {
 
     return {
       requestHeaders: [
-        ...(details.requestHeaders || []),
-        ...Object.keys(zipkinHeaders).map(key => ({
-          name: key,
-          value: zipkinHeaders[key]
-        }))
+        ...requestHeaders,
+        ...Object.entries(zipkinHeaders).map(([name, value]) => ({ name, value }))
       ]
     };
   }, filter, ['blocking', 'requestHeaders']);

js/checkZipkinUI.js

@@ -1,25 +1,14 @@
-import makeRequest from './request';
-
-export default function checkZipkinUI(XMLHttpRequest, url) {
+export default async function checkZipkinUI(url) {
   const fetchUrl = url + '/config.json';
-  return makeRequest(XMLHttpRequest, fetchUrl).then(xhr => {
-    if (xhr.status !== 200) {
-      return Promise.reject({status: 'error ' + xhr.status});
-    } else {
-      const contentType = xhr.getResponseHeader('content-type');
-      if (contentType.indexOf('application/json') === -1) {
-        return Promise.reject({status: 'invalid response type ' + contentType});
-      } else {
-        try {
-          return JSON.parse(xhr.responseText);
-        } catch (parseError) {
-          return Promise.reject({status: 'invalid response (JSON parse error)'});
-        }
-      }
-    }
-  }).then(data => {
-    return {instrumented: data.instrumented || '.*'};
-  }).catch(err => {
-    return Promise.reject({error: err});
-  });
+
+  // Used to identity calls originating from within the plugin itself
+  const res = await fetch(fetchUrl, { headers: { 'X-Zipkin-Extension': '1' } });
+
+  if (!res.ok) {
+    throw new Error(`Invalid status: ${res.status}.`);
+  }
+
+  const data = await res.json();
+
+  return data.instrumented || '.*';
 }

vendor/chrome/manifest.json → manifest.json

@@ -1,13 +1,17 @@
 {
   "manifest_version": 2,
-  "name": "Zipkin Chrome Extension",
-  "description": "Lets you trigger Zipkin traces from the browser, while using your application",
-  "version": "{{ version }}",
+  "name": "Zipkin Browser Extension",
   "devtools_page": "devtools.html",
   "background": {
-    "scripts": ["background.bundle.js"],
+    "scripts": [
+      "browser-polyfill.js",
+      "background.bundle.js"
+    ],
     "persistent": true
   },
+  "icons": {
+    "48": "icon64.png"
+  },
   "permissions": [
     "activeTab",
     "webRequest",