I'm currently trying to make an extension for Firefox and Chrome where it converts any time in the page from 12hr to 24hr format. I have the code written but on the sites I've tested, it usually doesn't update anything, despite the console showing the times as having been. There have been a few instances where some nodes were updated, but not all of them and it isn't consistent.
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content_script.js"
],
"run_at": "document_idle",
"all_frames": true
}
]
const tags = ['p', 'div', 'span',
'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
'strong', 'em', 'blockquote',
'li', 'td', 'dt', 'dd'];
const queryStr = tags.join(', ');
const nodes = document.querySelectorAll(queryStr);
setTimeout(() => {
processNodes();
}, 2500)
const processNodes = () => nodes.forEach((node, i) => {
if (node.innerHTML.match(/((1[0-2]|0?[1-9])(:|h)([0-5][0-9]) ?([AaPp][Mm]))/)) {
console.log('==========');
console.log('Before: ');
console.log(node.innerHTML);
node.innerHTML = node.innerHTML.replace(/((1[0-2]|0?[1-9])(:|h)([0-5][0-9]) ?([AaPp][Mm]))/, (match) => {
const phase = match.substring(match.length - 2, match.length).toUpperCase();
const hSeperator = match.includes('h');
match = match.replace(/[AaPp][mM]/, '');
const hmArray = match.split(/:|h/).map(str => Number(str));
const military = hmArray[0] + (phase === 'PM' && hmArray[0] < 12 ? 12 : 0);
return `${military < 10 ? '0' + military : military}${hSeperator ? 'h' : ':'}${hmArray[1] < 10 ? '0' + hmArray[1] : hmArray[1]}`
})
console.log('After: ');
console.log(node.innerHTML);
console.log('==========')
}
});