🎉 Works

risacan · risacan · commit 2b13ea459487 · 2017-06-26T18:32:58.000+09:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/index.css b/index.css
@@ -0,0 +1,50 @@
+body {
+  width: 400px;
+}
+
+button {
+  width: 148px;
+  height: 7pc;
+  font-weight: 900;
+  color: #fff;
+  margin: 8px;
+  border: none;
+  border-radius: 10px;
+  text-transform: uppercase;
+}
+
+.blue {
+  background-color: rgb(0, 121, 191);
+}
+
+.yellow {
+  background-color: rgb(210, 144, 52);
+}
+
+.green {
+  background-color: rgb(81, 152, 57);
+}
+
+.red {
+  background-color: rgb(176, 70, 50);
+}
+
+.purple {
+  background-color: rgb(137, 96, 158);
+}
+
+.pink {
+  background-color: rgb(205, 90, 145);
+}
+
+.lightgreen {
+  background-color: rgb(75, 191, 107);
+}
+
+.lightblue {
+  background-color: rgb(0, 174, 204);
+}
+
+.grey {
+  background-color: rgb(131, 140, 145);
+}
diff --git a/index.html b/index.html
@@ -2,8 +2,19 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="./index.js">
+    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
+    <link rel="stylesheet" href="./index.css">
   </head>
   <body>
+    <button id="rgb(0, 121, 191)" class="blue">blue</button>
+    <button id="rgb(210, 144, 52)" class="yellow">yellow</button>
+    <button id="rgb(81, 152, 57)" class="green">green</button>
+    <button id="rgb(176, 70, 50)" class="red">red</button>
+    <button id="rgb(137, 96, 158)" class="purple">purple</button>
+    <button id="rgb(205, 90, 145)" class="pink">pink</button>
+    <button id="rgb(75, 191, 107)" class="lightgreen">light green</button>
+    <button id="rgb(0, 174, 204)" class="lightblue">light blue</button>
+    <button id="rgb(131, 140, 145)" class~"gray">gray</button>
+    <script src="./index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,11 @@
+function click(e) {
+  chrome.tabs.executeScript(null,
+      {code:"$('.board, .board-body').css('background-color','" + e.target.id + "');"});
+  window.close();
+}
+document.addEventListener('DOMContentLoaded', function () {
+  var buttons = document.querySelectorAll('button');
+  for (var i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener('click', click);
+  }
+});
diff --git a/manifest.json b/manifest.json
@@ -20,11 +20,11 @@
       "matches": [
         "https://waffle.io/**/*"
       ],
-      "js": ["./index.js"],
+      "js": ["./node_modules/jquery/dist/jquery.min.js"],
       "run_at": "document_end"
     }
   ],
   "permissions": [
-    "tabs", "http://*/*", "https://*/*"
+    "tabs", "http://*/*", "https://*/*", "activeTab"
   ]
-}
+}
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
diff --git a/package.json b/package.json
@@ -4,5 +4,8 @@
   "main": "index.js",
   "repository": "https://github.com/risacan/chrome-extension-waffleio.git",
   "author": "Risa Harada <risa.harada@kidsstar.co.jp>",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "jquery": "^3.2.1"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2,3 +2,6 @@
 # yarn lockfile v1
 
 
+jquery@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
