Init from Manwell
This commit is contained in:
commit
4ec6d1e14f
25 changed files with 1369 additions and 0 deletions
72
background.js
Normal file
72
background.js
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
let tabs = {};
|
||||
function createTab(id){
|
||||
return tabs[id] = {
|
||||
top: "",
|
||||
scriptsIndex: {},
|
||||
scripts: []
|
||||
};
|
||||
}
|
||||
|
||||
chrome.browserAction.setBadgeBackgroundColor({color:"#303030"});
|
||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
let rTabID = request.tabID;
|
||||
let action = request.action;
|
||||
let value = request.value;
|
||||
|
||||
if(sender.tab){ // Messages from tabs
|
||||
let tabID = sender.tab.id;
|
||||
if(!tabs[tabID]) createTab(tabID)
|
||||
let tab = tabs[tabID];
|
||||
|
||||
switch(action){
|
||||
case "add-files": {
|
||||
value.forEach(info => {
|
||||
if(!tab.scriptsIndex[info.id]){
|
||||
tab.scriptsIndex[info.id] = info;
|
||||
tab.scripts.push(info);
|
||||
if(info.enabled) tab.badge++;
|
||||
|
||||
let file = new File(info.id);
|
||||
file.onChange = function(newInfo){
|
||||
for(let index in newInfo){
|
||||
info[index] = newInfo[index];
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if(tab.scripts.length>0)
|
||||
chrome.browserAction.setBadgeText({
|
||||
tabId: tabID,
|
||||
text: String(tab.scripts.length)
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "set-url": {
|
||||
tab = createTab(tabID);
|
||||
tab.top = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else { // Messages from anywhere else
|
||||
let tab;
|
||||
if(rTabID){
|
||||
tab = tabs[rTabID];
|
||||
if(!tab) return;
|
||||
}
|
||||
|
||||
switch(action){
|
||||
case "get-files": {
|
||||
sendResponse(tab.scripts);
|
||||
break;
|
||||
}
|
||||
case "get-url": {
|
||||
sendResponse(tab.top);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
chrome.tabs.onRemoved.addListener((tabID, removeInfo) => {
|
||||
delete tabs[tabID];
|
||||
});
|
||||
46
content.js
Normal file
46
content.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
let myHead = document.createElement("custom-web");
|
||||
document.documentElement.appendChild(myHead);
|
||||
|
||||
chrome.runtime.sendMessage({
|
||||
action: "set-url",
|
||||
value: window.location.href
|
||||
});
|
||||
|
||||
File.loadAll().then(files => {
|
||||
let activeFiles = [];
|
||||
for(let i = 0; i < files.length; i++){
|
||||
let info = files[i].info;
|
||||
|
||||
if(info.links && info.links.length > 0) {
|
||||
let found = false;
|
||||
for(let l = 0; l < info.links.length && !found; l++) {
|
||||
let regexp = new RegExp(info.links[l]);
|
||||
found = window.location.href.match(regexp);
|
||||
}
|
||||
if(!found) continue;
|
||||
}
|
||||
activeFiles.push(info);
|
||||
if(!info.enabled) continue;
|
||||
if(info.type == "JS") {
|
||||
let jsContainer = document.createElement("script");
|
||||
jsContainer.textContent = info.content;
|
||||
myHead.appendChild(jsContainer);
|
||||
} else {
|
||||
let cssContainer = document.createElement("style");
|
||||
cssContainer.textContent = info.content;
|
||||
myHead.appendChild(cssContainer);
|
||||
}
|
||||
}
|
||||
let isTop = (window == window.top);
|
||||
|
||||
if(isTop){ // Only allow top to set URL
|
||||
chrome.runtime.sendMessage({
|
||||
action: "set-url",
|
||||
value: window.location.href
|
||||
});
|
||||
}
|
||||
chrome.runtime.sendMessage({
|
||||
action: "add-files",
|
||||
value: activeFiles
|
||||
});
|
||||
});
|
||||
67
css/common.css
Normal file
67
css/common.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
*{box-sizing:border-box;}
|
||||
|
||||
:root{
|
||||
--top: #212121;
|
||||
--background: #303030;
|
||||
--light: #424242;
|
||||
--lighter: #606060;
|
||||
--lightest: #848484;
|
||||
}
|
||||
html{
|
||||
height:100vh;
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
}
|
||||
body{
|
||||
min-height:100%;
|
||||
margin: 0;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.check{
|
||||
font-size:20px;
|
||||
|
||||
display: inline-flex;
|
||||
width:2em;
|
||||
height:1em;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.check input{
|
||||
display:none;
|
||||
}
|
||||
.check input + span{
|
||||
position:relative;
|
||||
display:inline-flex;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: #000;
|
||||
border-radius:1000px;
|
||||
cursor:pointer;
|
||||
transition: background 100ms ease-in-out;
|
||||
}
|
||||
.check input:checked + span{
|
||||
background:#0a3;
|
||||
}
|
||||
.check input + span::before{
|
||||
content:"";
|
||||
display:inline-block;
|
||||
width:1em; height:1em;
|
||||
margin-left:1px;
|
||||
border:0.15em solid transparent;
|
||||
background-clip: padding-box;
|
||||
box-sizing:border-box;
|
||||
border-radius:100%;
|
||||
background-color:white;
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
.check input:checked + span::before{
|
||||
transform: translateX(100%);
|
||||
margin-left:-1px;
|
||||
}
|
||||
.check.no-transition input + span,
|
||||
.check.no-transition input + span::before{
|
||||
transition:none;
|
||||
}
|
||||
/* Small Check */
|
||||
.check.small{
|
||||
font-size:17px;
|
||||
}
|
||||
233
css/editor.css
Normal file
233
css/editor.css
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
/* reset */
|
||||
input {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
#editor {
|
||||
margin: 0;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* custom styles */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* header */
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 50px;
|
||||
flex-shrink: 0;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: var(--top);
|
||||
}
|
||||
|
||||
header .check {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
header input {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
padding: 0 15px;
|
||||
margin-right: auto;
|
||||
border-radius: 40px;
|
||||
background-color: var(--top);
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
cursor:pointer;
|
||||
margin-right: auto;
|
||||
|
||||
transition: padding 100ms ease-in-out;
|
||||
}
|
||||
header input:hover,
|
||||
header input:focus {
|
||||
background-color: var(--light);
|
||||
}
|
||||
header input:focus{
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
header > span {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
header > span#download-btn {
|
||||
padding: 7px;
|
||||
}
|
||||
header > span:last-child {
|
||||
margin-right: -5px;
|
||||
}
|
||||
header > span:hover {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
header > span svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#save-btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
#save-btn.edited {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#save-btn svg {
|
||||
opacity: 0.25;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
}
|
||||
#save-btn.edited svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* editor */
|
||||
main {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#editor {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* links popup */
|
||||
#links-popup {
|
||||
display: none; /* flex */
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 500px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0; bottom: 0;
|
||||
right: 0; left: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: var(--light);
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#links-popup header {
|
||||
background: none;
|
||||
background-color: var(--background);
|
||||
}
|
||||
#links-popup header h1 {
|
||||
margin-right: auto;
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#links-popup header > span {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
#links-popup main {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry input {
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
padding: 10px 15px;
|
||||
padding-right: 40px;
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
color: rgb(235, 227, 227);
|
||||
opacity: 1;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry:hover,
|
||||
#links-popup main #links-wrapper .link-entry input:focus {
|
||||
background-color: var(--lighter);
|
||||
opacity: 1;
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry input:focus {
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry svg {
|
||||
position: absolute;
|
||||
top: 0; right: 0px;
|
||||
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 10px;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 0;
|
||||
|
||||
fill: white;
|
||||
opacity: 0;
|
||||
cursor: pointer
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry:hover svg,
|
||||
#links-popup main #links-wrapper .link-entry input:focus + svg {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry svg:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* better monokai */
|
||||
|
||||
#editor.ace-monokai {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
#editor.ace-monokai .ace_gutter {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
#editor.ace-monokai .ace_selection {
|
||||
background-color: var(--lighter);
|
||||
}
|
||||
|
||||
#editor.ace-monokai .ace_marker-layer .ace_active-line {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
145
css/index.css
Normal file
145
css/index.css
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
svg{
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
}
|
||||
|
||||
body.drag-over{
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
header{
|
||||
width:100%;
|
||||
height:50px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
padding:0px 20px;
|
||||
background-color: var(--top);
|
||||
color:white;
|
||||
fill:white;
|
||||
font-size:30px;
|
||||
}
|
||||
header img{
|
||||
width:36px;
|
||||
margin-right:10px;
|
||||
}
|
||||
header img + span{
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
header #new-file {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
transition: width 100ms ease-in-out;
|
||||
}
|
||||
header #new-file:hover {
|
||||
width: 175px;
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
header #new-file span.btn {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-width: 30px;
|
||||
height: 100%;
|
||||
opacity:0.5;
|
||||
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
header #new-file span.btn:hover {
|
||||
opacity:1;
|
||||
text-shadow: 0 0 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
header #new-file .btn-svg {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
header #new-file .btn-svg svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#files{
|
||||
padding:10px 20px;
|
||||
}
|
||||
.file{
|
||||
position:relative;
|
||||
color:white;
|
||||
height:45px;
|
||||
padding:10px 15px;
|
||||
display:grid;
|
||||
grid-template-columns: 60px auto 50px 125px;
|
||||
align-items:center;
|
||||
font-size:16px;
|
||||
border-radius:45px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.file:hover{
|
||||
background: var(--lighter);
|
||||
}
|
||||
.file .file-type{
|
||||
justify-self: center;
|
||||
}
|
||||
.file .file-name,
|
||||
.file .file-type{
|
||||
pointer-events:none;
|
||||
}
|
||||
.file .file-icons{
|
||||
display:flex;
|
||||
pointer-events:none;
|
||||
}
|
||||
.file .file-icons .file-icon{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
border-radius:20px;
|
||||
padding:2px 0px;
|
||||
transition: all 100ms ease-in-out;
|
||||
cursor:pointer;
|
||||
pointer-events:all;
|
||||
}
|
||||
.file .file-icons .file-icon svg{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
opacity:0.7;
|
||||
}
|
||||
.file .file-icons .file-icon.icon-confirm svg,
|
||||
.file .file-icons .file-icon svg:hover{
|
||||
opacity:1;
|
||||
}
|
||||
.file .file-icons .file-icon.icon-confirm{
|
||||
background:#C00;
|
||||
padding:2px 5px;
|
||||
}
|
||||
.file .file-icons .file-icon::before{
|
||||
content:"DELETE";
|
||||
font-size: 12px;
|
||||
width: 0px;
|
||||
overflow:hidden;
|
||||
text-align:center;
|
||||
transition: width 100ms ease-in-out;
|
||||
}
|
||||
.file .file-icons .file-icon.icon-confirm::before{
|
||||
width:50px;
|
||||
}
|
||||
.file .file-icons .file-edit{
|
||||
margin-left:auto;
|
||||
margin-right:5px;
|
||||
}
|
||||
89
css/popup.css
Normal file
89
css/popup.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
html{
|
||||
height:auto;
|
||||
}
|
||||
body{
|
||||
width:200px;
|
||||
color:white;
|
||||
padding:3px 0px;
|
||||
font-size:12px;
|
||||
}
|
||||
img{
|
||||
height:22px;
|
||||
width:22px;
|
||||
justify-self:center;
|
||||
}
|
||||
.title{
|
||||
font-size:16px;
|
||||
}
|
||||
.line{
|
||||
display:grid;
|
||||
align-items:center;
|
||||
grid-template-columns: 34px auto 25px;
|
||||
column-gap: 10px;
|
||||
height:30px;
|
||||
padding:0px 10px;
|
||||
}
|
||||
.line .check{
|
||||
flex-shrink:0;
|
||||
}
|
||||
.line > .line-item{
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events:none;
|
||||
}
|
||||
.line > .line-item + .line-item{
|
||||
opacity:0.5;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.btn{
|
||||
cursor:pointer;
|
||||
}
|
||||
.btn:hover{
|
||||
opacity:1;
|
||||
background: var(--lighter);
|
||||
}
|
||||
|
||||
#files:empty{
|
||||
display:none;
|
||||
}
|
||||
|
||||
section:not(:first-child){
|
||||
margin-top:3px;
|
||||
padding-top:3px;
|
||||
border-top:1px solid var(--light);
|
||||
}
|
||||
section h2{
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
font-weight:400;
|
||||
padding:0px 10px;
|
||||
color: var(--lighter)
|
||||
}
|
||||
section h2 span{
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
#add-new .line {
|
||||
grid-template-columns: 50% 50%;
|
||||
align-items: stretch;
|
||||
column-gap:0;
|
||||
height:20px;
|
||||
}
|
||||
#add-new .line .btn{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
opacity:0.7;
|
||||
}
|
||||
#add-new .line .btn:hover{
|
||||
opacity:1;
|
||||
background:none;
|
||||
}
|
||||
54
editor.html
Normal file
54
editor.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Script Editor</title>
|
||||
<link rel="shortcut icon" type="image/png" href="img/icon48.png">
|
||||
<link rel="stylesheet" href="css/common.css"/>
|
||||
<link rel="stylesheet" href="css/editor.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<label class="check" title="Enable or disable file">
|
||||
<input id="enable-input" type="checkbox">
|
||||
<span></span>
|
||||
</label>
|
||||
<input id="name-input" type="text" title="File name"/>
|
||||
<span id="download-btn" title="Export file">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="links-btn" title="Edit target websites">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M7.8 24c0-3.42 2.78-6.2 6.2-6.2h8v-3.8h-8c-5.52 0-10 4.48-10 10s4.48 10 10 10h8v-3.8h-8c-3.42 0-6.2-2.78-6.2-6.2zm8.2 2h16v-4h-16v4zm18-12h-8v3.8h8c3.42 0 6.2 2.78 6.2 6.2s-2.78 6.2-6.2 6.2h-8v3.8h8c5.52 0 10-4.48 10-10s-4.48-10-10-10z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="save-btn" title="Save file">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M34 6h-24c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4v-24l-8-8zm-10 32c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm6-20h-20v-8h20v8z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</header>
|
||||
<main>
|
||||
<pre id="editor"></pre>
|
||||
</main>
|
||||
<div id="links-popup">
|
||||
<header>
|
||||
<h1>Target Websites</h1>
|
||||
<span id="close-links-btn">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</header>
|
||||
<main>
|
||||
<div id="links-wrapper"></div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<script src="js/ace/ace.js"></script>
|
||||
<script src="js/storage.js"></script>
|
||||
<script src="js/file.js"></script>
|
||||
<script src="js/editor.js"></script>
|
||||
</html>
|
||||
BIN
icon.png
Normal file
BIN
icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
img/icon128.png
Normal file
BIN
img/icon128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
img/icon16.png
Normal file
BIN
img/icon16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
img/icon48.png
Normal file
BIN
img/icon48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
34
index.html
Normal file
34
index.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Custom Web</title>
|
||||
<link rel="shortcut icon" type="image/png" href="img/icon48.png">
|
||||
<link rel="stylesheet" href="css/common.css"/>
|
||||
<link rel="stylesheet" href="css/index.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="img/icon48.png"/>
|
||||
<span>Custom Web</span>
|
||||
<span id="new-file">
|
||||
<span class="btn btn-svg" id="new-up" title="Upload file">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="btn" id="new-css" title="Create stylesheet">CSS</span>
|
||||
<span class="btn" id="new-js" title="Create script">JS</span>
|
||||
<span class="btn-svg">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M38 26h-12v12h-4v-12h-12v-4h12v-12h4v12h12v4z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</header>
|
||||
<section id="files"></section>
|
||||
</body>
|
||||
<script src="js/storage.js"></script>
|
||||
<script src="js/file.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
</html>
|
||||
18
js/ace/ace.js
Normal file
18
js/ace/ace.js
Normal file
File diff suppressed because one or more lines are too long
9
js/ace/mode-css.js
Normal file
9
js/ace/mode-css.js
Normal file
File diff suppressed because one or more lines are too long
9
js/ace/mode-javascript.js
Normal file
9
js/ace/mode-javascript.js
Normal file
File diff suppressed because one or more lines are too long
9
js/ace/theme-monokai.js
Normal file
9
js/ace/theme-monokai.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
define("ace/theme/monokai",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-monokai",t.cssText=".ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)});
|
||||
(function() {
|
||||
window.require(["ace/theme/monokai"], function(m) {
|
||||
if (typeof module == "object" && typeof exports == "object" && module) {
|
||||
module.exports = m;
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
1
js/ace/worker-css.js
Normal file
1
js/ace/worker-css.js
Normal file
File diff suppressed because one or more lines are too long
1
js/ace/worker-javascript.js
Normal file
1
js/ace/worker-javascript.js
Normal file
File diff suppressed because one or more lines are too long
167
js/editor.js
Normal file
167
js/editor.js
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
let fileId = window.location.hash.substr(1);
|
||||
let file = {};
|
||||
|
||||
let enableInput = document.getElementById("enable-input");
|
||||
let nameInput = document.getElementById("name-input");
|
||||
let linksBtn = document.getElementById("links-btn");
|
||||
let saveBtn = document.getElementById("save-btn");
|
||||
let editor = ace.edit("editor");
|
||||
editor.setTheme("ace/theme/monokai");
|
||||
|
||||
File.load(fileId).then((f) => {
|
||||
let info = (file = f).info;
|
||||
enableInput.parentNode.classList.add("no-transition");
|
||||
enableInput.checked = info.enabled;
|
||||
setTimeout(()=>{enableInput.parentNode.classList.remove("no-transition")}, 0);
|
||||
nameInput.value = info.name;
|
||||
editor.setValue(info.content||"", -1);
|
||||
|
||||
if(info.type == "JS") {
|
||||
editor.session.setMode("ace/mode/javascript");
|
||||
} else {
|
||||
editor.session.setMode("ace/mode/css");
|
||||
}
|
||||
|
||||
if(info.links) {
|
||||
info.links.forEach((link) => {
|
||||
createLinkEntry(link);
|
||||
});
|
||||
createLinkEntry();
|
||||
}
|
||||
|
||||
f.onChange = function(info){
|
||||
enableInput.checked = info.enabled;
|
||||
nameInput.value = info.name;
|
||||
}
|
||||
|
||||
enableInput.addEventListener("input", editorSetEdited);
|
||||
nameInput.addEventListener("input", editorSetEdited);
|
||||
editor.session.on("change", editorSetEdited);
|
||||
});
|
||||
|
||||
function editorSetEdited() {
|
||||
saveBtn.classList.add("edited");
|
||||
}
|
||||
|
||||
/* export */
|
||||
let downloadLink = document.createElement("a");
|
||||
downloadLink.style.display = "none";
|
||||
document.body.appendChild(downloadLink);
|
||||
|
||||
let downloadBtn = document.getElementById("download-btn");
|
||||
downloadBtn.addEventListener("click", () => {
|
||||
save();
|
||||
let info = file.info;
|
||||
delete info.id;
|
||||
downloadLink.href = "data:text/json;charset=utf-8," +
|
||||
encodeURIComponent(JSON.stringify(info));
|
||||
downloadLink.download = info.name + ".json";
|
||||
downloadLink.click();
|
||||
});
|
||||
|
||||
|
||||
/* links */
|
||||
let popupActive = false;
|
||||
let popup = document.getElementById("links-popup");
|
||||
let linksWrapper = document.getElementById("links-wrapper");
|
||||
|
||||
linksBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
if(popupActive) {
|
||||
popup.style.display = "none";
|
||||
popupActive = false;
|
||||
} else {
|
||||
popup.style.display = "flex";
|
||||
popupActive = true;
|
||||
}
|
||||
});
|
||||
|
||||
function linksClose() {
|
||||
if(popupActive) {
|
||||
popup.style.display = "none";
|
||||
popupActive = false;
|
||||
save();
|
||||
}
|
||||
}
|
||||
document.getElementById("close-links-btn").
|
||||
addEventListener("click", linksClose);
|
||||
document.addEventListener("mousedown", linksClose);
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if(e.key === "Escape") { linksClose(); }
|
||||
});
|
||||
|
||||
popup.addEventListener("mousedown", (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
function createLinkEntry(link = "") {
|
||||
let empty = link == "";
|
||||
|
||||
let entry = document.createElement("div");
|
||||
entry.className = "link-entry";
|
||||
entry.innerHTML = `
|
||||
<input type="text" value="${link}" placeholder="Add a target website"/>
|
||||
<svg viewBox="0 0 24 24" title="Delete entry">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
let entryInput = entry.querySelector("input");
|
||||
entryInput.addEventListener("input", () => {
|
||||
if(empty) {
|
||||
entrySvg.style.display = "";
|
||||
empty = false;
|
||||
createLinkEntry();
|
||||
}
|
||||
editorSetEdited();
|
||||
});
|
||||
entryInput.addEventListener("blur", () => {
|
||||
if(entryInput.value == "" && !empty) {
|
||||
entry.remove();
|
||||
}
|
||||
});
|
||||
|
||||
let entrySvg = entry.querySelector("svg");
|
||||
if(empty) { entrySvg.style.display = "none"; }
|
||||
entrySvg.addEventListener("click", () => {
|
||||
if(!empty) {
|
||||
entry.remove();
|
||||
editorSetEdited();
|
||||
}
|
||||
});
|
||||
|
||||
linksWrapper.appendChild(entry);
|
||||
}
|
||||
|
||||
/* save */
|
||||
enableInput.addEventListener("change", save);
|
||||
|
||||
function save() {
|
||||
let info = file.info;
|
||||
info.enabled = enableInput.checked;
|
||||
info.name = nameInput.value;
|
||||
info.content = editor.getValue();
|
||||
|
||||
let links = [];
|
||||
let inputs = linksWrapper.querySelectorAll("input");
|
||||
if(inputs) {
|
||||
inputs.forEach((input) => {
|
||||
if(input.value != "") {
|
||||
links.push(input.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
info.links = links;
|
||||
|
||||
file.save();
|
||||
saveBtn.classList.remove("edited");
|
||||
}
|
||||
saveBtn.addEventListener("click", save);
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if(e.ctrlKey && e.key=="s") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
save();
|
||||
}
|
||||
}, true);
|
||||
94
js/file.js
Normal file
94
js/file.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
function File(id){
|
||||
let _this = this;
|
||||
if(!id) id = File.uuid();
|
||||
let info = this.info = {id, enabled:true};
|
||||
|
||||
this.changeInfo = function(i){
|
||||
for(let _i in i){
|
||||
info[_i] = i[_i];
|
||||
}
|
||||
};
|
||||
|
||||
this.save = function(){
|
||||
return new Promise(function(succ, err){
|
||||
Storage.save({[File.PREFIX+info.id]:info}).then(_ => {
|
||||
File.saveIndex(info.id, info.enabled).then(succ);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
this.onChange = function(info){}; //Placeholder function
|
||||
Storage.onChange(File.PREFIX+id, newInfo => {
|
||||
_this.changeInfo(newInfo);
|
||||
_this.onChange(newInfo);
|
||||
});
|
||||
}
|
||||
File.PREFIX = "FILE-";
|
||||
File.saveIndex = function(id, enabled){
|
||||
return new Promise((succ, err) => {
|
||||
File.loadIndex().then((index) => {
|
||||
index[id] = enabled;
|
||||
Storage.save({"INDEX":index}).then(succ);
|
||||
});
|
||||
});
|
||||
};
|
||||
File.loadIndex = function(){
|
||||
return new Promise((succ, err) => {
|
||||
Storage.load(["INDEX"]).then((result) => {
|
||||
let index = result["INDEX"] || {};
|
||||
succ(index);
|
||||
});
|
||||
});
|
||||
};
|
||||
File.uuid = function(){
|
||||
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
)
|
||||
};
|
||||
File.remove = function(id){
|
||||
return new Promise((succ, err) => {
|
||||
File.loadIndex().then((index) => {
|
||||
delete index[id];
|
||||
Storage.save({"INDEX":index}).then(_ => {
|
||||
Storage.remove([File.PREFIX+id]).then(succ);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
File.load = function(id){
|
||||
return new Promise((succ, err) => {
|
||||
let innerID = File.PREFIX+id;
|
||||
Storage.load([innerID]).then(result => {
|
||||
if(!result[innerID]) err();
|
||||
let file = new File(id);
|
||||
file.changeInfo(result[innerID]);
|
||||
succ(file);
|
||||
});
|
||||
});
|
||||
};
|
||||
File.loadAll = function(){
|
||||
return new Promise((succ, err) => {
|
||||
let files = [];
|
||||
File.loadIndex().then((index) => {
|
||||
for(let id in index){
|
||||
files.push(File.load(id));
|
||||
}
|
||||
Promise.all(files).then((files) => {
|
||||
succ(files);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
File.loadEnabled = function(){
|
||||
return new Promise((succ, err) => {
|
||||
let files = [];
|
||||
File.loadIndex().then((index) => {
|
||||
for(let id in index){
|
||||
if(index[id]) files.push(File.load(id));
|
||||
}
|
||||
Promise.all(files).then((files) => {
|
||||
succ(files);
|
||||
})
|
||||
});
|
||||
});
|
||||
};
|
||||
149
js/index.js
Normal file
149
js/index.js
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
function createFileEntry(fileObject, element){
|
||||
let info = fileObject.info;
|
||||
let file = document.createElement("div");
|
||||
file.className = "file";
|
||||
file.innerHTML = `
|
||||
<label class="check" title="Enable or disable file"><input type="checkbox" ${info.enabled?"checked='true'":""}><span></span></label>
|
||||
<span class="file-name">${info.name}</span>
|
||||
<span class="file-type">${info.type}</span>
|
||||
<div class="file-icons">
|
||||
<span class="file-icon file-edit" title="Edit file">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M6 34.5v7.5h7.5l22.13-22.13-7.5-7.5-22.13 22.13zm35.41-20.41c.78-.78.78-2.05 0-2.83l-4.67-4.67c-.78-.78-2.05-.78-2.83 0l-3.66 3.66 7.5 7.5 3.66-3.66z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="file-icon file-delete" title="Delete file">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<path d="M12 38c0 2.21 1.79 4 4 4h16c2.21 0 4-1.79 4-4v-24h-24v24zm26-30h-7l-2-2h-10l-2 2h-7v4h28v-4z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let fileName = file.querySelector(".file-name");
|
||||
let fileType = file.querySelector(".file-type");
|
||||
let fileEnable = file.querySelector("input");
|
||||
fileEnable.addEventListener("change", function(){
|
||||
info.enabled = this.checked;
|
||||
fileObject.save();
|
||||
});
|
||||
let fileEdit = file.querySelector(".file-icon.file-edit");
|
||||
fileEdit.addEventListener("click", edit);
|
||||
let fileDelete = file.querySelector(".file-icon.file-delete");
|
||||
fileDelete.addEventListener("click", function(){
|
||||
if(fileDelete.classList.contains("icon-confirm")){
|
||||
File.remove(info.id).then(function(){
|
||||
file.remove();
|
||||
});
|
||||
}else{
|
||||
fileDelete.classList.add("icon-confirm");
|
||||
setTimeout(function(){
|
||||
fileDelete.classList.remove("icon-confirm");
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
file.addEventListener("click", e => {
|
||||
if(e.target.className=="file") edit();
|
||||
});
|
||||
element.appendChild(file);
|
||||
|
||||
fileObject.onChange = function(info){
|
||||
fileEnable.checked = info.enabled;
|
||||
fileName.textContent = info.name;
|
||||
}
|
||||
|
||||
function edit(){
|
||||
chrome.tabs.create({url: chrome.runtime.getURL("editor.html#"+info.id)});
|
||||
}
|
||||
}
|
||||
|
||||
let filesElement = document.getElementById("files");
|
||||
File.loadAll().then(function(files){
|
||||
files = files.sort((a, b) => {
|
||||
if(a.info.name < b.info.name) return -1;
|
||||
if(a.info.name > b.info.name) return 1;
|
||||
return 0;
|
||||
});
|
||||
for(let i=0;i<files.length;i++){
|
||||
createFileEntry(files[i], filesElement);
|
||||
}
|
||||
});
|
||||
|
||||
let newFileJS = document.getElementById("new-js");
|
||||
newFileJS.addEventListener("click", () => {
|
||||
let f = new File();
|
||||
f.changeInfo({type: "JS", name: "New Script"});
|
||||
f.save().then(() => {
|
||||
createFileEntry(f, filesElement);
|
||||
});
|
||||
});
|
||||
|
||||
let newFileCSS = document.getElementById("new-css");
|
||||
newFileCSS.addEventListener("click", () => {
|
||||
let f = new File();
|
||||
f.changeInfo({type: "CSS", name: "New Stylesheet"});
|
||||
f.save().then(() => {
|
||||
createFileEntry(f, filesElement);
|
||||
});
|
||||
});
|
||||
|
||||
/* file input */
|
||||
function newFromFile(inFile) {
|
||||
let info = {};
|
||||
|
||||
if(inFile.type == "text/javascript") {
|
||||
info.type = "JS";
|
||||
info.name = inFile.name.match(/(.*)\..*$/);
|
||||
} else if(inFile.type == "text/css") {
|
||||
info.type = "CSS";
|
||||
info.name = inFile.name.match(/(.*)\..*$/);
|
||||
} else if(inFile.type == "application/json") {
|
||||
} else {
|
||||
alert("Unsupported file type");
|
||||
return;
|
||||
}
|
||||
|
||||
let reader = new FileReader();
|
||||
reader.addEventListener("load", () => {
|
||||
if(inFile.type == "application/json") {
|
||||
try {
|
||||
info = JSON.parse(reader.result);
|
||||
} catch(e) { alert("The uploaded json file is not valid"); }
|
||||
} else {
|
||||
info.content = reader.result;
|
||||
}
|
||||
|
||||
let f = new File();
|
||||
f.changeInfo(info);
|
||||
f.save().then(() => {
|
||||
createFileEntry(f, filesElement);
|
||||
});
|
||||
});
|
||||
reader.readAsText(inFile);
|
||||
}
|
||||
|
||||
document.body.addEventListener("dragover", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.body.classList.add("drag-over");
|
||||
});
|
||||
document.body.addEventListener("dragleave", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.body.classList.remove("drag-over");
|
||||
});
|
||||
document.body.addEventListener("drop", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.body.classList.remove("drag-over");
|
||||
newFromFile(e.dataTransfer.files[0]);
|
||||
});
|
||||
|
||||
let inputFile = document.createElement("input");
|
||||
inputFile.type = "file";
|
||||
inputFile.addEventListener("change", () => {
|
||||
newFromFile(inputFile.files[0]);
|
||||
});
|
||||
|
||||
let newFileUp = document.getElementById("new-up");
|
||||
newFileUp.addEventListener("click", () => { inputFile.click(); });
|
||||
81
js/popup.js
Normal file
81
js/popup.js
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
let addNew = document.getElementById("add-new");
|
||||
let section = document.getElementById("files");
|
||||
let manage = document.getElementById("manage");
|
||||
manage.addEventListener("click", e => {
|
||||
chrome.tabs.create({ url: chrome.runtime.getURL("index.html") });
|
||||
window.close();
|
||||
});
|
||||
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
|
||||
let tabID = tabs[0].id;
|
||||
|
||||
// Query file list
|
||||
chrome.runtime.sendMessage({tabID, action: "get-files"}, files => {
|
||||
if(!files || !files.length) return;
|
||||
files.forEach(info => {
|
||||
let file = new File(info.id);
|
||||
file.changeInfo(info);
|
||||
info = file.info;
|
||||
|
||||
let span = document.createElement("span");
|
||||
span.className = "line btn";
|
||||
span.addEventListener("click", e => {
|
||||
if(e.target.classList.contains("btn")){
|
||||
chrome.tabs.create({ url: chrome.runtime.getURL("editor.html#"+info.id)});
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
|
||||
let enable = document.createElement("label");
|
||||
enable.className = "check small";
|
||||
enable.innerHTML = `
|
||||
<input id="enable-input" type="checkbox">
|
||||
<span><span></span></span>
|
||||
`;
|
||||
let input = enable.children[0];
|
||||
input.checked = info.enabled;
|
||||
input.addEventListener("change", e => {
|
||||
file.info.enabled = input.checked;
|
||||
file.save();
|
||||
});
|
||||
span.appendChild(enable);
|
||||
|
||||
let name = document.createElement("span");
|
||||
name.className = "line-item";
|
||||
name.textContent = info.name;
|
||||
span.appendChild(name);
|
||||
|
||||
let type = document.createElement("span");
|
||||
type.className = "line-item";
|
||||
type.textContent = info.type;
|
||||
span.appendChild(type);
|
||||
|
||||
file.onChange = function(info){
|
||||
input.checked = info.enabled;
|
||||
name.textContent = info.name;
|
||||
}
|
||||
|
||||
section.appendChild(span);
|
||||
});
|
||||
});
|
||||
|
||||
// Query URL
|
||||
addNew.style.display = "none";
|
||||
chrome.runtime.sendMessage({tabID, action: "get-url"}, url => {
|
||||
if(!url) return;
|
||||
addNew.style.display = "";
|
||||
|
||||
let addJS = document.getElementById("add-js");
|
||||
let addCSS = document.getElementById("add-css");
|
||||
addJS.addEventListener("click", e =>{add("JS")});
|
||||
addCSS.addEventListener("click", e =>{add("CSS")});
|
||||
|
||||
function add(type){
|
||||
let f = new File();
|
||||
f.changeInfo({type, name: "New "+(type=="CSS"?"Stylesheet":"Script"), links:[url]});
|
||||
f.save().then(_ => {
|
||||
chrome.tabs.create({ url: chrome.runtime.getURL("editor.html#"+f.info.id)});
|
||||
window.close();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
34
js/storage.js
Normal file
34
js/storage.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
let Storage = {};
|
||||
Storage.save = function(object){
|
||||
return new Promise(function(succ, err){
|
||||
chrome.storage.sync.set(object, succ);
|
||||
});
|
||||
}
|
||||
Storage.load = function(objects){
|
||||
return new Promise(function(succ, err){
|
||||
chrome.storage.sync.get(objects, succ);
|
||||
});
|
||||
}
|
||||
Storage.remove = function(objects){
|
||||
return new Promise(function(succ, err){
|
||||
chrome.storage.sync.remove(objects, succ);
|
||||
});
|
||||
}
|
||||
Storage.callbacks = {};
|
||||
Storage.onChange = function(key, fn){
|
||||
if(!Storage.callbacks[key]) Storage.callbacks[key] = [];
|
||||
Storage.callbacks[key].push(fn);
|
||||
}
|
||||
Storage.emit = function(key, newValue){
|
||||
if(!Storage.callbacks[key]) return;
|
||||
Storage.callbacks[key].forEach(x => {
|
||||
x(newValue);
|
||||
});
|
||||
}
|
||||
chrome.storage.onChanged.addListener(function(objects, area){
|
||||
if(area!="sync") return;
|
||||
for(let id in objects){
|
||||
let newValue = objects[id].newValue;
|
||||
if(newValue) { Storage.emit(id, newValue); }
|
||||
}
|
||||
});
|
||||
33
manifest.json
Normal file
33
manifest.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "Custom Web",
|
||||
"description": "Customize web pages with scripts and styles",
|
||||
"icons": {
|
||||
"16": "img/icon16.png",
|
||||
"48": "img/icon48.png",
|
||||
"128": "img/icon128.png"
|
||||
},
|
||||
"version": "1.0.0.2",
|
||||
"manifest_version": 2,
|
||||
"permissions" : ["storage"],
|
||||
"background": {
|
||||
"scripts": ["js/storage.js", "js/file.js", "background.js"],
|
||||
"persistent": false
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["<all_urls>"],
|
||||
"all_frames": true,
|
||||
"run_at": "document_start",
|
||||
"js": [
|
||||
"js/storage.js",
|
||||
"js/file.js",
|
||||
"content.js"
|
||||
]
|
||||
}
|
||||
],
|
||||
"browser_action": {
|
||||
"default_title": "Custom Web",
|
||||
"default_icon": "img/icon128.png",
|
||||
"default_popup": "popup.html"
|
||||
}
|
||||
}
|
||||
24
popup.html
Normal file
24
popup.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="stylesheet" href="css/common.css"/>
|
||||
<link rel="stylesheet" href="css/popup.css"/>
|
||||
<title>Custom Web Popup</title>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<span id="manage" class="line btn"><img src="img/icon48.png"/><span>Manage Files</span></span>
|
||||
</section>
|
||||
<section id="add-new">
|
||||
<div class="line">
|
||||
<span id="add-js" class="btn">Add Script</span>
|
||||
<span id="add-css" class="btn">Add Style</span>
|
||||
</div>
|
||||
</section>
|
||||
<section id="files"></section>
|
||||
<script src="js/storage.js"></script>
|
||||
<script src="js/file.js"></script>
|
||||
<script src="js/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue