|
1 | 1 | /* global chrome */ |
2 | 2 |
|
3 | | -const compress = (text) => text.replace(/\s+/g, '') |
| 3 | +// Don't process HTTP response bodies over 30MB |
| 4 | +const MAX_BODY_SIZE_BYTES = 30 * 1024 * 1024 |
4 | 5 |
|
5 | | -const maxBodyLength = 3000000 // 3MB |
6 | | - |
7 | | -const style = compress(` |
8 | | - pre { |
9 | | - display:none |
10 | | - } |
11 | | - #promformat { |
12 | | - font-family: monospace; |
13 | | - word-wrap: break-word; |
14 | | - white-space: pre-wrap; |
15 | | - } |
16 | | - .comment { |
17 | | - color: #6a737d; |
18 | | - display: inline-block; |
19 | | - } |
20 | | - br + .comment { |
21 | | - padding-top: 1em; |
22 | | - } |
23 | | - .comment + br + .comment { |
24 | | - padding-top: 0; |
25 | | - } |
26 | | -
|
27 | | - .metric { color: #000 } |
28 | | - .value { color: #ff20ed } |
29 | | - .label-key { color: blue } |
30 | | - .label-value { color: green } |
31 | | - `) |
32 | | - |
33 | | -const port = chrome.runtime.connect({ name: 'promformat' }) |
34 | | - |
35 | | -// Add listener to receive response from BG when ready |
36 | | -port.onMessage.addListener(msg => { |
37 | | - switch (msg.name) { |
38 | | - case 'FORMATTED' : |
39 | | - // Insert CSS |
40 | | - const promformatStyle = document.createElement('style') |
41 | | - document.head.appendChild(promformatStyle) |
42 | | - promformatStyle.insertAdjacentHTML('beforeend', style) |
43 | | - |
44 | | - // Insert HTML content |
45 | | - const promformatContent = document.createElement('div') |
46 | | - promformatContent.id = 'promformat' |
47 | | - document.body.appendChild(promformatContent) |
48 | | - |
49 | | - promformatContent.innerHTML = msg.payload |
50 | | - break |
51 | | - |
52 | | - default : |
53 | | - throw new Error(`Message not understood: ${msg.name}`) |
54 | | - } |
55 | | -}) |
56 | | - |
57 | | -function ready (data) { |
| 6 | +const sendBodyToFormatter = (storedData) => { |
58 | 7 | // Check if it is a Prometheus plain text response |
59 | 8 | // This is quite a basic assumption, as the browser cannot access the |
60 | 9 | // 'version' part of the content type to verify. |
61 | | - const paths = data.paths.length ? data.paths : [] |
62 | | - |
63 | 10 | if (document.contentType !== 'text/plain') { |
| 11 | + port.disconnect() |
64 | 12 | return |
65 | 13 | } |
66 | 14 |
|
67 | | - for (var i = 0; i < paths.length; ++i) { |
68 | | - if (document.location.pathname.match(paths[i])) { |
69 | | - format() |
70 | | - break |
71 | | - } |
| 15 | + // Check if the current page's paths matches one of our whitelist |
| 16 | + if (!storedData.paths.some(path => document.location.pathname.match(path))) { |
| 17 | + port.disconnect() |
| 18 | + return |
72 | 19 | } |
73 | | -} |
74 | 20 |
|
75 | | -function format () { |
76 | | - // Check if plain text wrapped in <pre> element exists and doesn't exceed maxBodyLength |
| 21 | + // Check if plain text wrapped in <pre> element exists and doesn't exceed |
| 22 | + // MAX_BODY_SIZE_BYTES |
77 | 23 | const pre = document.body.querySelector('pre') |
78 | 24 | const rawBody = pre && pre.innerText |
79 | 25 |
|
80 | | - if (!rawBody || rawBody.length > maxBodyLength) { |
| 26 | + if (!rawBody || rawBody.length > MAX_BODY_SIZE_BYTES) { |
81 | 27 | port.disconnect() |
82 | 28 | return |
83 | 29 | } |
84 | 30 |
|
85 | 31 | // Post the contents of the PRE |
86 | 32 | port.postMessage({ |
87 | | - name: 'SENDING TEXT', |
| 33 | + name: 'PROMETHEUS_METRICS_RAW_BODY', |
88 | 34 | payload: rawBody |
89 | 35 | }) |
90 | 36 | } |
91 | 37 |
|
| 38 | +const renderFormattedHTML = (html) => { |
| 39 | + const style = ` |
| 40 | + pre { |
| 41 | + display:none |
| 42 | + } |
| 43 | + #promformat { |
| 44 | + font-family: monospace; |
| 45 | + word-wrap: break-word; |
| 46 | + white-space: pre-wrap; |
| 47 | + } |
| 48 | + .comment { |
| 49 | + color: #6a737d; |
| 50 | + display: inline-block; |
| 51 | + } |
| 52 | + br + .comment { |
| 53 | + padding-top: 1em; |
| 54 | + } |
| 55 | + .comment + br + .comment { |
| 56 | + padding-top: 0; |
| 57 | + } |
| 58 | +
|
| 59 | + .metric { color: #000 } |
| 60 | + .value { color: #ff20ed } |
| 61 | + .label-key { color: blue } |
| 62 | + .label-value { color: green } |
| 63 | + ` |
| 64 | + |
| 65 | + // Insert CSS |
| 66 | + const promformatStyle = document.createElement('style') |
| 67 | + document.head.appendChild(promformatStyle) |
| 68 | + promformatStyle.insertAdjacentHTML('beforeend', style) |
| 69 | + |
| 70 | + // Insert HTML content |
| 71 | + const promformatContent = document.createElement('div') |
| 72 | + promformatContent.id = 'promformat' |
| 73 | + document.body.appendChild(promformatContent) |
| 74 | + |
| 75 | + promformatContent.innerHTML = html |
| 76 | +} |
| 77 | + |
| 78 | +const port = chrome.runtime.connect({ name: 'promformat' }) |
| 79 | + |
| 80 | +// Add listener to receive response from background when ready |
| 81 | +port.onMessage.addListener(msg => { |
| 82 | + if (msg.name !== 'PROMETHEUS_METRICS_FORMATTED_BODY') { |
| 83 | + return |
| 84 | + } |
| 85 | + |
| 86 | + renderFormattedHTML(msg.payload) |
| 87 | +}) |
| 88 | + |
92 | 89 | document.addEventListener('DOMContentLoaded', () => { |
93 | | - chrome.storage.sync.get({ paths: [] }, ready) |
| 90 | + chrome.storage.sync.get({ paths: [] }, sendBodyToFormatter) |
94 | 91 | }) |
0 commit comments