@statewalker/webrun-devtools
Version:
DevTools Extension for the StateWalker WebRun framework
190 lines (174 loc) • 6 kB
HTML
<html>
<head>
<title>Multiple Sites Screenshots</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>WebRun DevTools</h1>
<p><em>Pilot Browser from the Browser</em></p>
<h2>Example 2: Multi-site Screenshots</h2>
<p>This page uses the
<a href="https://github.com/statewalker/webrun-devtools" target="_blank">WebRun DevTools</a>
extension and the corresponding API to
create automatically screenshots of multiple sites.
</p>
<p>
Please install the extension as described on the
<a href="https://github.com/statewalker/webrun-devtools" target="_blank">extension page</a> and
generate an API key.
</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">
<label for="focus-window">Focus window:</label>
<input type="checkbox" name="focus-window" id="focus-window" />
</div>
<div class="form-input">
<button id="btn-run">Make Screenshots</button>
</div>
</form>
<div id="screenshots"></div>
</main>
<script type="module">
import initDevTools, { newRegistry } from "https://unpkg.com/@statewalker/webrun-devtools";
// import initDevTools, { newRegistry } 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 focusCheckbox = document.querySelector("#focus-window");
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 focusWindow = !!focusCheckbox.checked;
const urls = (textarea.value || '')
.split('\n')
.map(url => url.trim())
.filter(Boolean);
run({
apiKey,
urls,
focusWindow
});
});
}
async function run({
apiKey,
urls,
focusWindow
}) {
const [register, cleanup] = newRegistry();
const api = await initDevTools({ apiKey });
try {
const onCreated = (w) => {
console.log('A window created', w);
}
api.windows.onCreated.addListener(onCreated);
register(() => api.windows.onCreated.removeListener(onCreated));
// register(await api.windows.onCreated(onCreated))
const onRemoved = (w) => {
console.log('A window removed', w);
};
api.windows.onRemoved.addListener(onRemoved);
register(() => api.windows.onRemoved.removeListener(onRemoved));
// register(await api.windows.onRemoved(onRemoved))
const win = await api.windows.create({
url : 'about:blank',
focused : focusWindow,
width : 800,
height : 600
});
try {
document.querySelector("#screenshots").innerHTML = "";
const tab = win.tabs[0];
// console.log('A tab created', tab);
for (let url of urls) {
await api.tabs.update(tab.id, { url, active: true });
// MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND = 2
// See https://developer.chrome.com/docs/extensions/reference/tabs/#property-MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND
await new Promise(resolve => setTimeout(resolve, 600));
await makeScreenshot(api, win.id, url);
}
} finally {
await api.windows.remove(win.id);
await new Promise(resolve => setTimeout(resolve, 300));
cleanup();
}
} finally{
await api.close();
}
}
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>