@statewalker/webrun-devtools
Version:
DevTools Extension for the StateWalker WebRun framework
164 lines (148 loc) • 4.85 kB
HTML
<html>
<head>
<title>Screenshots with Debugger API</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;
}
form .form-input {
width: 500px;
margin-bottom: 1em;
display: flex;
align-items: flex-start;
align-content: stratch;
}
form .form-input label {
width: 12em;
}
form .form-input textarea {
width: 100%;
}
</style>
</head>
<body>
<main>
<h1>
Example 3: Screenshots Using the
<a href="https://developer.chrome.com/docs/extensions/reference/debugger/" target="_blank">
Debugger API
</a>
</h1>
<p>This page automatically creates screenshots of external sites using
the
<a href="https://developer.chrome.com/docs/extensions/reference/debugger/" target="_blank">
Chrome Debugger API
</a>.
It will show a top panel announcing that the browser is controlled by an extension
in the debugger mode.
</p>
<form>
<div class="form-input">
<label for="urls">Sites URLs:</label>
<textarea name="urls" id="urls" rows="10" columns="50"></textarea>
</div>
<div class="form-input">
<button id="btn-run">Make Screenshots</button>
</div>
</form>
<div id="screenshots"></div>
</main>
<script type="module">
import initDevTools from "https://unpkg.com/@statewalker/webrun-devtools";
// import initDevTools from "../dist/webrun-devtools.js";
Promise.resolve().then(main).catch(console.error);
async function main() {
const initialUrls = [
'https://svelte.dev/',
'https://astro.build',
'https://react.dev/',
'https://www.solidjs.com/',
'https://vuejs.org/',
'https://webdriver.io/',
]
let apiKey;
const btn = document.querySelector("#btn-run");
const textarea = document.querySelector("#urls");
textarea.value = initialUrls.join('\n');
btn.addEventListener("click", async (ev) => {
ev.preventDefault();
if (!apiKey) {
apiKey = await prompt("Enter the WebRun DevTools apiKey:", "SW_API_KEY_CHANGE_ME");
if (!apiKey) {
document.querySelector("#screenshots").innerHTML = "No apiKey provided. Reload the page to try again.";
return;
}
}
const urls = (textarea.value || '')
.split('\n')
.map(url => url.trim())
.filter(Boolean);
run({
apiKey,
urls
});
});
}
async function run({ apiKey, urls, focusWindow}) {
const api = await initDevTools({
apiKey
});
await api.debugger.onEvent((target, event, ...data) => {
console.log('A message from the extension', target, event, data);
})
const tab = await api.tabs.create({
url: 'about:blank',
});
const target = { tabId: tab.id };
await api.debugger.attach(target, '1.3');
try {
await api.debugger.sendCommand(target, "Page.enable");
for (let url of urls) {
await api.debugger.sendCommand(target, "Page.navigate", { url });
await api.debugger.$once(target, "Page.loadEventFired");
await new Promise(resolve => setTimeout(resolve, 300));
const { data } = await api.debugger.sendCommand(
target,
"Page.captureScreenshot",
{
format: "png"
}
);
const div = document.createElement('div');
document.querySelector("#screenshots").appendChild(div);
const img = document.createElement('img');
img.src = `data:image/png;base64,${data}`;
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);
}
} finally {
await api.debugger.detach(target);
await api.tabs.remove(tab.id);
}
}
</script>
</body>
</html>