<MyRusakov.ru />

Программирование на C++ в Unreal Engine 5

Программирование на C++ в Unreal Engine 5

Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.

Параллельно с курсом Вы также будете получать домашние задания, результатом которых станет, в том числе, полноценная серьёзная работа для портфолио.

Помимо самого курса Вас ждёт ещё и очень ценный Бонус: «Тестирование Unreal-проектов на Python», в рамках которого Вы научитесь писать очень полезные тесты для тестирования самых разных аспектов разработки игр.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Пишем расширение для браузера Chrome для поиска по истории посещенных страниц

Пишем расширение для браузера Chrome для поиска по истории посещенных страниц

Доброго времени суток! В данной статье мы рассмотрим с Вами как можно написать расширение для браузера Chrome, которое позволяет осуществлять поиск по истории, при этом в расширение добавлена и фильтрация по времени.

Файловая структура проекта:


Data:.
│   history.html
│   manifest.json

├───images
│       ic_history.png

├───popup
│       popup.html
│       popup.js

└───scrips
        history.js

Для начала рассмотрим файл manifest.json:


{
    "manifest_version": 3,
    "name": "My history",
    "description": "Featured Chrome history",
    "version": "1.0",
    "action": {
      "default_popup": "popup/popup.html",
      "default_icon": "images/ic_history.png"
    },
    "permissions": [
      "history",
      "tabs",
      "activeTab"
    ]
  }

Файл popup/popup.html - отображает кнопку для открытия страницы расширения:


<!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>Hello</title>
</head>
<body>
    <div id="extension">
        <button id="openHistoryBtn">Open history</button>
    </div>
    <script src="popup.js"></script>
</body>
</html>

Файл popup/popup.js - при нажатии на кнопку в браузере откроется новое окно, которое отобразит функционал поиска по истории.



const openHistoryBtn = document.getElementById('openHistoryBtn');
openHistoryBtn.addEventListener('click', (e) => {

    chrome.tabs.create({ url: 'history.html' });
});


Теперь рассмотрим сам файл history.html, где как раз и располагается вся основная разметка приложения.



<!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>History</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-size: 1rem;
        }

        .container {
            max-width: 1368px;
            margin: 0 auto;
            padding: 0 8px;
        }

        .row {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .md:w-100 {
            width: 10%;
        }

        button {
            padding: 8px 16px;
            border: 1px solid rgb(12, 113, 245);
            border-radius: 5px;
            cursor: pointer;
        }

        .form-input {
            width: 100%;
            margin-bottom: 8px;
        }

        .form-input>* {
            display: block;
        }

        .form-input>label {
            cursor: pointer;
            margin-bottom: 8px;
        }

        input {
            width: 100%;
            padding: 8px;
            border: 1px solid rgb(12, 113, 245);
            border-radius: 5px;
        }

        input:focus {
            outline: 1px solid rgb(251, 202, 5);
        }

        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        table {
            overflow-wrap: break-word;
            table-layout: fixed;
            width: 100%;
            border: 1px solid rgb(8, 130, 237);
            text-align: center;
            margin-top: 20px;
        }

        table>tr {
            padding: 8px;
        }

        table td,
        table th {
            padding: 8px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h2>Chrome history search</h2>

            <form>
                <div class="form-input">
                    <label for="searchTermText">Search in title</label>
                    <input type="text" id="searchTermText" required />
                </div>

                <div class="row">

                    <div class="form-input">
                        <label for="searchResultsMaxCount">Search results max count</label>
                        <input type="number" id="searchResultsMaxCount" value="100" required />
                    </div>

                    <div class="form-input">
                        <label for="startTimeDateTimePicker">Start date</label>
                        <input type="date" id="startTimeDateTimePicker" style="font-size: 0.74rem" required />
                    </div>
                </div>


                <div class="row">
                    <button class="button" id="startSearchButton">Search</button>
                </div>
            </form>


            <table class="table">

                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Last visist time</th>
                        <th>title</th>
                        <th>Typed count</th>
                        <th>Url</th>
                        <th>Visit count</th>
                    </tr>
                </thead>


                <tbody id="searchResults"></tbody>

            </table>

        </div>
    </div>
    <script src="scrips/history.js"></script>
</body>

</html>

А теперь рассмотрим файл scripts/history.js:



const app = document.getElementById('app');
const searchResults = document.getElementById('searchResults');
const startSearchButton = document.getElementById('startSearchButton');



function convert_days_to_timestamp(days) {
    const microsecondsPerWeek = 1000 * 60 * 60 * 24 * days;
    return (new Date).getTime() - microsecondsPerWeek;
}


function datetime_format(timestamp) {

    if (!timestamp) return '';
    let dt_formatted = '';

    const dtFormat = new Intl.DateTimeFormat("ru", {
        weekday: "short",
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "numeric",
        minute: "numeric"
    });

    try {
        dt_formatted = dtFormat.format(new Date(timestamp));
    }
    catch (e) {
        return '';
    }

    return dt_formatted;
}


function show_history_entries(text, maxResultsCount, startTime) {
    // обращаемся к Chrome Extensions API и получаем необходимые данные
    chrome.history
        .search({
            text: text || 'google',
            maxResults: maxResultsCount || 100000,
            startTime: startTime || new Date('01/01/2022').getTime()
        })
        .then(entries => {

            const rows = entries.map(entry => {

                const values = Object.values(entry).map((value, index) => {
                    let cell = '';

                    switch (index) {
                        case 1:
                            cell = `<td>${datetime_format(value)}</td>`;
                            break;

                        case 4:
                            cell = `<td><a href="${value}">Go</a></td>`;
                            break;

                        default:
                            cell = `<td>${value}</td>`;
                            break;
                    }

                    return cell;
                });

                return `<tr>${values.join('')}</tr>`;
            })

            searchResults.innerHTML = rows.join('');
        });

}


startSearchButton.addEventListener('click', (e) => {

    e.preventDefault();

    const searchTermText = document.getElementById('searchTermText');
    const searchResultsMaxCount = document.getElementById('searchResultsMaxCount');
    const startTimeDateTimePicker = document.getElementById('startTimeDateTimePicker');

    const text = searchTermText.value.trim();
    const maxCount = Number(searchResultsMaxCount.value.trim());
    const startTime = startTimeDateTimePicker.value.trim();

    const daysAgo = Date.now() -  new Date(startTime).getTime();


    console.log(text, maxCount, daysAgo);
    show_history_entries(text, maxCount, daysAgo);

});


После всего этого, для установки расширения в браузер нужно зайти в меню установленных расширений, там выбрать галочку для разработчиков и в появившемся меню загрузить расширение из файловой системы.

Вот таким образом мы создали простое расширение для браузера Chrome, которое позволяет вести поиск по истории с дополнительными фильтрами.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.