@statewalker/webrun-devtools
Version:
DevTools Extension for the StateWalker WebRun framework
107 lines (93 loc) • 3.05 kB
HTML
<html>
<head>
<title>Titre de la page</title>
<style>
main {
margin: auto;
max-width: 1000px;
}
#screenshots {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
}
#screenshots .screenshot {
width: 100%;
border: 1px solid gray;
}
#screenshots .label {
text-align: center;
}
</style>
</head>
<body>
<main>
<h1>Screen-Shooter</h1>
<p>This page automatically creates screenshots of external sites.</p>
<div id="screenshots"></div>
</main>
<script type="module">
import initDevTools, { newRegistry } from "https://unpkg.com/@statewalker/webrun-devtools@0.0.12";
// import initDevTools, { newRegistry } from "../dist/webrun-devtools.js";
Promise.resolve().then(main).catch(console.error);
async function main() {
const apiKey = await prompt("Enter the debugger apiKey:", "SW_API_KEY_CHANGE_ME");
const urls = [
'https://svelte.dev/',
'https://astro.build',
'https://react.dev/',
'https://www.solidjs.com/',
'https://vuejs.org/',
'https://webdriver.io/',
];
const api = await initDevTools({ apiKey });
const windowsList = await api.windows.getAll();
async function printWindowInfo(win) {
console.log('Window', win);
const tabs = await api.tabs.query({
windowId : win.id
});
console.log('tabs', tabs);
}
for (let win of windowsList) {
await printWindowInfo(win);
}
console.log("--------------------------------");
const [register, cleanup] = newRegistry();
register(await api.windows.onCreated(async (win) => {
console.log('A window created', win);
await printWindowInfo(win);
}));
register(await api.tabs.onUpdated(async (tabId, info) => {
if (info.status !== 'complete') {
return;
}
const tab = await api.tabs.get(tabId);
console.log('A tab updated', tab);
await makeScreenshot(api, tab.windowId, tab.url);
}));
}
async function makeScreenshot(api, windowId, url) {
const imgUrl = await api.tabs.captureVisibleTab(windowId, {
format: "png"
});
const div = document.createElement('div');
document.querySelector("#screenshots").appendChild(div);
const img = document.createElement('img');
img.src = imgUrl;
img.className = 'screenshot';
div.appendChild(img);
const label = document.createElement('div');
label.className = 'label';
div.appendChild(label);
const ref = document.createElement('a');
ref.href = url;
ref.target = '_blank';
ref.className = 'label';
ref.innerText = url;
label.appendChild(ref);
}
</script>
</body>
</html>