Add options for the added element name and contaier css selector
This commit is contained in:
parent
46452221b1
commit
387397878b
|
|
@ -1,5 +1,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="/default-options.js"></script>
|
||||
<script src="monitor.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
const defaultOptions = {
|
||||
elemName: 'p',
|
||||
containerSelector: 'body'
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 })
|
||||
})
|
||||
Loading…
Reference in New Issue