Browse Source

Added loading of process items on browser action load, and handling of removing/opening items

master
Teknikode 3 years ago
parent
commit
7dcf0e8700
5 changed files with 106 additions and 25 deletions
  1. 2
    2
      manifest.json
  2. 49
    7
      scripts/background.js
  3. 2
    2
      scripts/common.js
  4. 47
    9
      scripts/popup.js
  5. 6
    5
      views/popup.html

+ 2
- 2
manifest.json View File

@@ -1,6 +1,6 @@
{
"manifest_version": 2,
"name": "Teknik Extender",
"name": "Teknik Services Extender",
"version": "1.0",

"description": "Allows easy methods to utilize the Teknik Services.",
@@ -26,7 +26,7 @@
"16": "images/favicon-16.png",
"48": "images/favicon-48.png"
},
"default_title": "Teknik Upload",
"default_title": "Teknik Services",
"default_popup": "views/popup.html"
},


+ 49
- 7
scripts/background.js View File

@@ -1,7 +1,8 @@
/*
-------- Global State Variable ---------
*/
var processCount = 0;
var processedItemTotal = 0;
var itemList = [];

/*
Create all the context menu items.
@@ -53,17 +54,58 @@ browser.contextMenus.onClicked.addListener(function(info, tab) {
}
});

// Handle messages to the background processor
browser.runtime.onMessage.addListener(processMessage);

function processMessage(msg, sender, sendResponse) {
switch (msg.cmd) {
case 'progress': // Get the progress of an item
break;
case 'add-item': //
console.log('Added ' + msg.type + ' Item: ' + msg.value);
break;
case 'del-item':
delProcessItem(msg.id);
sendResponse(true);
break;
case 'get-item':
break;
case 'get-all-items':
sendResponse(itemList);
break;
}
}

// Updates the process item list
function addProcessItem(type, url) {
console.log('Added ' + type + ': ' + url);
// Update the process count
processCount++;
// Update the total process count
processedItemTotal++;
// Create a new object for this process and add it to the main list
var item = { id: processedItemTotal, type: type, url: url };
itemList.push(item);
// Update Badge
browser.browserAction.setBadgeText({text: processCount.toString()});
updateBadge();
}

function delProcessItem(id) {
// Remove the item from the master list
itemList = itemList.filter(function(item) {
return item.id !== id;
});
// add the item to the browser action
var sending = browser.runtime.sendMessage({cmd: 'add-item', type: type, value: url});
sending.then(onResponse, onError);
// Update Badge
updateBadge();
}

function updateBadge() {
if (itemList.length === 0) {
browser.browserAction.setBadgeText({text: ''});
}
else {
browser.browserAction.setBadgeText({text: itemList.length.toString()});
}
}

+ 2
- 2
scripts/common.js View File

@@ -27,7 +27,7 @@ Called when there was a response.
We'll just log the response here.
*/
function onResponse(msg) {
console.log('Response: ${msg}');
console.log('Response: ' + msg);
}

/*
@@ -35,7 +35,7 @@ Called when there was an error.
We'll just log the error here.
*/
function onError(error) {
console.log('Error: ${error}');
console.log('Error: ' + error);
}

function notify(title, message) {

+ 47
- 9
scripts/popup.js View File

@@ -5,15 +5,53 @@ $(document).ready(function () {
});
});

browser.runtime.onMessage.addListener(processMessage);
// When loaded, call the background to add processes
var sendingMessage = browser.runtime.sendMessage({
cmd: 'get-all-items'
});
sendingMessage.then(fillItems, onError);

function processMessage(msg) {
switch (msg.cmd) {
case 'progress':
console.log('Current ' + msg.type + ' Progress: ' + msg.value + '%');
break;
case 'add-item':
console.log('Added ' + msg.type + ' Item: ' + msg.value);
break;
function fillItems(items) {
if (items == null || items.length == 0) {
// no items available
}
else {
// Add a div for each item
items.forEach(function(item) {
if ($('#process-item-' + item.id).length) {
// It already exists, so let's update it
var itemDiv = $('#process-item-' + item.id);
itemDiv.find('#process-type').html(item.type);
itemDiv.find('#process-url').html(item.url);
}
else {
var itemDiv = $('#process-item-template');
itemDiv.attr('id', 'process-item-' + item.id);
itemDiv.find('#process-type').html(item.type);
itemDiv.find('#process-url').html(item.url);
itemDiv.find('#open').click(function () {
openItem(item.url);
});
itemDiv.find('#remove').click(function () {
clearItem(item.id);
});
// Add to the main div
$('#process-list').append(itemDiv);
}
});
}
}

function clearItem(itemId) {
var msg = browser.runtime.sendMessage({ cmd: 'del-item', id: itemId });
msg.then(function() {
$('#process-item-' + itemId).remove();
}, onError);
}

function openItem(url) {
browser.tabs.create({ url: url });
}

+ 6
- 5
views/popup.html View File

@@ -11,7 +11,7 @@

<body>
<div class="panel">
<div id="process-list">No Items</div>
<div id="process-list"></div>
<div id="extraTools">
<button id="settings">Settings</button>
</div>
@@ -19,21 +19,22 @@
<div id="templates" style="display: none">
<div id="process-item-template">
<div id="process-item" class="panel-section panel-section-header">
<div class="text-section-header" id="process-type"/>
<div class="panel-section panel-section-header">
<div class="text-section-header" id="process-type"></div>
<div class="text-section-header" id="url"></div>
</div>
<div class="panel-section panel-section-footer">
<div id="open" class="panel-section-footer-button">Open</div>
<button id="open" class="panel-section-footer-button">Open</button>
<div class="panel-section-footer-separator"></div>
<div id="remove" class="panel-section-footer-button default">Remove</div>
<button id="remove" class="panel-section-footer-button default">Remove</button>
</div>
</div>
</div>
<script type="application/javascript" src="../scripts/JQuery/jquery-3.1.1.min.js"></script>
<script type="application/javascript" src="../scripts/Mozilla/browser-polyfill.js"></script>
<script type="application/javascript" src="../scripts/common.js"></script>
<script type="application/javascript" src="../scripts/popup.js"></script>
</body>


Loading…
Cancel
Save