Add options for the added element name and contaier css selector

This commit is contained in:
Kamil Tomala 2017-08-11 20:42:18 +02:00
parent 46452221b1
commit 387397878b
8 changed files with 72 additions and 5 deletions

View File

@ -1,5 +1,6 @@
<html>
<head>
<script src="/default-options.js"></script>
<script src="monitor.js"></script>
</head>
<body>

View File

@ -3,6 +3,21 @@ console.log("I'm alive")
let previousContent = ""
let listeningTabs = []
let timer = null
let options = defaultOptions
browser.storage.local.get(defaultOptions)
.then(o => options = o)
browser.storage.onChanged.addListener((changes, area) => {
if(area === "local") {
const optionKeys = Object.keys(options)
for(key of Object.keys(changes)) {
if(optionKeys.indexOf(key) >= 0) {
options[key] = changes[key].newValue
}
}
}
})
browser.browserAction.onClicked.addListener(() => {
browser.tabs.query({active: true})
@ -20,14 +35,14 @@ function toggleTab(id) {
browser.tabs.executeScript({file: "/fg/insert.js"})
listeningTabs.push(id)
updateTimer()
browser.browserAction.setBadgeText({ text: "ON", tabId: id })
browser.browserAction.setBadgeBackgroundColor({ color: "green", tabId: id })
browser.browserAction.setBadgeText({ text: "ON", tabId: id })
}
}
function notifyForeground(id, text) {
browser.tabs.sendMessage(id, {
action: "insert", text
action: "insert", text, options
})
}

4
default-options.js Normal file
View File

@ -0,0 +1,4 @@
const defaultOptions = {
elemName: 'p',
containerSelector: 'body'
}

View File

@ -2,9 +2,9 @@
const processMessage = msg => {
switch(msg.action) {
case "insert":
const elem = document.createElement('p')
const elem = document.createElement(msg.options.elemName)
elem.textContent = msg.text
document.querySelector("body").appendChild(elem)
document.querySelector(msg.options.containerSelector).appendChild(elem)
break
case "uninject":
browser.runtime.onMessage.removeListener(processMessage)

7
forms-min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -9,7 +9,8 @@
"permissions": [
"activeTab",
"clipboardRead"
"clipboardRead",
"storage"
],
"browser_action": {
@ -24,5 +25,9 @@
"background": {
"page": "bg/index.html"
},
"options_ui": {
"page": "options.html"
}
}

22
options.html Normal file
View File

@ -0,0 +1,22 @@
<html>
<head>
<meta charset="utf-8"/>
<script src="default-options.js"></script>
<script src="options.js"></script>
<link href="forms-min.css" rel="stylesheet"/>
</head>
<body>
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="elem-name">Element name </label>
<input id="elem-name" type="text"/>
</div>
<div class="pure-control-group">
<label for="container-selector">Container selector </label>
<input id="container-selector" type="text"/>
</div>
</fieldset>
</form>
</body>
</html>

13
options.js Normal file
View File

@ -0,0 +1,13 @@
document.addEventListener("DOMContentLoaded", () => {
const elemName = document.querySelector("#elem-name"),
containerSelector = document.querySelector("#container-selector")
const storage = browser.storage.local
storage.get(defaultOptions).then(o => {
elemName.value = o.elemName
containerSelector.value = o.containerSelector
})
elemName.onchange = () => storage.set({ elemName: elemName.value })
containerSelector.onchange = () => storage.set({ containerSelector: containerSelector.value })
})