Skip to content

jamesreggio/unravel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Icon Unravel

Chrome extension that extracts a plaintext crash from the Crashlytics tab in Twitter Fabric.

How to use

  1. Install the extension from the Chrome Web Store.
  2. Navigate to a specific crash within Crashlytics on Twitter Fabric.
    Click More details... next to Viewing latest crash to reach a specific crash instance.
  3. Click the blue Crashlytics icon in your status bar.
  4. Copy the plaintext crash to your clipboard.

If you experience any issues, fret not: the Crashlytics website has probably changed in a minor way and has broken this extension. Please file an issue and I'll take care of it.

How to develop locally

Ensure ./node_modules/.bin is in your path, then run:

npm install
make watch

Follow these instructions to install an 'unpacked extension' in Chrome. You'll need to point it at the chrome subdirectory within the repository.

How to publish

Bump the version in package.json and manifest.json, then run:

npm run prepublish

Upload chrome.zip to the Chrome Developer Dashboard.

How it works

The Chrome Extension development model is a bit wonky, so this was my best attempt to abide by the Principle of Least Privilege and minimize the number of moving parts.

The extension is implemented as a page action. Prior to Chrome 38, these would appear inside the address bar as a contextual aid for the current site. Now, page actions are largely indistinguishable from always-present browser actions, making the choice of page action strictly a matter of legacy.

The extension performs messaging between the following modules:

  1. When Chrome starts up, it loads the extension and runs background.js, which executes in a headless window and observes navigation across all tabs.
  2. When a tab navigates to an eligible URL, background.js enables the page action icon.
  3. When the user clicks the page action icon, Chrome loads popup.html and popup.js. The latter immediately executes inject.js in the active tab as a content script.
  4. Content scripts do not have direct access to the tab's window object but they do have access to the tab's DOM, so inject.js immediately crafts a simple, stringified script block which it injects into the Crashlytics DOM via a script element.
  5. The literal script executes, performs an AJAX request using the current user's session, and then sends a unravel:success or unravel:error payload to inject.js via window.postMessage.
  6. inject.js uses stringify.js to create a plaintext representation of the AJAX payload, which it sends to popup.js via Chrome Extension messaging.
  7. popup.js manipulates the contents of popup.html to display the plaintext payload.

N.B.: I made an attempt to build a headless extension which copied the payload directly to the system clipboard; however, there appears to be an arbitrary limit on the amount of text which can be programmatically copied. Most crashes exceed this limit, resulting in a silent failure and no text copied.