Successfully piped Mezzurite timing events from the inspected page to the DevTools panel and showed it to the user.
This commit is contained in:
C. Naoto Abreu Takemura
Родитель
f5eecece98
Коммит
4272628ab0
|
|
@ -4,6 +4,12 @@ chrome.runtime.onInstalled.addListener(onInstalled);
|
|||
|
||||
function onInstalled() {
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
// TODO: add event filtering and handling for messages to be handled by the background script
|
||||
console.log(`BG: Got a message! ${message}, ${sender}, ${sendResponse}`);
|
||||
|
||||
if (message.action === "bg_mountContentScript") {
|
||||
chrome.tabs.executeScript(message.tabId, {
|
||||
file: 'content.js'
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
// This script will be run in the context of the inspected window
|
||||
// It will have shared access to the DOM, but not global variables
|
||||
// like window. That is isolated. This is why we inject the
|
||||
// additional script
|
||||
|
||||
document.addEventListener('MezzuriteTiming_toExtension', (timingEvent) => {
|
||||
// Forward the event to the Mezzurite DevTools panel
|
||||
console.log(`CS: Got a timing event! ${timingEvent}`);
|
||||
console.log(timingEvent);
|
||||
chrome.runtime.sendMessage({
|
||||
action: "timing",
|
||||
payload: timingEvent.detail
|
||||
});
|
||||
});
|
||||
|
||||
injectScript('injected.js');
|
||||
|
||||
////////////////////////////////
|
||||
|
||||
function injectScript(filepath) {
|
||||
const bodyTag = document.getElementsByTagName('body')[0];
|
||||
const scriptTag = document.createElement('script');
|
||||
scriptTag.setAttribute('type', 'text/javascript');
|
||||
scriptTag.setAttribute('src', chrome.extension.getURL(filepath));
|
||||
bodyTag.appendChild(scriptTag);
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
// This script will be run within the context of the inspected page
|
||||
// as a <script> tag with full access to the DOM and window objects.
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// We assume that by the time we inject this script,
|
||||
// the extension has already verified the existence of `window.mezzurite`.
|
||||
if (!window.mezzurite.EventElement) {
|
||||
window.mezzurite.EventElement = {};
|
||||
window.mezzurite.EventElement = document.createTextNode("");
|
||||
}
|
||||
|
||||
window.mezzurite.EventElement.addEventListener('Timing', (timingEvent) => {
|
||||
//chrome.runtime.sendMessage({action: "timing", value: e});
|
||||
// No access to chrome dev tools or chrome APIs
|
||||
// Need to forward these messages via some DOM element
|
||||
// to the content script that injected this function in the first place.
|
||||
|
||||
const eventToContentScript = new CustomEvent('MezzuriteTiming_toExtension', {
|
||||
detail: timingEvent.detail
|
||||
});
|
||||
|
||||
// This call to setTimeOut with 0 delay schedules this call to occur after
|
||||
// already existing events in the browser's queue, which includes rendering events.
|
||||
// This is to minimize the performance impact on the page due to the extension.
|
||||
setTimeout(() => document.dispatchEvent(eventToContentScript), 0);
|
||||
});
|
||||
})();
|
||||
|
|
@ -11,6 +11,14 @@
|
|||
},
|
||||
"devtools_page": "main.html",
|
||||
"permissions": [
|
||||
"tabs"
|
||||
"activeTab",
|
||||
"tabs",
|
||||
"file:///*",
|
||||
"http://*/*",
|
||||
"https://*/*"
|
||||
],
|
||||
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
|
||||
"web_accessible_resources": [
|
||||
"injected.js"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="panel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Mezzurite Developer Tools</h2>
|
||||
<p>Your content goes here.</p>
|
||||
<!-- This is where the DevTools extension's SPA (React) will mount. -->
|
||||
<div id="container">
|
||||
<h2>Mezzurite Developer Tools</h2>
|
||||
<div id="mezzurite-found"></div>
|
||||
<ul id="timings"></ul>
|
||||
</div>
|
||||
<script src="panel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
64
src/panel.js
64
src/panel.js
|
|
@ -1 +1,63 @@
|
|||
// TODO: JS for interactivity within the panel
|
||||
'use strict';
|
||||
|
||||
getMezzuriteObject((result, exceptionInfo) => {
|
||||
const strNotFound = "Mezzurite has not been detected on this page";
|
||||
const strFound = "Mezzurite has been detected on this page";
|
||||
|
||||
if (result === undefined) {
|
||||
updateMezzuriteFoundStatus(strNotFound);
|
||||
} else {
|
||||
updateMezzuriteFoundStatus(strFound);
|
||||
}
|
||||
|
||||
listenForTimingEvents();
|
||||
|
||||
// Tell the background page to programmatically inject the content script.
|
||||
tellBackgroundToMountContentScript();
|
||||
});
|
||||
|
||||
////////////////////////////////
|
||||
|
||||
function updateMezzuriteFoundStatus(text) {
|
||||
document.getElementById("mezzurite-found").innerHTML = text;
|
||||
}
|
||||
|
||||
////////////////////////////////
|
||||
|
||||
/**
|
||||
* This is a callback function signature for handling the response that
|
||||
* is asynchronously returned by `chrome.devtools.inspectedWindow.eval()`.
|
||||
* @callback evalCallback
|
||||
* @param {Object} result - The result of the evaluated statement.
|
||||
* @param {Object} exceptionInfo - The exception details, if present.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Attempts to get the `window.mezzurite` object from the inspected window.
|
||||
* @param {evalCallback} callback - The callback that handles the response.
|
||||
*/
|
||||
function getMezzuriteObject(callback) {
|
||||
const expression = `window.mezzurite`;
|
||||
chrome.devtools.inspectedWindow.eval(expression, callback);
|
||||
}
|
||||
|
||||
function listenForTimingEvents() {
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
console.log(`DT: Got a message! ${message}, ${sender}, ${sendResponse}`);
|
||||
|
||||
if (message.action === "timing") {
|
||||
message.payload.Timings.forEach(timing => {
|
||||
const item = document.createElement('li');
|
||||
item.appendChild(document.createTextNode(timing.metricType + ", " + timing.value + ", " + timing.data))
|
||||
document.getElementById("timings").appendChild(item);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function tellBackgroundToMountContentScript() {
|
||||
chrome.runtime.sendMessage({
|
||||
action: "bg_mountContentScript",
|
||||
tabId: chrome.devtools.inspectedWindow.tabId
|
||||
});
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче