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
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1 +1,2 @@
|
||||
node_modules/*
|
||||
node_modules/
|
||||
build/
|
||||
|
||||
159
background.js
159
background.js
@@ -1,159 +0,0 @@
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // define __esModule on exports
|
||||
/******/ __webpack_require__.r = function(exports) {
|
||||
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
||||
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
||||
/******/ }
|
||||
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // create a fake namespace object
|
||||
/******/ // mode & 1: value is a module id, require it
|
||||
/******/ // mode & 2: merge all properties of value into the ns
|
||||
/******/ // mode & 4: return value when already ns object
|
||||
/******/ // mode & 8|1: behave like require
|
||||
/******/ __webpack_require__.t = function(value, mode) {
|
||||
/******/ if(mode & 1) value = __webpack_require__(value);
|
||||
/******/ if(mode & 8) return value;
|
||||
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
||||
/******/ var ns = Object.create(null);
|
||||
/******/ __webpack_require__.r(ns);
|
||||
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
||||
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
||||
/******/ return ns;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./src/js/background.js");
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./src/js/background.js":
|
||||
/*!******************************!*\
|
||||
!*** ./src/js/background.js ***!
|
||||
\******************************/
|
||||
/*! no exports provided */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _services_DomainCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./services/DomainCheck */ "./src/js/services/DomainCheck.js");
|
||||
|
||||
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
|
||||
// inject files only after the page is fully loaded
|
||||
if (changeInfo.status != 'complete') return; // inject files only for supported websites
|
||||
|
||||
var domainCheck = new _services_DomainCheck__WEBPACK_IMPORTED_MODULE_0__["default"](tab.url);
|
||||
if (!domainCheck.hasMatch) return; // inject css + js
|
||||
|
||||
chrome.tabs.insertCSS(tabId, {
|
||||
file: "/styles.css"
|
||||
}, function () {
|
||||
chrome.tabs.executeScript(tabId, {
|
||||
file: "/bubble.js"
|
||||
}, function () {
|
||||
// chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
|
||||
console.log("injected bubble.js"); // })
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/js/services/DomainCheck.js":
|
||||
/*!****************************************!*\
|
||||
!*** ./src/js/services/DomainCheck.js ***!
|
||||
\****************************************/
|
||||
/*! exports provided: default */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
||||
|
||||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
||||
|
||||
var DomainCheck =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function DomainCheck(url) {
|
||||
_classCallCheck(this, DomainCheck);
|
||||
|
||||
this.url = url;
|
||||
}
|
||||
|
||||
_createClass(DomainCheck, [{
|
||||
key: "hasMatch",
|
||||
get: function get() {
|
||||
return this.url.match(/github/) || this.url.match(/trello/) || this.url.match(/mocoapp/);
|
||||
}
|
||||
}]);
|
||||
|
||||
return DomainCheck;
|
||||
}();
|
||||
|
||||
/* harmony default export */ __webpack_exports__["default"] = (DomainCheck);
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ });
|
||||
10
options.html
10
options.html
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="moco-bx-container"></div>
|
||||
<script src="options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
27081
options.js
27081
options.js
File diff suppressed because it is too large
Load Diff
28
package.json
28
package.json
@@ -4,29 +4,41 @@
|
||||
"version": "0.9.20",
|
||||
"main": "bundle.js",
|
||||
"scripts": {
|
||||
"webpack": "webpack --mode=development",
|
||||
"start": "node_modules/.bin/webpack --watch",
|
||||
"release": "copyfiles main.css main.min.js background.min.js manifest.json popup.html options.html node_modules/jquery/dist/jquery.min.js node_modules/select2/select2.js src/images/* release"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"mobx": "^5.5.0",
|
||||
"mobx-react": "^5.2.8",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.7.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"route-parser": "^0.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.1.2",
|
||||
"@babel/plugin-proposal-class-properties": "^7.1.0",
|
||||
"@babel/plugin-proposal-decorators": "^7.1.2",
|
||||
"@babel/preset-env": "^7.1.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"axios": "^0.18.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-module-resolver": "^3.1.1",
|
||||
"clean-webpack-plugin": "^1.0.1",
|
||||
"copy-webpack-plugin": "^4.6.0",
|
||||
"copyfiles": "^2.1.0",
|
||||
"css-loader": "^2.1.0",
|
||||
"eslint": "^5.7.0",
|
||||
"eslint-plugin-jest": "^21.25.0",
|
||||
"eslint-plugin-react": "^7.11.1",
|
||||
"mobx": "^5.5.0",
|
||||
"mobx-react": "^5.2.8",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"file-loader": "^3.0.1",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"node-sass": "^4.11.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"style-loader": "^0.23.1",
|
||||
"webpack": "^4.15.0",
|
||||
"webpack-cli": "^3.0.8"
|
||||
"webpack-cli": "^3.0.8",
|
||||
"webpack-dev-server": "^3.1.14"
|
||||
}
|
||||
}
|
||||
|
||||
10
popup.html
10
popup.html
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="moco-bx-container"></div>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
63
src/css/_form.scss
Normal file
63
src/css/_form.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
#moco-bx-container {
|
||||
.form-group {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
text-muted {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: normal;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
background-color: #eeeeee;
|
||||
border: 1px solid #cccccc;
|
||||
border-left: none;
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
background-image: none;
|
||||
background-color: #7dc332;
|
||||
border-color: #7dc332;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #639a28;
|
||||
border-color: #639a28;
|
||||
}
|
||||
}
|
||||
}
|
||||
63
src/css/_mixins.scss
Normal file
63
src/css/_mixins.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
$spacer: 1rem !default;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: (
|
||||
$spacer * 0.25
|
||||
),
|
||||
2: (
|
||||
$spacer * 0.5
|
||||
),
|
||||
3: $spacer,
|
||||
4: (
|
||||
$spacer * 1.5
|
||||
),
|
||||
5: (
|
||||
$spacer * 3
|
||||
)
|
||||
);
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $length in $spacers {
|
||||
.#{$abbrev}-#{$size} {
|
||||
#{$prop}: $length !important;
|
||||
}
|
||||
.#{$abbrev}t-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
}
|
||||
.#{$abbrev}r-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
}
|
||||
.#{$abbrev}b-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
.#{$abbrev}l-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $size, $length in $spacers {
|
||||
.m-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
.mt-auto,
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mr-auto,
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.mb-auto,
|
||||
.my-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.ml-auto,
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
45
src/css/main.scss
Normal file
45
src/css/main.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@import "mixins";
|
||||
@import "form";
|
||||
|
||||
#moco-bx-bubble {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
margin-left: -30px;
|
||||
z-index: 1000;
|
||||
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: -1px -1px 15px 4px rgba(0, 0, 0, 0.05),
|
||||
2px 2px 15px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#moco-bx-container {
|
||||
.moco-bx-modal {
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 2000; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0, 0, 0); /* Fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
.moco-bx-modal-content {
|
||||
background-color: white;
|
||||
width: 600px;
|
||||
padding: 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -4,10 +4,12 @@
|
||||
"description": "MOCO Zeiterfassung Plugin",
|
||||
"version": "0.9.20",
|
||||
"manifest_version": 2,
|
||||
"description" : "MOCO Time Tracking Plugin",
|
||||
"icons": { "16": "src/images/logo.png",
|
||||
"48": "src/images/logo.png",
|
||||
"128": "src/images/logo.png" },
|
||||
"description": "MOCO Time Tracking Plugin",
|
||||
"icons": {
|
||||
"16": "src/images/logo.png",
|
||||
"48": "src/images/logo.png",
|
||||
"128": "src/images/logo.png"
|
||||
},
|
||||
"options_ui": {
|
||||
"page": "options.html",
|
||||
"chrome_style": true
|
||||
@@ -19,24 +21,16 @@
|
||||
"tabs",
|
||||
"https://*/"
|
||||
],
|
||||
"optional_permissions": [
|
||||
"*://*/"
|
||||
],
|
||||
"optional_permissions": ["*://*/"],
|
||||
"background": {
|
||||
"scripts": [
|
||||
// "node_modules/jquery/dist/jquery.min.js",
|
||||
// "node_modules/select2/select2.js",
|
||||
"background.js"
|
||||
]
|
||||
"scripts": ["background.js"]
|
||||
},
|
||||
"browser_action": {
|
||||
"default_icon": "src/images/logo.png",
|
||||
"default_title": "MOCO Time Tracking",
|
||||
"default_popup": "popup.html"
|
||||
},
|
||||
"web_accessible_resources": [
|
||||
"src/images/*"
|
||||
],
|
||||
"web_accessible_resources": ["src/images/*"],
|
||||
"commands": {
|
||||
"_execute_browser_action": {
|
||||
"suggested_key": {
|
||||
9
src/options.html
Normal file
9
src/options.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="moco-bx-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
9
src/popup.html
Normal file
9
src/popup.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="moco-bx-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
39
styles.css
39
styles.css
@@ -1,39 +0,0 @@
|
||||
#moco-bx-bubble {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
margin-left: -30px;
|
||||
z-index: 1000;
|
||||
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: -1px -1px 15px 4px rgba(0,0,0,0.05), 2px 2px 15px 4px rgba(0,0,0,0.05);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#moco-bx-container .moco-bx-modal {
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 2000; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
#moco-bx-container .moco-bx-modal-content {
|
||||
background-color: white;
|
||||
width: 600px;
|
||||
padding: 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -1,29 +1,83 @@
|
||||
const path = require('path')
|
||||
const path = require("path");
|
||||
const CleanWebpackPlugin = require("clean-webpack-plugin");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
background: './src/js/background.js',
|
||||
bubble: './src/js/bubble.js',
|
||||
options: './src/js/options.js',
|
||||
popup: './src/js/popup.js',
|
||||
background: "./src/js/background.js",
|
||||
bubble: "./src/js/bubble.js",
|
||||
options: "./src/js/options.js",
|
||||
popup: "./src/js/popup.js"
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, "build"),
|
||||
filename: "[name].js"
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [path.join(__dirname, "src/css")]
|
||||
}
|
||||
}
|
||||
],
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader"
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(png)$/,
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: "[path][name].[ext]"
|
||||
},
|
||||
exclude: /node_modules/
|
||||
}
|
||||
]
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname),
|
||||
filename: '[name].js',
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(["build"]),
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: "src/manifest.json",
|
||||
transform: function(content, _path) {
|
||||
// generates the manifest file using the package.json informations
|
||||
return Buffer.from(
|
||||
JSON.stringify({
|
||||
description: process.env.npm_package_description,
|
||||
version: process.env.npm_package_version,
|
||||
...JSON.parse(content.toString())
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
]),
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, "src", "popup.html"),
|
||||
filename: "popup.html",
|
||||
chunks: ["popup"]
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, "src", "options.html"),
|
||||
filename: "options.html",
|
||||
chunks: ["options"]
|
||||
})
|
||||
],
|
||||
// webpack creates sourcemaps by default and evals js code
|
||||
// this is not allowed by chrome extensions
|
||||
// https://stackoverflow.com/a/49100966
|
||||
devtool: 'none'
|
||||
}
|
||||
devtool: "none",
|
||||
mode: process.env.NODE_ENV || "development"
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user