Update webpack config
- write bundle to `/build` - add support for SASS - improve options view as a proof o concept for styling
This commit is contained in:
Manuel Bouza
@@ -1,19 +1,16 @@
|
||||
import DomainCheck from './services/DomainCheck'
|
||||
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
|
||||
if (changeInfo.status != "complete") return;
|
||||
|
||||
// inject files only for supported websites
|
||||
const domainCheck = new DomainCheck(tab.url)
|
||||
if (!domainCheck.hasMatch) return
|
||||
const domainCheck = new DomainCheck(tab.url);
|
||||
if (!domainCheck.hasMatch) return;
|
||||
|
||||
// inject css + js
|
||||
chrome.tabs.insertCSS(tabId, {file: "/styles.css"}, () => {
|
||||
chrome.tabs.executeScript(tabId, {file: "/bubble.js"}, () => {
|
||||
// chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
|
||||
console.log("injected bubble.js")
|
||||
// })
|
||||
})
|
||||
})
|
||||
})
|
||||
chrome.tabs.executeScript(tabId, { file: "/bubble.js" }, () => {
|
||||
// chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
|
||||
console.log("injected bubble.js");
|
||||
// })
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
import { createElement } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import Bubble from './components/Bubble'
|
||||
import { createElement } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import Bubble from "./components/Bubble";
|
||||
import "../css/main.scss";
|
||||
|
||||
// don't initiate bubble twice
|
||||
if (!document.querySelector('#moco-bx-container')) {
|
||||
const domContainer = document.createElement('div')
|
||||
domContainer.setAttribute('id', 'moco-bx-container')
|
||||
document.body.appendChild(domContainer)
|
||||
if (!document.querySelector("#moco-bx-container")) {
|
||||
const domContainer = document.createElement("div");
|
||||
domContainer.setAttribute("id", "moco-bx-container");
|
||||
document.body.appendChild(domContainer);
|
||||
|
||||
const domBubble = document.createElement('div')
|
||||
domBubble.setAttribute('id', 'moco-bx-bubble')
|
||||
document.body.appendChild(domBubble)
|
||||
const domBubble = document.createElement("div");
|
||||
domBubble.setAttribute("id", "moco-bx-bubble");
|
||||
document.body.appendChild(domBubble);
|
||||
|
||||
ReactDOM.render(createElement(Bubble), domBubble)
|
||||
ReactDOM.render(createElement(Bubble), domBubble);
|
||||
}
|
||||
|
||||
@@ -1,43 +1,44 @@
|
||||
import React, { Component, Fragment } from 'react'
|
||||
import Modal, { Content } from 'components/Modal'
|
||||
import Form from 'components/Form'
|
||||
import { observable } from 'mobx'
|
||||
import { observer } from 'mobx-react'
|
||||
import React, { Component } from "react";
|
||||
import Modal, { Content } from "components/Modal";
|
||||
import Form from "components/Form";
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import logoUrl from "../../images/logo.png";
|
||||
|
||||
@observer
|
||||
class Bubble extends Component {
|
||||
@observable open = false
|
||||
@observable open = false;
|
||||
|
||||
onOpen = (_e) => {
|
||||
this.open = true
|
||||
}
|
||||
onOpen = _e => {
|
||||
this.open = true;
|
||||
};
|
||||
|
||||
onClose = (_e) => {
|
||||
this.open = false
|
||||
}
|
||||
onClose = _e => {
|
||||
this.open = false;
|
||||
};
|
||||
|
||||
// RENDER -------------------------------------------------------------------
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<>
|
||||
<img
|
||||
onClick={this.onOpen}
|
||||
src={chrome.extension.getURL('src/images/logo.png')}
|
||||
src={chrome.extension.getURL(logoUrl)}
|
||||
width="50%"
|
||||
/>
|
||||
|
||||
{this.open &&
|
||||
{this.open && (
|
||||
<Modal>
|
||||
<Content>
|
||||
<Form />
|
||||
<button onClick={this.onClose}>Close</button>
|
||||
</Content>
|
||||
</Modal>
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Bubble
|
||||
export default Bubble;
|
||||
|
||||
@@ -1,57 +1,74 @@
|
||||
import React, { Component } from 'react'
|
||||
import { observable } from 'mobx'
|
||||
import { observer } from 'mobx-react'
|
||||
import React, { Component } from "react";
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
|
||||
@observer
|
||||
class Setup extends Component {
|
||||
@observable loading = true
|
||||
@observable subdomain = ""
|
||||
@observable apiKey = ""
|
||||
@observable loading = true;
|
||||
@observable subdomain = "";
|
||||
@observable apiKey = "";
|
||||
|
||||
componentDidMount() {
|
||||
chrome.storage.sync.get(null, (store) => {
|
||||
this.loading = false
|
||||
this.subdomain = store.subdomain || ""
|
||||
this.apiKey = store.api_key || ""
|
||||
})
|
||||
chrome.storage.sync.get(null, store => {
|
||||
this.loading = false;
|
||||
this.subdomain = store.subdomain || "";
|
||||
this.apiKey = store.api_key || "";
|
||||
});
|
||||
}
|
||||
|
||||
// EVENTS
|
||||
|
||||
onChange = (e) => {
|
||||
this[e.target.name] = e.target.value
|
||||
}
|
||||
onChange = event => {
|
||||
this[event.target.name] = event.target.value;
|
||||
};
|
||||
|
||||
onSubmit = (_e) => {
|
||||
chrome.storage.sync.set({
|
||||
subdomain: this.subdomain.trim(),
|
||||
api_key: this.apiKey.trim(),
|
||||
}, () => window.close())
|
||||
}
|
||||
onSubmit = _event => {
|
||||
chrome.storage.sync.set(
|
||||
{
|
||||
subdomain: this.subdomain.trim(),
|
||||
api_key: this.apiKey.trim()
|
||||
},
|
||||
() => window.close()
|
||||
);
|
||||
};
|
||||
|
||||
// RENDER -------------------------------------------------------------------
|
||||
|
||||
render() {
|
||||
if (this.loading) return null
|
||||
if (this.loading) return null;
|
||||
|
||||
return (
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
name="subdomain"
|
||||
value={this.subdomain}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="apiKey"
|
||||
value={this.apiKey}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<h2>Einstellungen</h2>
|
||||
<div className="form-group">
|
||||
<label>Internetadresse</label>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="subdomain"
|
||||
value={this.subdomain}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="input-group-addon">.mocoapp.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API Key</label>
|
||||
<input
|
||||
type="text"
|
||||
name="apiKey"
|
||||
value={this.apiKey}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<div className="text-muted mt-1">
|
||||
Deinen API-Schlüssel findest du in der MOCO-App unter
|
||||
Profil/Integrationen.
|
||||
</div>
|
||||
</div>
|
||||
<button>Save</button>
|
||||
</form>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Setup
|
||||
export default Setup;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createElement } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import Setup from './components/Setup'
|
||||
import { createElement } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import Setup from "./components/Setup";
|
||||
import "../css/main.scss";
|
||||
|
||||
const domContainer = document.querySelector('#moco-bx-container')
|
||||
ReactDOM.render(createElement(Setup), domContainer)
|
||||
const domContainer = document.querySelector("#moco-bx-container");
|
||||
ReactDOM.render(createElement(Setup), domContainer);
|
||||
|
||||
Reference in New Issue
Block a user