Add Browser Action

dora1998 · May 9, 2018 · b5323db · b5323db
1 parent 35f9960
commit b5323db
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 1 deletion.
diff --git a/src/styles.css → src/css/styles.css b/src/styles.css → src/css/styles.css
diff --git a/src/css/styles_popup.css b/src/css/styles_popup.css
@@ -0,0 +1,40 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 200px;
+    padding: 16px;
+    margin: 0;
+    background-color: #222;
+}
+.container button {
+    width: 100%;
+    background-color: transparent;
+    font-size: 1.5em;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    outline: none;
+    padding: 16px;
+    position: relative;
+}
+.container button:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+}
+.container button:hover::before{
+    content: '';
+    width: 8px;
+    height: 8px;
+    border: 0px;
+    border-top: solid 2px #000;
+    border-right: solid 2px #000;
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    position: absolute;
+    top: 50%;
+    left: 8px;
+    margin-top: -4px;
+  }
diff --git a/src/js/popup.js b/src/js/popup.js
@@ -0,0 +1,6 @@
+$(function() {
+    $(".container button").click(function() {
+        chrome.tabs.create({"url": $(this).attr("href")}, null);
+        return false;
+    });
+});
diff --git a/src/manifest.json b/src/manifest.json
@@ -15,7 +15,7 @@
                ,"js/main.js"
             ]
            ,"css": [
-               "styles.css"
+               "css/styles.css"
            ]
         }
     ],
@@ -24,6 +24,12 @@
           "js/background.js"
       ],
       "persistent": false
+  },
+  "browser_action": {
+    "default_icon": {
+    },
+    "default_title": "KUPlus",
+    "default_popup": "popup.html"
   }
 
 }
diff --git a/src/popup.html b/src/popup.html
@@ -0,0 +1,21 @@
+
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/styles_popup.css">
+
+    <title>KUPlus Popup</title>
+  </head>
+  <body>
+    <div class="container">
+        <button href="https://www.k.kyoto-u.ac.jp/student/la/top">KULASIS</button>
+        <button href="https://panda.ecs.kyoto-u.ac.jp/portal/login">PandA</button>
+        <button href="https://m.kulib.kyoto-u.ac.jp/webopac/ufisnd.do">MyKULINE</button>
+        <button href="https://outlook.com/st.kyoto-u.ac.jp">KUMOI</button>
+    </div>
+
+    <script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
+    <script type="text/javascript" src="js/popup.js"></script>
+  </body>
+</html>