[ADD] tools: create owl-devtools extension

This commit adds the code of the owl devtools extension. This extension can be added on chrome or on firefox for developpers to be able to inspect the contents of all owl applications that are present on any web page, see all the components, interract with them and their content to some extend and perform a bit of profiling with their renders.
2025-10-06 19:59:41 +07:00 · 2023-01-20 13:59:27 +01:00
parent a9323c3fcd
commit ef5e4a0637
62 changed files with 11578 additions and 2087 deletions
@@ -0,0 +1,103 @@
+import { IS_FIREFOX, getActiveTabURL } from "./utils";
+
+let owlStatus = 0;
+
+const browserInstance = IS_FIREFOX ? browser : chrome;
+
+// Used to keep track of the tabs where the owl devtools have been opened
+const activePanels = new Set();
+
+// Load the devtools global hook this way when running on manifest v3 chrome
+if (!IS_FIREFOX) {
+  chrome.scripting.registerContentScripts([
+    {
+      id: "owlDevtoolsGLobalHook",
+      matches: ["<all_urls>"],
+      js: ["page_scripts/owl_devtools_global_hook.js"],
+      world: chrome.scripting.ExecutionWorld.MAIN,
+    },
+  ]);
+}
+
+// Update the owlStatus variable and the extension icon accordingly
+function setOwlStatus(status) {
+  owlStatus = status;
+  if (IS_FIREFOX) {
+    browser.browserAction.setIcon({
+      path: owlStatus === 2 ? "assets/icon128.png" : "assets/icon_disabled128.png",
+    });
+  } else {
+    browserInstance.action.setIcon({
+      path: owlStatus === 2 ? "assets/icon128.png" : "assets/icon_disabled128.png",
+    });
+  }
+}
+
+// Delete from the set when the tab is closed
+browserInstance.tabs.onRemoved.addListener((tabId) => {
+  activePanels.delete(tabId);
+});
+
+// Check owl status on tab update
+browserInstance.tabs.onUpdated.addListener((tab) => {
+  browserInstance.tabs.get(tab, (tabData) => {
+    if (tabData.status === "complete") {
+      setOwlStatus(0);
+      checkOwlStatus(tabData.id);
+    }
+  });
+});
+
+// Check owl status on tab activation
+browserInstance.tabs.onActivated.addListener((activeInfo) => {
+  setOwlStatus(0);
+  checkOwlStatus(activeInfo.tabId);
+});
+
+// send a message to the window which will be intercepted by the page script and will result in a response of type owlStatus
+function checkOwlStatus(tabId) {
+  browserInstance.scripting.executeScript({
+    target: { tabId: tabId },
+    func: () => {
+      window.postMessage({
+        source: "owl-devtools-background",
+        type: "checkOwlStatus",
+      });
+    },
+  });
+}
+
+// Messages handler for the background script
+browserInstance.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
+  // Send back the owl status to the sender
+  if (message.type === "getOwlStatus") {
+    sendResponse({ result: owlStatus });
+    return true;
+  } else if (message.type === "owlStatus") {
+    setOwlStatus(message.data);
+    // Dummy message to test if the extension context is still valid
+  } else if (message.type === "keepAlive") {
+    return;
+    // Relay the received message to the devtools app
+  } else if (message.type === "newDevtoolsPanel") {
+    const tab = await getActiveTabURL();
+    activePanels.add(tab);
+    // This is solely for firefox which doesnt allow access to the chrome.tabs api inside devtools
+  } else if (message.type === "getActiveTabURL") {
+    getActiveTabURL().then((tab) => {
+      sendResponse({ result: tab });
+    });
+    return true;
+  } else {
+    const tab = await getActiveTabURL();
+    if (!activePanels.has(tab)) {
+      return;
+    }
+    const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort" });
+    port.postMessage(
+      message.data
+        ? { type: message.type, data: message.data, origin: message.origin }
+        : { type: message.type, origin: message.origin }
+    );
+  }
+});