Skip to content

Commit 15ad731

Browse files
jrosengrantjrosengrant
committed
rolled back some loading error fixes to get back to a more stable place. removed all new context Click events, brought onActivated code ba
ck, and undid new port connection testing in content script, and removed script checking if statement in content script
1 parent 4353107 commit 15ad731

File tree

3 files changed

+132
-143
lines changed

3 files changed

+132
-143
lines changed

‎src/app/components/ErrorMsg.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,6 @@ function ErrorMsg({ loadingArray, status, launchContent, reinitialize }): JSX.El
7676
NOTE: The React Developer Tools extension is required for Reactime to run, if you do not
7777
already have it installed on your browser.
7878
</a>
79-
<button type='button' className='launchContentButton' onClick={reinitialize}>
80-
{' '}
81-
Reinitialize{' '}
82-
</button>
8379
</div>
8480
);
8581
case 'Not React App':

‎src/extension/background.js‎

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -518,28 +518,28 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
518518
});
519519

520520
// when tab view is changed, put the tabid as the current tab
521-
// chrome.tabs.onActivated.addListener((info) => {
522-
// // get info about tab information from tabId
523-
// chrome.tabs.get(info.tabId, (tab) => {
524-
// // never set a reactime instance to the active tab
525-
// if (!tab.pendingUrl?.match('^chrome-extension')) {
526-
// activeTab = tab;
527-
// console.log('background tabs.onActivated has fired. activeTab: ', JSON.stringify(activeTab));
528-
// console.log(
529-
// 'background tabs.onActivated will send changeTab message to frontend if portsArr is > 0: ',
530-
// Object.keys(portsArr),
531-
// );
532-
// if (portsArr.length > 0) {
533-
// portsArr.forEach((bg) =>
534-
// bg.postMessage({
535-
// action: 'changeTab',
536-
// payload: { tabId: tab.id, title: tab.title },
537-
// }),
538-
// );
539-
// }
540-
// }
541-
// });
542-
// });
521+
chrome.tabs.onActivated.addListener((info) => {
522+
// get info about tab information from tabId
523+
chrome.tabs.get(info.tabId, (tab) => {
524+
// never set a reactime instance to the active tab
525+
if (!tab.pendingUrl?.match('^chrome-extension')) {
526+
activeTab = tab;
527+
console.log('background tabs.onActivated has fired. activeTab: ', JSON.stringify(activeTab));
528+
console.log(
529+
'background tabs.onActivated will send changeTab message to frontend if portsArr is > 0: ',
530+
Object.keys(portsArr),
531+
);
532+
if (portsArr.length > 0) {
533+
portsArr.forEach((bg) =>
534+
bg.postMessage({
535+
action: 'changeTab',
536+
payload: { tabId: tab.id, title: tab.title },
537+
}),
538+
);
539+
}
540+
}
541+
});
542+
});
543543

544544
// when reactime is installed
545545
// create a context menu that will open our devtools in a new window
@@ -584,46 +584,47 @@ chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
584584
if (menuItemId === 'reactime') chrome.windows.create(options);
585585
});
586586
//JR 12.20.23
587-
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
588-
console.log('onContext click tab info', tabs, new Date().toLocaleString());
589-
if (tabs.length) {
590-
const invokedTab = tabs[0];
591-
const invokedTabId = invokedTab.id;
592-
const invokedTabTitle = invokedTab.title;
593-
tabsObj[invokedTabId] = createTabObj(invokedTabTitle);
594-
console.log('onContextClick tabsObj created ', tabsObj);
595-
activeTab = invokedTab;
596-
597-
// inject backend script
598-
const injectScript = (file, tab) => {
599-
const htmlBody = document.getElementsByTagName('body')[0];
600-
const script = document.createElement('script');
601-
script.setAttribute('id', 'reactime-backend-script');
602-
script.setAttribute('type', 'text/javascript');
603-
script.setAttribute('src', file);
604-
// eslint-disable-next-line prefer-template
605-
htmlBody.appendChild(script);
606-
};
607-
608-
console.log('background is injecting the backend script', new Date().toLocaleString());
609-
chrome.scripting.executeScript({
610-
target: { tabId: invokedTabId },
611-
func: injectScript,
612-
args: [chrome.runtime.getURL('bundles/backend.bundle.js'), invokedTabId],
613-
});
587+
//JR 1.8.23: this code fixes the no target error (still gets stuck on reactdevtools installed check), but creates an error where the addNewSnapshots reducer has an error.
588+
// chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
589+
// console.log('onContext click tab info', tabs, new Date().toLocaleString());
590+
// if (tabs.length) {
591+
// const invokedTab = tabs[0];
592+
// const invokedTabId = invokedTab.id;
593+
// const invokedTabTitle = invokedTab.title;
594+
// tabsObj[invokedTabId] = createTabObj(invokedTabTitle);
595+
// console.log('onContextClick tabsObj created ', tabsObj);
596+
// activeTab = invokedTab;
597+
598+
// inject backend script
599+
// const injectScript = (file, tab) => {
600+
// const htmlBody = document.getElementsByTagName('body')[0];
601+
// const script = document.createElement('script');
602+
// script.setAttribute('id', 'reactime-backend-script');
603+
// script.setAttribute('type', 'text/javascript');
604+
// script.setAttribute('src', file);
605+
// // eslint-disable-next-line prefer-template
606+
// htmlBody.appendChild(script);
607+
// };
608+
609+
// console.log('background is injecting the backend script', new Date().toLocaleString());
610+
// chrome.scripting.executeScript({
611+
// target: { tabId: invokedTabId },
612+
// func: injectScript,
613+
// args: [chrome.runtime.getURL('bundles/backend.bundle.js'), invokedTabId],
614+
// });
614615

615-
console.log('contextclick invokedTab url, ', invokedTab.url, 'portsArr: ', portsArr);
616-
if (!invokedTab.url?.match('^chrome-extension')) {
617-
if (portsArr.length > 0) {
618-
portsArr.forEach((bg) => {
619-
console.log('contextClick is sending change Tab message to ', bg);
620-
bg.postMessage({
621-
action: 'changeTab',
622-
payload: { tabId: invokedTabId, title: invokedTabTitle },
623-
});
624-
});
625-
}
626-
}
627-
}
628-
});
616+
// console.log('contextclick invokedTab url, ', invokedTab.url, 'portsArr: ', portsArr);
617+
// if (!invokedTab.url?.match('^chrome-extension')) {
618+
// if (portsArr.length > 0) {
619+
// portsArr.forEach((bg) => {
620+
// console.log('contextClick is sending change Tab message to ', bg);
621+
// bg.postMessage({
622+
// action: 'changeTab',
623+
// payload: { tabId: invokedTabId, title: invokedTabTitle },
624+
// });
625+
// });
626+
// }
627+
// }
628+
// }
629+
// });
629630
});

‎src/extension/contentScript.ts‎

Lines changed: 68 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ let firstMessage = true;
1010
// Listens for window messages (from the injected script on the DOM)
1111
let isRecording = true;
1212

13-
let backgroundPort = chrome.runtime.connect({ name: 'content-script' });
14-
1513
// INCOMING MESSAGE FROM BACKEND (index.ts) TO CONTENT SCRIPT
1614
window.addEventListener('message', (msg) => {
1715
// Event listener runs constantly based on actions
@@ -21,7 +19,7 @@ window.addEventListener('message', (msg) => {
2119
console.log('message sent to window event listener: ', msg.data);
2220
if (firstMessage) {
2321
// One-time request tells the background script that the tab has reloaded.
24-
backgroundPort.postMessage({ action: 'tabReload' });
22+
chrome.runtime.sendMessage({ action: 'tabReload' });
2523
firstMessage = false;
2624
}
2725

@@ -30,89 +28,83 @@ window.addEventListener('message', (msg) => {
3028
const { action }: { action: string } = msg.data;
3129
if (action === 'recordSnap') {
3230
if (isRecording) {
33-
backgroundPort.postMessage(msg.data);
31+
chrome.runtime.sendMessage(msg.data);
3432
}
3533
}
3634
if (action === 'devToolsInstalled') {
37-
backgroundPort.postMessage(msg.data);
35+
chrome.runtime.sendMessage(msg.data);
3836
}
3937
if (action === 'aReactApp') {
40-
backgroundPort.postMessage(msg.data);
38+
chrome.runtime.sendMessage(msg.data);
4139
}
4240
});
4341

44-
chrome.runtime.onConnect.addListener((port) => {
45-
if (port.name === 'content-script') {
46-
// FROM BACKGROUND TO CONTENT SCRIPT
47-
// Listening for messages from the UI of the Reactime extension.
48-
port.onMessage.addListener((request) => {
49-
console.log(
50-
'contentScript received message from background.js. request.action: ',
51-
request.action,
52-
'request.port',
53-
request.port,
54-
);
55-
const { action, port }: { action: string; port?: string } = request;
56-
if (action) {
57-
// Message being sent from background.js
58-
// This is toggling the record button on Reactime when clicked
59-
if (action === 'toggleRecord') {
60-
isRecording = !isRecording;
61-
}
62-
// this is only listening for Jump toSnap
63-
if (action === 'jumpToSnap') {
64-
backgroundPort.postMessage(request);
65-
// After the jumpToSnap action has been sent back to background js,
66-
// it will send the same action to backend files (index.ts) for it execute the jump feature
67-
// '*' == target window origin required for event to be dispatched, '*' = no preference
68-
window.postMessage(request, '*');
69-
}
42+
// FROM BACKGROUND TO CONTENT SCRIPT
43+
// Listening for messages from the UI of the Reactime extension.
44+
chrome.runtime.onMessage.addListener((request) => {
45+
console.log(
46+
'contentScript received message from background.js. request.action: ',
47+
request.action,
48+
'request.port',
49+
request.port,
50+
);
51+
const { action, port }: { action: string; port?: string } = request;
52+
if (action) {
53+
// Message being sent from background.js
54+
// This is toggling the record button on Reactime when clicked
55+
if (action === 'toggleRecord') {
56+
isRecording = !isRecording;
57+
}
58+
// this is only listening for Jump toSnap
59+
if (action === 'jumpToSnap') {
60+
chrome.runtime.sendMessage(request);
61+
// After the jumpToSnap action has been sent back to background js,
62+
// it will send the same action to backend files (index.ts) for it execute the jump feature
63+
// '*' == target window origin required for event to be dispatched, '*' = no preference
64+
window.postMessage(request, '*');
65+
}
7066

71-
// JR: adding a response to a port disconnection message from background.js
72-
if (action === 'portDisconnect') {
73-
console.log(`Port ${port} disconnected!`);
74-
}
67+
// JR: adding a response to a port disconnection message from background.js
68+
if (action === 'portDisconnect') {
69+
console.log(`Port ${port} disconnected!`);
70+
}
7571

76-
if (action === 'reinitialize') {
77-
console.log('contentscript reinitialize received, forwarding to backend');
78-
window.postMessage(request, '*');
79-
}
80-
}
81-
});
72+
if (action === 'reinitialize') {
73+
console.log('contentscript reinitialize received, forwarding to backend');
74+
window.postMessage(request, '*');
75+
}
76+
}
77+
});
8278

83-
// Performance metrics being calculated by the 'web-vitals' api and
84-
// sent as an object to background.js.
85-
// To learn more about Chrome web vitals, see https://web.dev/vitals/.
86-
const metrics = {};
87-
const gatherMetrics = ({ name, value }) => {
88-
console.log(
89-
'contentScript gatherMetrics: prior metrics Obj: ',
90-
metrics,
91-
'name: ',
92-
name,
93-
'value: ',
94-
value,
95-
);
96-
metrics[name] = value;
97-
backgroundPort.postMessage({
98-
type: 'performance:metric',
99-
name,
100-
value,
101-
});
102-
};
79+
// Performance metrics being calculated by the 'web-vitals' api and
80+
// sent as an object to background.js.
81+
// To learn more about Chrome web vitals, see https://web.dev/vitals/.
82+
const metrics = {};
83+
const gatherMetrics = ({ name, value }) => {
84+
console.log(
85+
'contentScript gatherMetrics: prior metrics Obj: ',
86+
metrics,
87+
'name: ',
88+
name,
89+
'value: ',
90+
value,
91+
);
92+
metrics[name] = value;
93+
chrome.runtime.sendMessage({
94+
type: 'performance:metric',
95+
name,
96+
value,
97+
});
98+
};
10399

104-
// Functions that calculate web metric values.
105-
onTTFB(gatherMetrics);
106-
onLCP(gatherMetrics);
107-
onFID(gatherMetrics);
108-
onFCP(gatherMetrics);
109-
onCLS(gatherMetrics);
110-
onINP(gatherMetrics);
100+
// Functions that calculate web metric values.
101+
onTTFB(gatherMetrics);
102+
onLCP(gatherMetrics);
103+
onFID(gatherMetrics);
104+
onFCP(gatherMetrics);
105+
onCLS(gatherMetrics);
106+
onINP(gatherMetrics);
111107

112-
// Send message to background.js for injecting the initial script
113-
// into the app's DOM.
114-
// JR added 1.6.24: check if script injected, if not then inject.
115-
const scriptInjected = document.querySelector('#reactime-backend-script') ? true : false;
116-
if (!scriptInjected) chrome.runtime.sendMessage({ action: 'injectScript' });
117-
}
118-
});
108+
// Send message to background.js for injecting the initial script
109+
// into the app's DOM.
110+
chrome.runtime.sendMessage({ action: 'injectScript' });

0 commit comments

Comments
 (0)