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.
Practice typing and improve your coding skills.
With Sliplane, shipping containers becomes incredibly easy and affordable. Our Pay-per-Server model enables you to host unlimited containers on each s...
Responsive CSS framework for building custom, accessible interfaces with modular components.