Для создания расширения для браузера, вам понадобится выполнить следующие шаги:
1. Создайте папку для расширения. Внутри этой папки создайте файл manifest.json. В нем вы определите необходимые метаданные и настройки вашего расширения.
2. В файле manifest.json укажите имя и версию расширения, а также его иконку и другие настройки. Например:
```json
{
"manifest_version": 2,
"name": "Название расширения",
"version": "1.0",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
```
3. Создайте файл popup.html, в котором определите разметку и стили для всплывающего окна (popup). Например:
```html
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<link rel="stylesheet" href="popup.css">
<script src="popup.js"></script>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>
```
4. Создайте файл popup.css, в котором определите стили для всплывающего окна. Например:
```css
h1 {
color: red;
}
```
5. Создайте файл popup.js, в котором определите JavaScript-код для выполнения необходимой логики. Например, для вывода сообщения в окне popup.html:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var popup = document.querySelector('h1');
popup.textContent = 'Привет, мир!';
});
```
6. Теперь при запуске вашего расширения должно появиться всплывающее окно с текстом "Привет, мир!".
Чтобы вывести результат выполнения JavaScript-кода в popup.html или в новое модальное окно в расширении для браузера, вам потребуется добавить код в файл popup.js для обращения к элементам на странице и изменения их содержимого или стилей. Например, можно использовать методы document.querySelector или document.getElementById для получения элемента по его id или классу, и далее использовать свойства элемента для установки нужных значений.