|
1 |
| - // Function to inject the script into the current tab |
2 |
| - const inject = () => { |
3 |
| - let isInjected = false; |
4 |
| - |
5 |
| - return function(fileName: string) { |
6 |
| - if (!isInjected) { |
7 |
| - if (document.getElementById("treeScript-jkhsdfkdshdsf")) { |
8 |
| - console.log('Tree script already injected'); |
9 |
| - return; |
10 |
| - } |
11 |
| - const treeScript = document.createElement("script"); |
12 |
| - // Adding a unique id to the script tag to prevent it from being injected multiple times because my closure isn't working for some reason (not sure if it's because of how content scripts work or something else) |
13 |
| - treeScript.id = "treeScript-jkhsdfkdshdsf"; |
14 |
| - treeScript.setAttribute("type", "text/javascript"); |
15 |
| - treeScript.setAttribute("src", chrome.runtime.getURL(fileName)); |
16 |
| - document.body.appendChild(treeScript); |
17 |
| - isInjected = true; |
18 |
| - console.log('Injected tree script'); |
19 |
| - } else { |
20 |
| - console.log('Tree script already injected'); |
| 1 | +// Function to inject the script into the current tab |
| 2 | +const inject = () => { |
| 3 | + let isInjected = false; |
| 4 | + |
| 5 | + return function (fileName: string) { |
| 6 | + if (!isInjected) { |
| 7 | + if (document.getElementById('treeScript-jkhsdfkdshdsf')) { |
| 8 | + // console.log('Tree script already injected'); |
| 9 | + return; |
21 | 10 | }
|
| 11 | + const treeScript = document.createElement('script'); |
| 12 | + // Adding a unique id to the script tag to prevent it from being injected multiple times because my closure isn't working for some reason (not sure if it's because of how content scripts work or something else) |
| 13 | + treeScript.id = 'treeScript-jkhsdfkdshdsf'; |
| 14 | + treeScript.setAttribute('type', 'text/javascript'); |
| 15 | + treeScript.setAttribute('src', chrome.runtime.getURL(fileName)); |
| 16 | + document.body.appendChild(treeScript); |
| 17 | + isInjected = true; |
| 18 | + // console.log('Injected tree script'); |
| 19 | + } else { |
| 20 | + // console.log('Tree script already injected'); |
22 | 21 | }
|
23 | 22 | };
|
| 23 | +}; |
24 | 24 |
|
25 | 25 | // Immediatly-Invoked Function Expression (IIFE)
|
26 | 26 | (function () {
|
27 | 27 | // Check if the content script has already been loaded into the current tab
|
28 | 28 | // Prevents it from injecting into the same page twice if the developer opens and closes the dev tool
|
29 | 29 | if (window.myContentScriptLoaded) {
|
30 |
| - console.log("CONTENT.TS: Content script already injected"); |
| 30 | + // console.log("CONTENT.TS: Content script already injected"); |
31 | 31 | return;
|
32 | 32 | } else {
|
33 | 33 | // Set the flag on the window to indicate the content script has already been loaded in the tab
|
34 | 34 | window.myContentScriptLoaded = true;
|
35 |
| - console.log("CONTENT.TS: Loaded"); |
| 35 | + // console.log("CONTENT.TS: Loaded"); |
36 | 36 | }
|
37 | 37 |
|
38 | 38 | let appConnected = false;
|
|
44 | 44 |
|
45 | 45 | // Function to setup and initialize the background port
|
46 | 46 | function setupPort() {
|
47 |
| - console.log("CONTENT.TS: Background.ts Connected"); |
| 47 | + // console.log("CONTENT.TS: Background.ts Connected"); |
48 | 48 |
|
49 | 49 | // Connect to background script
|
50 |
| - backgroundPort = chrome.runtime.connect({ name: "content-background" }); |
| 50 | + backgroundPort = chrome.runtime.connect({ name: 'content-background' }); |
51 | 51 |
|
52 | 52 | // Handle background.ts messages - send message if connected to app otherwise add to queue
|
53 |
| - backgroundPort.onMessage.addListener((message) => { |
54 |
| - console.log("CONTENT.TS: BackgroundPort.OnMessage: ", message.data?.type); |
| 53 | + backgroundPort.onMessage.addListener(message => { |
| 54 | + // console.log("CONTENT.TS: BackgroundPort.OnMessage: ", message.data?.type); |
55 | 55 | if (appConnected) {
|
56 |
| - console.log("CONTENT.TS: Message to app", message); |
| 56 | + // console.log("CONTENT.TS: Message to app", message); |
57 | 57 | // Inject script to get react tree data
|
58 |
| - if (message.type === "profiling-status") { |
59 |
| - console.log('tree script *should* be injected'); |
| 58 | + if (message.type === 'profiling-status') { |
| 59 | + // console.log('tree script *should* be injected'); |
60 | 60 | const scriptToInject = inject();
|
61 |
| - scriptToInject("inject.js"); |
| 61 | + scriptToInject('inject.js'); |
62 | 62 | // return so message isn't posted anywhere
|
63 | 63 | return;
|
64 | 64 | }
|
|
69 | 69 | });
|
70 | 70 |
|
71 | 71 | backgroundPort.onDisconnect.addListener(() => {
|
72 |
| - console.log("CONTENT.TS: Background.ts Disconnected"); |
| 72 | + // console.log('CONTENT.TS: Background.ts Disconnected'); |
73 | 73 | // Reset the port to trigger reconnection attempt
|
74 | 74 | backgroundPort = null;
|
75 | 75 | setupPort();
|
|
82 | 82 | }
|
83 | 83 |
|
84 | 84 | // Add listener to the window to handle messages from the app
|
85 |
| - window.addEventListener("message", handleMessageFromApp, false); |
| 85 | + window.addEventListener('message', handleMessageFromApp, false); |
86 | 86 |
|
87 | 87 | function handleMessageFromApp(message: MessageEvent) {
|
88 |
| - console.log("CONTENT.TS: handleMessageFromApp", message.data?.type); |
| 88 | + // console.log('CONTENT.TS: handleMessageFromApp', message.data?.type); |
89 | 89 | // Initial message from the app to confirm connection
|
90 |
| - if (message.data?.type === "app-connected") { |
91 |
| - console.log("CONTENT.TS: App Connected"); |
| 90 | + if (message.data?.type === 'app-connected') { |
| 91 | + // console.log('CONTENT.TS: App Connected'); |
92 | 92 | clearInterval(appConnectionInterval);
|
93 | 93 | appConnected = true;
|
94 | 94 | appMessageQueue.forEach((message: any) => window.postMessage(message));
|
95 | 95 | appMessageQueue = [];
|
96 | 96 | }
|
97 | 97 |
|
98 | 98 | // Send tree data to background.ts
|
99 |
| - if (message.data.type && message.data.type === "tree") { |
100 |
| - console.log("CONTENT.ts: component tree sending event: ", message); |
| 99 | + if (message.data.type && message.data.type === 'tree') { |
| 100 | + // console.log('CONTENT.ts: component tree sending event: ', message); |
101 | 101 | backgroundPort?.postMessage({
|
102 | 102 | type: message.data.type,
|
103 | 103 | data: JSON.parse(message.data.eventListStr),
|
|
106 | 106 | }
|
107 | 107 |
|
108 | 108 | // All other messages are sent to background.ts
|
109 |
| - if (message.data?.type === "event") { |
| 109 | + if (message.data?.type === 'event') { |
110 | 110 | // console.log('CONTENT.TS: Message from App:', message);
|
111 | 111 | sendMessageToBackground(message);
|
112 | 112 | }
|
|
115 | 115 | // Notify app that content.ts is ready
|
116 | 116 | function establishAppConnection() {
|
117 | 117 | if (!appConnected) {
|
118 |
| - window.postMessage({ type: "content-script-ready" }, "*"); |
| 118 | + window.postMessage({ type: 'content-script-ready' }, '*'); |
119 | 119 | }
|
120 | 120 | }
|
121 | 121 |
|
|
125 | 125 |
|
126 | 126 | // Function to send a heartbeat message to the background script to keep it active
|
127 | 127 | function sendHeartbeat() {
|
128 |
| - backgroundPort?.postMessage({ type: "heartbeat" }); |
| 128 | + backgroundPort?.postMessage({ type: 'heartbeat' }); |
129 | 129 | // console.log('heartbeat');
|
130 | 130 | }
|
131 | 131 |
|
|
0 commit comments