Here is the HTML code for the web page:
<!-- The entire webpage -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Iframes Remover</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- The Chrome Extension's popup -->
<div class="popup">
<h2>Auto Iframes Remover</h2>
<button id="start-button">Start</button>
</div>
<!-- The content of the webpage -->
<script>
// The function that removes all iframes on the current page
function removeIframes() {
const iframes = document.querySelectorAll('iframe');
for (const iframe of iframes) {
iframe.remove();
}
}
// Add an event listener to the start button
document.getElementById('start-button').addEventListener('click', () => {
removeIframes();
});
// Remove all iframes on page load
removeIframes();
// The function that generates a barcode
function generateBarcode() {
const inputs = document.querySelectorAll('#barcode-inputs input');
let value = '';
for (const input of inputs) {
value += input.value;
}
const barcode = `<img src="https://api.barcode.io/v1/qr/${value}" width="100" height="100">`;
return barcode;
}
// Add an event listener to the first barcode input
document.getElementById('barcode-inputs').addEventListener('input', () => {
const barcodeImage = generateBarcode();
document.body.innerHTML += '<img src="' + barcodeImage + '"> ';
});
</script>
</body>
</html>
And here is a simple CSS file (styles.css) to style the popup:
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#start-button {
cursor: pointer;
margin-bottom: 20px;
}
This code creates a simple Chrome Extension that removes all iframes on the current webpage when you click the "Start" button in the popup.
Note: You will need to create a new directory for your extension and add this HTML, CSS, and JavaScript files inside it. Also, you'll need to load the Chrome Extension's manifest file (manifest.json) which is not shown here.
The Data Landing Zone (DLZ) is a CDK Construct designed to create a landing zone tailored for supporting and enabling AI, data-driven, data mesh, and...
JetClient provides everything you need to design, test, and debug APIs right inside your JetBrains IDE. Work completely offline, with Git sync ensurin...
SMS notifications for your application errors. Instant setup, easy usage.