[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.
This commit is contained in:
Julien Carion
2023-01-20 13:59:27 +01:00
committed by Géry Debongnie
parent a9323c3fcd
commit ef5e4a0637
62 changed files with 11578 additions and 2087 deletions
+30
View File
@@ -0,0 +1,30 @@
import globalHook from "./page_scripts/owl_devtools_global_hook";
import { IS_FIREFOX } from "./utils";
// Relays the owlDevtools__... type top window messages to the background script so that it can relay it to the devtools app
window.addEventListener(
"message",
function (event) {
if (event.data.type && event.data.source === "owl-devtools") {
try {
chrome.runtime.sendMessage(
event.data.data
? { type: event.data.type, data: event.data.data, origin: event.data.origin }
: { type: event.data.type, origin: event.data.origin }
);
} catch (e) {
// Extension context invalidated, cannot be handled here since the whole communication system
// inside the extension is dead in this case.
}
}
},
false
);
// Load the devtools global hook this way when running on firefox
if (IS_FIREFOX) {
const script = document.createElement("script");
script.textContent = globalHook;
document.documentElement.appendChild(script);
script.parentNode.removeChild(script);
}