Add chrome extension example

shama · shama · commit 467b192f7ef5 · 2018-04-10T22:36:40.000-07:00
diff --git a/how-to-make-chrome-extensions/README.md b/how-to-make-chrome-extensions/README.md
@@ -0,0 +1,8 @@
+# How To Make Chrome Extensions
+
+> [https://youtu.be/Ipa58NVGs_c](https://youtu.be/Ipa58NVGs_c)
+
+* Go to `chrome://extensions/`
+* Enable Developer mode
+* Load unpacked and select the `bear` folder from this project.
+
diff --git a/how-to-make-chrome-extensions/bear/background.js b/how-to-make-chrome-extensions/bear/background.js
@@ -0,0 +1,8 @@
+window.bears = {}
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  window.bears[request.url] = request.count
+})
+
+chrome.browserAction.onClicked.addListener(function (tab) {
+  chrome.tabs.create({url: 'popup.html'})
+})
diff --git a/how-to-make-chrome-extensions/bear/content.js b/how-to-make-chrome-extensions/bear/content.js
@@ -0,0 +1,13 @@
+//alert('Grrr.')
+// chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+//   const re = new RegExp('bear', 'gi')
+//   const matches = document.documentElement.innerHTML.match(re)
+//   sendResponse({count: matches.length})
+// })
+
+const re = new RegExp('bear', 'gi')
+const matches = document.documentElement.innerHTML.match(re)
+chrome.runtime.sendMessage({
+  url: window.location.href,
+  count: matches.length
+})
diff --git a/how-to-make-chrome-extensions/bear/manifest.json b/how-to-make-chrome-extensions/bear/manifest.json
@@ -0,0 +1,18 @@
+{
+  "name": "bear",
+  "version": "1.0",
+  "manifest_version": 2,
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"]
+    }
+  ],
+  "browser_action": {
+    "default_title": "Bear"
+  },
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "permissions": ["tabs"]
+}
diff --git a/how-to-make-chrome-extensions/bear/popup.html b/how-to-make-chrome-extensions/bear/popup.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+  <!-- <button>Count Bears</button> -->
+  <script src="popup.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/how-to-make-chrome-extensions/bear/popup.js b/how-to-make-chrome-extensions/bear/popup.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+  const bg = chrome.extension.getBackgroundPage()
+  Object.keys(bg.bears).forEach(function (url) {
+    const div = document.createElement('div')
+    div.textContent = `${url}: ${bg.bears[url]}`
+    document.body.appendChild(div)
+  })
+
+  // document.querySelector('button').addEventListener('click', onclick, false)
+  //
+  // function onclick () {
+  //   chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
+  //     chrome.tabs.sendMessage(tabs[0].id, 'hi', setCount)
+  //   })
+  // }
+  //
+  // function setCount (res) {
+  //   const div = document.createElement('div')
+  //   div.textContent = `${res.count} bears`
+  //   document.body.appendChild(div)
+  // }
+}, false)
