最后一次通过Chrome扩展创建阻止点击的div,可以通过以下步骤实现:
{
"manifest_version": 2,
"name": "阻止点击的div扩展",
"version": "1.0",
"description": "阻止点击的div扩展示例",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"browser_action": {
"default_popup": "popup.html"
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
在上述示例中,我们定义了扩展的名称、版本、描述,以及需要的权限。content_scripts字段指定了在哪些网址下注入JavaScript文件,这里我们使用content.js。browser_action字段定义了扩展的图标和弹出窗口。
document.addEventListener('DOMContentLoaded', function() {
var div = document.createElement('div');
div.style.position = 'fixed';
div.style.top = '0';
div.style.left = '0';
div.style.width = '100%';
div.style.height = '100%';
div.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
div.style.zIndex = '9999';
div.style.pointerEvents = 'none';
document.body.appendChild(div);
});
上述示例代码中,我们创建了一个固定定位的div元素,并设置其样式为覆盖整个页面,背景色为半透明黑色。通过设置pointerEvents为none,可以阻止该div接收鼠标点击事件。
<!DOCTYPE html>
<html>
<head>
<title>阻止点击的div扩展</title>
<style>
body {
width: 300px;
height: 150px;
padding: 10px;
}
</style>
</head>
<body>
<h1>阻止点击的div扩展</h1>
<p>点击下方按钮启用/禁用阻止点击的div功能:</p>
<button id="toggleButton">启用</button>
<script src="popup.js"></script>
</body>
</html>
在上述示例中,我们创建了一个简单的弹出窗口,包含一个标题、一段文字和一个按钮。点击按钮可以启用或禁用阻止点击的div功能。
document.addEventListener('DOMContentLoaded', function() {
var toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {action: 'toggleDiv'});
});
});
});
上述示例代码中,我们获取了弹出窗口中的按钮元素,并为其添加了点击事件监听器。当按钮被点击时,通过chrome.tabs.sendMessage方法向当前活动的标签页发送消息,以触发content.js中的逻辑。
这样,当你点击弹出窗口中的按钮时,扩展将向当前活动的标签页注入content.js中的代码,创建一个阻止点击的div覆盖整个页面。
领取专属 10元无门槛券
手把手带您无忧上云