initial draft

src/js/background.js

@@ -0,0 +1,21 @@
+import DomainCheck from './services/DomainCheck'
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  // inject files only after the page is fully loaded
+  if (changeInfo.status != 'complete') return
+
+  // inject files only for supported websites
+  const domainCheck = new DomainCheck(tab.url)
+  if (!domainCheck.hasMatch) return
+
+  // inject css + js
+  chrome.tabs.insertCSS(tabId, {file: "/styles.css"}, () => {
+    chrome.tabs.executeScript(tabId, {
+      code: "const div = document.createElement('div'); div.setAttribute('id', 'moco'); document.body.appendChild(div)"
+    }, () => {
+      chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
+        console.log("inejected /popup.js")
+      })
+    })
+  })
+})

src/js/components/Modal.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function Modal() {
+  const onClick = (e) => {
+    alert("clicked")
+  }
+
+  return <div onClick={onClick}>REACT</div>
+}
+
+export default Modal

src/js/index.js

@@ -1 +0,0 @@
-alert("ok")

src/js/options.js

@@ -0,0 +1 @@
+console.log("okish from options.js")

src/js/popup.js

@@ -0,0 +1,8 @@
+console.log("okish from popup.js")
+
+import React, { createElement } from 'react'
+import ReactDOM from 'react-dom'
+import Modal from './components/Modal'
+
+const domContainer = document.querySelector('#moco')
+ReactDOM.render(createElement(Modal), domContainer)

src/js/services/DomainCheck.js

@@ -0,0 +1,11 @@
+class DomainCheck {
+  constructor(url) {
+    this.url = url
+  }
+
+  get hasMatch() {
+    return this.url.match(/github/)
+  }
+}
+
+export default DomainCheck