📅 最后修改于: 2023-12-03 15:12:25.118000 🧑 作者: Mango
在现代Web开发中，模态框已经成为一种非常流行的交互方式。模态框弹出时，会阻止用户与页面上的其他元素进行任何交互，直到用户关闭模态框为止。模态框通常用于请求用户输入一些数据或从用户收集信息，以便执行某些特定操作。
在本文中，我们将探讨如何使用扩展来注入模态页面。我们将学习使用JavaScript和CSS将模态页面添加到现有的Web应用程序中，并确保模态页面在响应其他用户输入时不会停止工作。
要开始使用扩展注入模态页面，您需要做以下准备工作:
首先，我们需要创建一个HTML页面。这个页面将包含我们需要显示的内容以及一些样式信息。让我们从以下代码开始：
<!DOCTYPE html>
<html>
<head>
<title>Modal Page</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #efefef;
height: 100vh;
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 2rem;
}
</style>
</head>
<body>
<h1>Modal Page</h1>
</body>
</html>
上述代码包含一个标题元素，其显示一个文字”Modal Page”。我们还建立了一个基本的样式，包括一些常规的样式和一些特定于标题的样式。现在，让我们给页面添加更多的内容和样式，以使其看起来更像一个模态框。
<!DOCTYPE html>
<html>
<head>
<title>Modal Page</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0.5);
height: 100vh;
overflow: hidden;
}
.modal {
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
padding: 20px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="modal">
<h1>Modal Page</h1>
<p>Hello World!</p>
<button id="closeModal">Close</button>
</div>
<script>
document.getElementById('closeModal').addEventListener('click', function() {
window.close();
});
</script>
</body>
</html>
现在，我们添加了一个名为“modal”的div元素，该元素具有一些样式，以使其看起来像一个模态框。我们还添加了一些文本内容和一个名为“closeModal”的按钮，以便用户可以关闭模态框。
注意代码片段中，我们在页面中添加了JavaScript脚本，该脚本监听“关闭”按钮的点击事件，并在用户单击该按钮时关闭模态框。
现在我们已经创建了一个模态页面，接下来让我们看看如何使用扩展将该页面注入到现有的Web应用程序中。
首先，我们需要创建一个新的Web扩展。我们将使用Firefox浏览器作为我们的开发环境，但是其他现代浏览器也有类似的扩展API。
在您的工作目录中创建一个新目录，并在该目录中创建一个名为“manifest.json”的文件。此文件是扩展的主要配置文件，我们需要在该文件中指定扩展的名称、图标、版本号等信息。
{
"manifest_version": 2,
"name": "Modal Injection Extension",
"version": "1.0",
"description": "Injects a modal page into a web application",
"icons": {
"48": "icons/icon-48.png",
"96": "icons/icon-96.png"
},
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content.js"
],
"css": [
"modal.css"
]
}
]
}
在上面的代码片段中，我们定义了扩展的各种属性。例如，扩展名称为“Modal Injection Extension” ，版本号为“1.0”，并且扩展描述信息是“Injects a modal page into a web application”。此外，我们还指定了扩展的图标文件和权限。
最重要的是manifest文件中，我们还定义了“content_scripts”属性 ，它指定了要将什么JavaScript和CSS文件注入到特定于URL的Web页面中。在本示例中，我们指定了所有URL。如果您想仅将模态页面注入到特定URL，则可以为“matches”属性指定一个特定的URL模式。
下一步是创建JavaScript文件，该文件将在Web页面中注入模态页面。我们将在扩展目录中创建一个名为“content.js”的文件，并将以下代码添加到其中：
var modalDiv = document.createElement('div');
modalDiv.classList.add('modal');
var modalHtml = '<h1>Modal Page</h1>' +
'<p>Hello World!</p>' +
'<button id="closeModal">Close</button>';
modalDiv.innerHTML = modalHtml;
document.body.appendChild(modalDiv);
document.getElementById('closeModal').addEventListener('click', function() {
window.close();
});
上述代码片段创建一个新的div元素，将其添加到页面的body元素中，并使用上一节中创建的HTML和CSS来装饰它。还添加了一个名为“closeModal”的按钮，该按钮使用JavaScript监听器将调用window.close（）来关闭模态框。
最后，我们还需要一个名为“modal.css”的css样式文件来应用于模态页面。在扩展目录中创建一个该文件，并使用以下样式：
body {
overflow: hidden !important;
}
.modal {
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
padding: 20px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}
此样式类似于我们在前面的HTML示例中看到的样式，它将模态页面添加到屏幕的中央，并添加了一些装饰元素（如边框和阴影）。
现在，我们已经创建了扩展，并将其JavaScript和CSS文件添加到扩展中，让我们拖动扩展文件夹到浏览器中，然后打开一个新标签页或者到其他网站页面。模态页面应该会被注入在页面的中央。
使用扩展注入模态页面是一种流行的Web开发方式。这种方式使我们可以在任何网站的上下文环境中引入任何自定义页面，从而扩展了Web应用程序的功能。在本文中，我们学习了如何创建一个基本的模态页面，并使用Firefox扩展API将其注入到特定的网站中。