Add an example of chrome extension.

kz0817 · kz0817 · commit f492a7fc71ba · 2018-05-18T21:52:03.000+09:00
diff --git a/chrome-ext/ex1/.gitignore b/chrome-ext/ex1/.gitignore
@@ -0,0 +1 @@
+*.swp
diff --git a/chrome-ext/ex1/README b/chrome-ext/ex1/README
@@ -0,0 +1,3 @@
+# Example of target HOST
+
+http://weather.livedoor.com/forecast/webservice/json/v1?city=130010
diff --git a/chrome-ext/ex1/background.js b/chrome-ext/ex1/background.js
@@ -0,0 +1,3 @@
+chrome.browserAction.onClicked.addListener(function() {
+  window.open("ui.html");
+});
diff --git a/chrome-ext/ex1/main.css b/chrome-ext/ex1/main.css
@@ -0,0 +1,17 @@
+
+#url-box {
+  width: 50rem;
+}
+
+.main-button {
+  width:  8rem;
+  height: 3rem;
+  color: white;
+  background: #0070ff;
+  border: none;
+  outline: none;
+  margin: 0.5rem 0rem;
+}
+.main-button:active {
+  background: #00b0ff;
+}
diff --git a/chrome-ext/ex1/main.js b/chrome-ext/ex1/main.js
@@ -0,0 +1,57 @@
+(() => {
+  console.log('Start');
+
+  const getElement = (id) => {
+    const elem = document.getElementById(id);
+    if (elem == null) {
+      console.log('Failed to find: ' + id);
+    }
+    return elem;
+  }
+
+  const getTimeStamp = () => {
+    const now = new Date();
+    const ret =
+      ('0' + now.getHours()).slice(-2) + ':' +
+      ('0' + now.getMinutes()).slice(-2) + ':' +
+      ('0' + now.getSeconds()).slice(-2) + '.' +
+      ('0' + now.getMilliseconds()).slice(-3);
+    return ret;
+  }
+
+  const log = (msg) => {
+    const area = getElement('info-area');
+    const msgElem = document.createElement('div');
+    msgElem.innerHTML = '<tt>' + getTimeStamp() + '</tt> ' + msg;
+    area.insertBefore(msgElem, area.firstChild);
+  }
+
+  const logError = (msg) => {
+    log('[ERROR] ' + msg);
+  }
+
+  const readURL = (url, successCb) => {
+    log('Trying to connect: ' + url);
+    const xhr = new XMLHttpRequest();
+    xhr.onload = () => {
+      successCb({
+        res: JSON.parse(xhr.responseText),
+      });
+    }
+    xhr.onerror = () => {
+      logError('status: ' + xhr.status + ' (' + xhr.statusText + ')');
+    }
+    xhr.open('GET', url);
+    xhr.send(null);
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const runButton = getElement('run-button');
+    runButton.onclick = () => {
+      readURL(getElement('url-box').value, (param) => {
+        log(param.res);
+      });
+      return false;
+    };
+  });
+})();
diff --git a/chrome-ext/ex1/manifest.json b/chrome-ext/ex1/manifest.json
@@ -0,0 +1,15 @@
+{
+  "manifest_version": 2,
+  "name": "Example 1",
+  "description": "This is an example of Chrome extension",
+  "version": "0.1",
+  "browser_action": {
+  },
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "permissions": [
+    "http://*/*",
+    "https://*/*"
+  ]
+}
diff --git a/chrome-ext/ex1/ui.html b/chrome-ext/ex1/ui.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="main.css">
+  <script type="text/javascript" src="main.js"></script>
+</head>
+<body>
+<form>
+  Host
+  <input type="text" id="url-box">
+  <br>
+  <button type="submit" class="main-button" id="run-button">Start</button>
+</form>
+<div id="info-area">
+</div>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Example of target HOST`
	`2`	`+`
	`3`	`+http://weather.livedoor.com/forecast/webservice/json/v1?city=130010`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+chrome.browserAction.onClicked.addListener(function() {`
	`2`	`+ window.open("ui.html");`
	`3`	`+});`