Check print job status
Task 5
20 minutes
Note: An event is fired when the status of the job is changed. This is only fired for the jobs created by this extension.
Next, you’ll create a table to show all print jobs from this extension in the printers.html
.
Update your printers.html with the following code:
<!doctype html>
<html>
<head>
<title>Printers</title>
<link href="printers.css" rel="stylesheet" type="text/css" />
<script src="printers.js"></script>
</head>
<body>
<h2>Print Job:</h2>
<p>
On some systems, the print job may leave the queue too quickly to be
visible in this list.
</p>
<div id="printJob">
<table id="printJobTable">
<thread>
<tr>
<th>Cancel</th>
<th>Job Id</th>
<th>Status</th>
</tr>
</thread>
<tbody id="printJobTbody"></tbody>
</table>
</div>
<h2>Printers:</h2>
<div id="printers">
<table id="printersTable">
<thead>
<tr>
<th>Print</th>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>URI</th>
<th>Source</th>
<th>Default</th>
<th>Recently used</th>
<th>Capabilities</th>
<th>Supports trim</th>
<th>Status</th>
</tr>
</thead>
<tbody id="tbody" />
</table>
</div>
</body>
</html>
Next, add a listener in printers.js
to handle the job status change event and update the jobs table:
function addCell(parent) {
const newCell = document.createElement('td');
parent.appendChild(newCell);
return newCell;
}
function onPrintButtonClicked(printerId, dpi, performTrim) {
/* ... submit the print job code added in the previous step ... */
chrome.printing.onJobStatusChanged.addListener((jobId, status) => {
console.log(`jobId: ${jobId}, status: ${status}`);
let jobTr = document.getElementById(jobId);
if (jobTr == undefined) {
jobTr = document.createElement('tr');
jobTr.setAttribute('id', jobId);
const cancelTd = addCell(jobTr);
let cancelBtn = createButton('Cancel', () => {
onCancelButtonClicked(jobId);
});
cancelBtn.setAttribute('id', `id ${jobId}-cancelBtn`);
cancelTd.appendChild(cancelBtn);
const jobIdTd = addCell(jobTr);
jobIdTd.appendChild(document.createTextNode(jobId));
let jobStatusTd = addCell(jobTr);
jobStatusTd.id = `${jobId}-status`;
jobStatusTd.appendChild(document.createTextNode(status));
document.getElementById('printJobTbody').appendChild(jobTr);
} else {
document.getElementById(`${jobId}-status`).innerText = status;
if (status !== 'PENDING' && status !== 'IN_PROGRESS') {
jobTr.remove();
}
}
});
}