first commit

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,2 +1,30 @@
-# extension
-🍳 Web extension
+## react-chrome-extension
+![Alt text](./react-chrome-extension.png?raw=true "Optional Title")
+
+This is the first in a series of React boilerplate projects to help web developers learn and understand React. This project actually came about as I was creating my latest project, [StyleStash - Save Your favorite CSS Styles](https://stylestash.dev).
+
+## Video Code Walkthrough
+
+If you're more of a visual learner, I've recorded a [20 minute video walkthrough of this project](https://www.youtube.com/watch?v=4x0lQu1TOCQ).
+
+### Local Testing
+
+`npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+### Testing Inside Chrome
+
+This project needs to be built in order to take advantage of the Chrome Extension API, such as using the Content script to get the extension's ID, or using the Chrome Storage API. These features cannot be used when running this project locally.
+
+To load as a developer extension inside of Chrome:
+
+1. `npm run build` <br>
+2. Navigate to `chrome://extensions/` in your browser <br>
+3. Toggle the `Developer mode` switch on in the top right hand corner <br>
+4. Click the `Load unpacked` button in the top left corner <br>
+5. Select the `build` folder inside of this project folder <br>
+
+Builds the app for Chrome to the `build` folder.<br>
+

build/asset-manifest.json

@@ -0,0 +1,15 @@
+{
+  "files": {
+    "main.css": "/static/css/main.0c65d534.chunk.css",
+    "main.js": "/static/js/main.3c0571e0.chunk.js",
+    "main.js.map": "/static/js/main.3c0571e0.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.0d1674f1.js",
+    "runtime-main.js.map": "/static/js/runtime-main.0d1674f1.js.map",
+    "static/js/2.19f702a6.chunk.js": "/static/js/2.19f702a6.chunk.js",
+    "static/js/2.19f702a6.chunk.js.map": "/static/js/2.19f702a6.chunk.js.map",
+    "index.html": "/index.html",
+    "precache-manifest.9962bf5e2b6bf92690092c9ce7062c1b.js": "/precache-manifest.9962bf5e2b6bf92690092c9ce7062c1b.js",
+    "service-worker.js": "/service-worker.js",
+    "static/css/main.0c65d534.chunk.css.map": "/static/css/main.0c65d534.chunk.css.map"
+  }
+}

build/background.js

@@ -0,0 +1,25 @@
+/* global chrome */
+
+chrome.browserAction.onClicked.addListener(function (tab) {
+  chrome.tabs.sendMessage(tab.id, { message: 'load' });
+  // chrome.browserAction.setPopup({ popup: "./popup.html" })
+});
+
+
+// chrome.runtime.onMessage.addListener(
+//   function (message, sender, sendResponse) {
+//     window.postMessage(message,"*")
+//   }
+// );
+
+function handleMessage(request, sender, sendResponse) {
+  console.log("Message from the content script: " +
+    request.greeting);
+  // sendResponse({response: "Response from background script"});
+  var sending = chrome.runtime.sendMessage({
+    greeting: "FORWARDING: Greeting from the content script"
+  });
+  console.log("2: Message SENT")
+}
+
+chrome.runtime.onMessage.addListener(handleMessage);

build/content.js

@@ -0,0 +1,38 @@
+/* global chrome */
+
+chrome.runtime.onMessage.addListener(function(request, sender, callback) {
+  main();
+});
+
+function main() {
+  // eslint-disable-next-line no-undef
+  const extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
+  // eslint-disable-next-line no-restricted-globals
+  if (!location.ancestorOrigins.contains(extensionOrigin)) {
+    // Fetch the local React index.html page
+    // eslint-disable-next-line no-undef
+    fetch(chrome.runtime.getURL('index.html') /*, options */)
+      .then((response) => response.text())
+      .then((html) => {
+        const styleStashHTML = html.replace(/\/static\//g, `${extensionOrigin}/static/`);
+        // eslint-disable-next-line no-undef
+        $(styleStashHTML).appendTo('body');
+      })
+      .catch((error) => {
+        console.warn(error);
+      });
+  }
+}
+
+window.addEventListener("message", function(event) {
+  if (event.source !== window) return;
+  onDidReceiveMessage(event);
+});
+
+async function onDidReceiveMessage(event) {
+  if (event.data.type && (event.data.type === "GET_EXTENSION_ID")) {
+    window.postMessage({ type: "EXTENSION_ID_RESULT", extensionId: chrome.runtime.id }, "*");
+  }
+}
+
+

build/index.html

@@ -0,0 +1 @@
+<head><link href="/static/css/main.0c65d534.chunk.css" rel="stylesheet"></head><div id="modal-window"></div><script src="/static/js/runtime-main.0d1674f1.js"></script><script src="/static/js/2.19f702a6.chunk.js"></script><script src="/static/js/main.3c0571e0.chunk.js"></script>

build/manifest.json

@@ -0,0 +1,36 @@
+{
+  "manifest_version": 2,
+  "name": "React Chrome Extension Boilerplate",
+  "description": "A template of a React Chrome extension",
+  "version": "1.0.0",
+  "homepage_url": "https://stylestash.dev",
+  "icons": {
+    "16": "icon16.png",
+    "48": "icon48.png",
+    "128": "icon128.png"
+  },
+  "browser_action": {
+    "default_icon": "favicon.png",
+    "default_title": "React Chrome Extension Boilerplate"
+  },
+  "background": {
+    "scripts": ["./jquery.js", "background.js"]
+  },
+  "content_scripts": [{
+    "matches": ["<all_urls>"],
+    "all_frames": true,
+    "js": [
+      "./content.js",
+      "./jquery.js"
+    ],
+    "run_at": "document_end"
+  }],
+  "permissions": [
+    "activeTab"
+  ],
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "web_accessible_resources": [
+    "index.html",
+    "/static/*"
+  ]
+}

build/popup.html

@@ -0,0 +1,29 @@
+
+
+
+<!doctype html>
+<html>
+    <head>
+        <title>Title</title>
+        <style>
+            body {
+                font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
+                font-size: 100%;
+            }
+            #status {
+                white-space: pre;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                max-width: 400px;
+            }
+        </style>
+
+    </head>
+    <body>
+        <div>
+            <h1>Hello!</h1>
+            <button id="my-button"> Do something cool!</button>
+            </div>
+    </body>
+    <script src="popup.js"></script>
+</html>

build/popup.js

@@ -0,0 +1,13 @@
+var btn = document.getElementById('my-button')
+function handleClick() {
+    // chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+    //     chrome.tabs.sendMessage(tabs[0].id, "wohooo", function(response){
+    //     });
+    // });
+    var sending = chrome.runtime.sendMessage({
+        greeting: "Greeting from the content script"
+      });
+      console.log("1: Message SENT")
+}
+
+btn.addEventListener("click", handleClick);

build/precache-manifest.9962bf5e2b6bf92690092c9ce7062c1b.js

@@ -0,0 +1,22 @@
+self.__precacheManifest = (self.__precacheManifest || []).concat([
+  {
+    "revision": "6432c47e122fb3b1471690d7bdc31ca7",
+    "url": "/index.html"
+  },
+  {
+    "revision": "dcffa8b7ece2171606d4",
+    "url": "/static/css/main.0c65d534.chunk.css"
+  },
+  {
+    "revision": "47c637327588bf450229",
+    "url": "/static/js/2.19f702a6.chunk.js"
+  },
+  {
+    "revision": "dcffa8b7ece2171606d4",
+    "url": "/static/js/main.3c0571e0.chunk.js"
+  },
+  {
+    "revision": "e52355ce7cf88029702e",
+    "url": "/static/js/runtime-main.0d1674f1.js"
+  }
+]);

build/service-worker.js

@@ -0,0 +1,39 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+importScripts(
+  "/precache-manifest.9962bf5e2b6bf92690092c9ce7062c1b.js"
+);
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
+
+  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
+});