Added a little onboarding when you install the extension.

GabeDuarteM · Dec 17, 2017 · e44faa2 · e44faa2
1 parent 09ccb1e
commit e44faa2
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 2 deletions.
diff --git a/src/background.ts b/src/background.ts
@@ -112,3 +112,7 @@ function OpenDefaultPlayer() {
     chrome.tabs.create({ url: defaultPlayer.url })
   }
 }
+
+chrome.runtime.onInstalled.addListener(details => {
+  chrome.tabs.create({ url: chrome.runtime.getURL("first-time/index.html") })
+})
diff --git a/src/first-time/index.html b/src/first-time/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Webplayer Hotkeys</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Roboto', sans-serif;
+    }
+
+    header {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      margin-top: 40px;
+    }
+
+    section {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: 300;
+    }
+
+
+    .divider {
+      width: 320px;
+      height: 1px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    .divider.bottom {
+      margin-top: 24px;
+    }
+
+    section h2 {
+      margin-top: 24px;
+    }
+
+    code {
+      font-size: 11px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    figcaption {
+      justify-content: center;
+      display: flex;
+    }
+  </style>
+</head>
+
+<body>
+  <header>
+    <h1>Webplayer Hotkeys</h1>
+    <span class="divider" />
+  </header>
+  <section>
+    <h2>Getting Started</h3>
+      <div>
+        To start using the extension, you need to set the hotkeys for it. You can do it by going to the extensions configuration
+        page
+        <code>(Click more <img src="http://storage.googleapis.com/support-kms-prod/5C6FB52C8BBB2C12DC89B5F42F16B9B5E9CF"> > More tools > Extensions)</code> and, on the bottom of the list, click
+        <code>Keyboard Shortcuts</code>.
+        <br>On the list that opens up, find the Webplayer Hotkeys section, and there you can assign wherever hotkeys you want
+        for play, pause and next/previous song.
+      </div>
+      <span class="divider bottom" />
+  </section>
+  <section>
+    <h2>Images</h3>
+      <figure>
+        <img src="/first-time/keyboard-shortcuts.jpg">
+        <figcaption>Keyboard shortcuts location</figcaption>
+      </figure>
+      <figure>
+        <img src="/first-time/shortcuts.jpg">
+        <figcaption>Shortcuts</figcaption>
+      </figure>
+  </section>
+</body>
+
+</html>
diff --git a/src/first-time/keyboard-shortcuts.jpg b/src/first-time/keyboard-shortcuts.jpg
diff --git a/src/first-time/shortcuts.jpg b/src/first-time/shortcuts.jpg
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Webplayer Hotkeys",
-  "version": "1.0",
+  "version": "1.1",
   "description": "Assign hotkeys to play/pause, and switch music. Works with Spotify, Deezer, SoundCloud and Youtube.",
   "icons": {
     "128": "icon.png"

diff --git a/webpack.config.ts b/webpack.config.ts
@@ -21,7 +21,11 @@ function getMergedConfig({ env }: IMergedConfigParams): webpack.Configuration {
 }
 
 function getPatterns(): IPattern[] {
-  return [{ from: join("src", "icon.png") }, { from: join("src", "manifest.json") }]
+  return [
+    { from: join("src", "icon.png") },
+    { from: join("src", "manifest.json") },
+    { from: join("src", "first-time"), to: "first-time" },
+  ]
 }
 
 function getBaseConfig(): webpack.Configuration {