@hatiolab/things-scene 3.4.47 → 3.4.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/monitor-extension/content.js +13 -7
- package/monitor-extension/devtools.html +33 -0
- package/monitor-extension/devtools.js +38 -8
- package/monitor-extension/injected.js +12 -15
- package/monitor-extension/popup.html +31 -0
- package/monitor-extension/popup.js +38 -8
- package/package.json +1 -1
- package/things-scene-ie.js +1 -1
- package/things-scene-min.js +1 -1
- package/things-scene.mjs +1 -1
|
@@ -5,7 +5,7 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
|
|
|
5
5
|
if (response && response.tabId) {
|
|
6
6
|
const tabId = response.tabId
|
|
7
7
|
|
|
8
|
-
function updateChart(data) {
|
|
8
|
+
function updateChart(data = {}) {
|
|
9
9
|
chrome.runtime.sendMessage({ type: 'UPDATE_CHART', tabId, data })
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -13,14 +13,20 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
|
|
|
13
13
|
if (event.source !== window || !event.data.type) return
|
|
14
14
|
|
|
15
15
|
if (event.data.type === 'RESIDENT_COUNT') {
|
|
16
|
-
const { timestamp, componentResidentsCount, sceneResidentsCount, referenceMapResidentsCount } =
|
|
16
|
+
const { timestamp, componentResidentsCount, sceneResidentsCount, sceneResidents, referenceMapResidentsCount } =
|
|
17
|
+
event.data
|
|
17
18
|
|
|
18
19
|
try {
|
|
19
20
|
chrome.storage.local.get({ residentData: {} }, result => {
|
|
20
21
|
const residentData = result.residentData || {}
|
|
21
|
-
residentData[tabId] = residentData[tabId]
|
|
22
|
+
const tabData = (residentData[tabId] = /* temporary condition */ Array.isArray(residentData[tabId])
|
|
23
|
+
? {}
|
|
24
|
+
: residentData[tabId] || {})
|
|
22
25
|
|
|
23
|
-
|
|
26
|
+
tabData.sceneResidents = sceneResidents
|
|
27
|
+
const history = (tabData.history = tabData.history || [])
|
|
28
|
+
|
|
29
|
+
history.push({
|
|
24
30
|
timestamp,
|
|
25
31
|
componentResidentsCount,
|
|
26
32
|
sceneResidentsCount,
|
|
@@ -28,13 +34,13 @@ chrome.runtime.sendMessage({ type: 'GET_TAB_INFO' }, response => {
|
|
|
28
34
|
})
|
|
29
35
|
|
|
30
36
|
// 데이터가 100개 이상일 경우 오래된 데이터 삭제
|
|
31
|
-
if (
|
|
32
|
-
|
|
37
|
+
if (history.length > 100) {
|
|
38
|
+
history.shift()
|
|
33
39
|
}
|
|
34
40
|
|
|
35
41
|
chrome.storage.local.set({ residentData }, () => {
|
|
36
42
|
try {
|
|
37
|
-
updateChart(
|
|
43
|
+
updateChart(tabData)
|
|
38
44
|
} catch (e) {
|
|
39
45
|
console.error('Error updating chart:', e)
|
|
40
46
|
}
|
|
@@ -17,13 +17,35 @@
|
|
|
17
17
|
min-height: 800px;
|
|
18
18
|
box-sizing: border-box;
|
|
19
19
|
}
|
|
20
|
+
|
|
20
21
|
canvas {
|
|
21
22
|
flex: 1;
|
|
22
23
|
border: 1px solid #000;
|
|
23
24
|
border-radius: 4px;
|
|
24
25
|
width: 100%;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
max-height: 200px;
|
|
25
28
|
box-sizing: border-box;
|
|
26
29
|
}
|
|
30
|
+
|
|
31
|
+
table {
|
|
32
|
+
flex: 1;
|
|
33
|
+
width: 100%;
|
|
34
|
+
border-collapse: collapse;
|
|
35
|
+
margin-top: 20px;
|
|
36
|
+
overflow: auto;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
th,
|
|
40
|
+
td {
|
|
41
|
+
padding: 8px;
|
|
42
|
+
text-align: left;
|
|
43
|
+
border-bottom: 1px solid #ddd;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
th {
|
|
47
|
+
background-color: #f2f2f2;
|
|
48
|
+
}
|
|
27
49
|
</style>
|
|
28
50
|
</head>
|
|
29
51
|
<body>
|
|
@@ -31,5 +53,16 @@
|
|
|
31
53
|
<canvas id="residentChart1"></canvas>
|
|
32
54
|
<canvas id="residentChart2"></canvas>
|
|
33
55
|
<canvas id="residentChart3"></canvas>
|
|
56
|
+
|
|
57
|
+
<!-- sceneResidents 데이터를 보여줄 테이블 -->
|
|
58
|
+
<h2>Scene Residents Data</h2>
|
|
59
|
+
<table id="residentsTable">
|
|
60
|
+
<tr>
|
|
61
|
+
<th>Type</th>
|
|
62
|
+
<th>Up</th>
|
|
63
|
+
<th>Down</th>
|
|
64
|
+
<th>Difference (Up - Down)</th>
|
|
65
|
+
</tr>
|
|
66
|
+
</table>
|
|
34
67
|
</body>
|
|
35
68
|
</html>
|
|
@@ -1,21 +1,48 @@
|
|
|
1
1
|
chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', function (panel) {
|
|
2
|
-
var residentChart1, residentChart2, residentChart3
|
|
2
|
+
var residentChart1, residentChart2, residentChart3, residentsTable
|
|
3
3
|
var listenerRegistered = false
|
|
4
4
|
var chartsInitialized = false
|
|
5
5
|
|
|
6
6
|
// 차트 업데이트 함수
|
|
7
|
-
const updateCharts =
|
|
8
|
-
residentChart1.data.labels =
|
|
9
|
-
residentChart1.data.datasets[0].data =
|
|
7
|
+
const updateCharts = ({ sceneResidents, history }) => {
|
|
8
|
+
residentChart1.data.labels = history.map(entry => entry.timestamp)
|
|
9
|
+
residentChart1.data.datasets[0].data = history.map(entry => entry.componentResidentsCount)
|
|
10
10
|
residentChart1.update()
|
|
11
11
|
|
|
12
|
-
residentChart2.data.labels =
|
|
13
|
-
residentChart2.data.datasets[0].data =
|
|
12
|
+
residentChart2.data.labels = history.map(entry => entry.timestamp)
|
|
13
|
+
residentChart2.data.datasets[0].data = history.map(entry => entry.sceneResidentsCount)
|
|
14
14
|
residentChart2.update()
|
|
15
15
|
|
|
16
|
-
residentChart3.data.labels =
|
|
17
|
-
residentChart3.data.datasets[0].data =
|
|
16
|
+
residentChart3.data.labels = history.map(entry => entry.timestamp)
|
|
17
|
+
residentChart3.data.datasets[0].data = history.map(entry => entry.referenceMapResidentsCount)
|
|
18
18
|
residentChart3.update()
|
|
19
|
+
|
|
20
|
+
updateResidentsTable(sceneResidents)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// sceneResidents 테이블 업데이트 함수
|
|
24
|
+
const updateResidentsTable = sceneResidents => {
|
|
25
|
+
if (typeof sceneResidents !== 'object') {
|
|
26
|
+
return
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const table = residentsTable
|
|
30
|
+
table.innerHTML = '' // 기존 테이블 내용을 지움
|
|
31
|
+
|
|
32
|
+
// 테이블 헤더 생성
|
|
33
|
+
const headerRow = document.createElement('tr')
|
|
34
|
+
headerRow.innerHTML = '<th>Type</th><th>Up</th><th>Down</th><th>Difference (Up - Down)</th>'
|
|
35
|
+
table.appendChild(headerRow)
|
|
36
|
+
|
|
37
|
+
// sceneResidents 데이터로 테이블 행 생성
|
|
38
|
+
for (const [type, residents] of Object.entries(sceneResidents)) {
|
|
39
|
+
const { up, down } = residents
|
|
40
|
+
const row = document.createElement('tr')
|
|
41
|
+
const difference = up - down
|
|
42
|
+
row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
|
|
43
|
+
|
|
44
|
+
table.appendChild(row)
|
|
45
|
+
}
|
|
19
46
|
}
|
|
20
47
|
|
|
21
48
|
// 차트 초기화 함수
|
|
@@ -36,6 +63,7 @@ chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', func
|
|
|
36
63
|
]
|
|
37
64
|
},
|
|
38
65
|
options: {
|
|
66
|
+
responsive: true,
|
|
39
67
|
animation: false, // 애니메이션 비활성화
|
|
40
68
|
scales: {
|
|
41
69
|
x: {
|
|
@@ -75,6 +103,8 @@ chrome.devtools.panels.create('Scene', 'icons/icon48.png', 'devtools.html', func
|
|
|
75
103
|
residentChart2 = createChart(ctx2, 'Scene Residents Count')
|
|
76
104
|
residentChart3 = createChart(ctx3, 'ReferenceMap Residents Count')
|
|
77
105
|
|
|
106
|
+
residentsTable = window.document.getElementById('residentsTable')
|
|
107
|
+
|
|
78
108
|
chartsInitialized = true
|
|
79
109
|
}
|
|
80
110
|
|
|
@@ -1,28 +1,25 @@
|
|
|
1
1
|
function logComponentResidents() {
|
|
2
|
-
const componentResidentsCount = window.scene.Component?.residentsCount || 0
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
const timestamp = new Date().toISOString()
|
|
7
|
-
|
|
8
|
-
console.log(
|
|
9
|
-
`Component Residents Count: ${componentResidentsCount}, Scene Residents Count: ${sceneResidentsCount}, ReferenceMap Residents Count: ${referenceMapResidentsCount} at ${timestamp}`
|
|
10
|
-
);
|
|
2
|
+
const componentResidentsCount = window.scene.Component?.residentsCount || 0
|
|
3
|
+
const sceneResidents = window.scene.Component?.residents || {}
|
|
4
|
+
const sceneResidentsCount = window.scene.Scene?.residentsCount || 0
|
|
5
|
+
const referenceMapResidentsCount = window.scene.ReferenceMap?.residentsCount || 0
|
|
6
|
+
const timestamp = new Date().toISOString()
|
|
11
7
|
|
|
12
8
|
window.postMessage(
|
|
13
9
|
{
|
|
14
|
-
type:
|
|
10
|
+
type: 'RESIDENT_COUNT',
|
|
15
11
|
timestamp,
|
|
16
12
|
componentResidentsCount,
|
|
17
13
|
sceneResidentsCount,
|
|
18
|
-
|
|
14
|
+
sceneResidents,
|
|
15
|
+
referenceMapResidentsCount
|
|
19
16
|
},
|
|
20
|
-
|
|
21
|
-
)
|
|
17
|
+
'*'
|
|
18
|
+
)
|
|
22
19
|
}
|
|
23
20
|
|
|
24
21
|
setTimeout(() => {
|
|
25
22
|
if (window.scene) {
|
|
26
|
-
setInterval(logComponentResidents, 5000)
|
|
23
|
+
setInterval(logComponentResidents, 5000)
|
|
27
24
|
}
|
|
28
|
-
}, 5000)
|
|
25
|
+
}, 5000)
|
|
@@ -24,8 +24,28 @@
|
|
|
24
24
|
border: 1px solid #000;
|
|
25
25
|
border-radius: 4px;
|
|
26
26
|
width: 100%;
|
|
27
|
+
max-height: 200px;
|
|
27
28
|
box-sizing: border-box;
|
|
28
29
|
}
|
|
30
|
+
|
|
31
|
+
table {
|
|
32
|
+
flex: 1;
|
|
33
|
+
width: 100%;
|
|
34
|
+
border-collapse: collapse;
|
|
35
|
+
margin-top: 20px;
|
|
36
|
+
overflow: auto;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
th,
|
|
40
|
+
td {
|
|
41
|
+
padding: 8px;
|
|
42
|
+
text-align: left;
|
|
43
|
+
border-bottom: 1px solid #ddd;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
th {
|
|
47
|
+
background-color: #f2f2f2;
|
|
48
|
+
}
|
|
29
49
|
</style>
|
|
30
50
|
</head>
|
|
31
51
|
<body>
|
|
@@ -33,5 +53,16 @@
|
|
|
33
53
|
<canvas id="residentChart1"></canvas>
|
|
34
54
|
<canvas id="residentChart2"></canvas>
|
|
35
55
|
<canvas id="residentChart3"></canvas>
|
|
56
|
+
|
|
57
|
+
<!-- sceneResidents 데이터를 보여줄 테이블 -->
|
|
58
|
+
<h2>Scene Residents Data</h2>
|
|
59
|
+
<table id="residentsTable">
|
|
60
|
+
<tr>
|
|
61
|
+
<th>Type</th>
|
|
62
|
+
<th>Up</th>
|
|
63
|
+
<th>Down</th>
|
|
64
|
+
<th>Difference (Up - Down)</th>
|
|
65
|
+
</tr>
|
|
66
|
+
</table>
|
|
36
67
|
</body>
|
|
37
68
|
</html>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
document.addEventListener('DOMContentLoaded', () => {
|
|
2
|
-
let residentChart1, residentChart2, residentChart3
|
|
2
|
+
let residentChart1, residentChart2, residentChart3, residentsTable
|
|
3
3
|
let chartsInitialized = false
|
|
4
4
|
let listenerRegistered = false
|
|
5
5
|
|
|
@@ -29,6 +29,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
29
29
|
]
|
|
30
30
|
},
|
|
31
31
|
options: {
|
|
32
|
+
responsive: true,
|
|
32
33
|
animation: false, // 애니메이션 비활성화
|
|
33
34
|
scales: {
|
|
34
35
|
x: {
|
|
@@ -70,22 +71,51 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
70
71
|
residentChart2 = createChart(ctx2, 'Scene Residents Count')
|
|
71
72
|
residentChart3 = createChart(ctx3, 'ReferenceMap Residents Count')
|
|
72
73
|
|
|
74
|
+
residentsTable = window.document.getElementById('residentsTable')
|
|
75
|
+
|
|
73
76
|
chartsInitialized = true // 차트가 초기화되었음을 표시
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
// 차트 업데이트 함수
|
|
77
|
-
const updateCharts =
|
|
78
|
-
residentChart1.data.labels =
|
|
79
|
-
residentChart1.data.datasets[0].data =
|
|
80
|
+
const updateCharts = ({ sceneResidents, history }) => {
|
|
81
|
+
residentChart1.data.labels = history.map(entry => entry.timestamp)
|
|
82
|
+
residentChart1.data.datasets[0].data = history.map(entry => entry.componentResidentsCount)
|
|
80
83
|
residentChart1.update()
|
|
81
84
|
|
|
82
|
-
residentChart2.data.labels =
|
|
83
|
-
residentChart2.data.datasets[0].data =
|
|
85
|
+
residentChart2.data.labels = history.map(entry => entry.timestamp)
|
|
86
|
+
residentChart2.data.datasets[0].data = history.map(entry => entry.sceneResidentsCount)
|
|
84
87
|
residentChart2.update()
|
|
85
88
|
|
|
86
|
-
residentChart3.data.labels =
|
|
87
|
-
residentChart3.data.datasets[0].data =
|
|
89
|
+
residentChart3.data.labels = history.map(entry => entry.timestamp)
|
|
90
|
+
residentChart3.data.datasets[0].data = history.map(entry => entry.referenceMapResidentsCount)
|
|
88
91
|
residentChart3.update()
|
|
92
|
+
|
|
93
|
+
updateResidentsTable(sceneResidents)
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// sceneResidents 테이블 업데이트 함수
|
|
97
|
+
const updateResidentsTable = sceneResidents => {
|
|
98
|
+
if (typeof sceneResidents !== 'object') {
|
|
99
|
+
return
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
const table = residentsTable
|
|
103
|
+
table.innerHTML = '' // 기존 테이블 내용을 지움
|
|
104
|
+
|
|
105
|
+
// 테이블 헤더 생성
|
|
106
|
+
const headerRow = document.createElement('tr')
|
|
107
|
+
headerRow.innerHTML = '<th>Type</th><th>Up</th><th>Down</th><th>Difference (Up - Down)</th>'
|
|
108
|
+
table.appendChild(headerRow)
|
|
109
|
+
|
|
110
|
+
// sceneResidents 데이터로 테이블 행 생성
|
|
111
|
+
for (const [type, residents] of Object.entries(sceneResidents)) {
|
|
112
|
+
const { up, down } = residents
|
|
113
|
+
const row = document.createElement('tr')
|
|
114
|
+
const difference = up - down
|
|
115
|
+
row.innerHTML = `<td>${type}</td><td>${up}</td><td>${down}</td><td>${difference}</td>`
|
|
116
|
+
|
|
117
|
+
table.appendChild(row)
|
|
118
|
+
}
|
|
89
119
|
}
|
|
90
120
|
|
|
91
121
|
// 저장된 데이터 가져오기 및 초기 로딩
|