Create simple chrome extension (codesandbox#1188)

* create simple chrome extension

* add readme

* only show if a package.json is presengt

* bump version

Author: SaraVieira

packages/chrome-extension.zip

@@ -0,0 +1 @@
+chrome-extension.pem

packages/chrome-extension/.gitignore

@@ -0,0 +1,19 @@
+# Chrome Extension
+
+![Image](https://user-images.githubusercontent.com/1051509/46907462-fc0ef600-cf12-11e8-8d73-05b95577364e.png)
+
+[![available in the chrome store](https://developer.chrome.com/webstore/images/ChromeWebStore_Badge_v2_206x58.png)](https://chrome.google.com/webstore/detail/jkhbnhagngalpojoeijaleemepfpefmp)
+
+This chrome extension adds a button to all github repos that will open that repo in CodeSandbox in a new window
+
+## How to run
+
+- Open the Extension Management page by navigating to chrome://extensions.
+- Enable Developer Mode by clicking the toggle switch next to Developer mode.
+- Click the LOAD UNPACKED button and select this folder.
+
+![load](https://developer.chrome.com/static/images/get_started/load_extension.png)
+
+## How to publish
+
+Unfortunately there is a need for a key to in order to update apps so as soon as something gets merged pls ping me in the PR and I will create a new version

packages/chrome-extension/Readme.md

@@ -0,0 +1,43 @@
+// CodeSandbox Logo
+const SVG = `
+  <svg x="0px" y="0px" width="18px" height="18px" viewBox="0 0 1024 1024"><g id="Layer_1"><polyline fill="#FFFFFF" points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851"></polyline><polyline fill="#FFFFFF" points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438"></polyline><polyline fill="#FFFFFF" points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795"></polyline></g><g id="Layer_2"><polyline fill="none" stroke="#FFFFFF" stroke-width="80" stroke-miterlimit="10" points="899,287.833 509,513 509,963"></polyline><line fill="none" stroke="#FFFFFF" stroke-width="80" stroke-miterlimit="10" x1="122.167" y1="289" x2="511.5" y2="513"></line><polygon fill="none" stroke="#FFFFFF" stroke-width="80" stroke-miterlimit="10" points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"></polygon></g></svg>
+`;
+
+const addButton = () => {
+  const files = Array.from(
+    document.querySelectorAll('.files .content .js-navigation-open')
+  ).map(n => n.innerHTML);
+
+  // No package.json === stop
+  if (!files.includes('package.json')) {
+    return null;
+  }
+
+  // .Get the toolbar
+  const toolbar = document.querySelector(
+    '.file-navigation.in-mid-page.d-flex.flex-items-start'
+  );
+  // Get everything after https://github.com/
+  const URL = window.location.pathname;
+
+  // Create the button
+  const button = document.createElement('a');
+  button.setAttribute('href', `https://codesandbox.io/s/github${URL}`);
+  button.setAttribute('target', '_blank');
+  button.setAttribute('rel', 'noopener noreferrer');
+
+  button.classList.add(
+    'btn',
+    'btn-sm',
+    'btn-primary',
+    'open-codesanbox-chrome-extension'
+  );
+  button.innerHTML = `
+  ${SVG}
+  Open in CodeSandbox
+`;
+
+  // Add it to the DOM
+  return toolbar.append(button);
+};
+addButton();

packages/chrome-extension/assets/icon128.png

@@ -0,0 +1,20 @@
+{
+  "manifest_version": 2,
+  "name": "Open in CodeSandbox",
+  "short_name": "CodeSandbox",
+  "version": "1.1.0",
+  "description": "Adds an open in CodeSandbox button to Github Repos",
+  "homepage_url": "https://codesandbox.io",
+  "icons": {
+    "16": "./assets/icon16.png",
+    "48": "./assets/icon48.png",
+    "128": "./assets/icon128.png"
+  },
+  "content_scripts": [
+    {
+      "css": ["styles.css"],
+      "js": ["content.js"],
+      "matches": ["https://github.com/*"]
+    }
+  ]
+}