Блог

Я пишу расширение Chrome для календаря Google, которое добавляет div в раздел заголовка календаря Google.

Для простоты это то, что по сути происходит в скрипте содержимого расширения Chrome, вы можете просто вставить этот код в консоль calendar.google.com чтобы проверить, что происходит:

 let header = document.querySelector("header[role='banner']");
let appContainer = document.createElement('DIV');
appContainer.style.height = '200px';
appContainer.style.backgroundColor = 'red';
header.parentNode.insertBefore(appContainer, header.nextSibling);
 

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

У кого-нибудь есть идея, как сохранить стабильную страницу после создания или отмены события в представлении календаря, а также сохранить div, который я добавляю через скрипт содержимого расширения Chrome?

РЕДАКТИРОВАТЬ: Вот скриншоты того, как это выглядит до создания/отмены события и после:

Обычно, без вашего расширения, header.parentElement содержит два элемента , которые учитываются header.parentElement.clientHeight : header , и тот div , который содержит сам календарь:

(Он также содержит несколько плавающих кнопок, скрытые дивы и прочее, но здесь это не важно.)

Эти два элемента header и calendar имеют высоту, которая специально рассчитана таким образом , чтобы header.clientHeight calendar.clientHeight она была равна высоте страницы. При нормальных обстоятельствах это идеально, так как это означает, что нет необходимости в прокрутке.

Однако в вашем случае вы добавляете дополнительный div , который толкает calendar вниз:

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

Способ исправить это-настроить высоту calendar так, чтобы header.clientHeight appContainer.clientHeight calendar.clientHeight она была равна высоте страницы, а не просто header.clientHeight calendar.clientHeight . Это можно сделать, добавив следующий код:

 //Getting calendar can be a bit tricky since it's just one dive among others.
//While it does have a CSS class, I don't know how that name is determined or if it will change in future versions of Google Calendar, so it's best not to use it.
//What I do here instead is that I select the first child of header.parentElement that has parts outside of the page frame
const getCalendar = () => [...header.parentElement.querySelectorAll(":scope > div")].find(d => {
    let boundingRect = d.getBoundingClientRect();
    return boundingRect.y   boundingRect.height > document.body.clientHeight;
});
let calendar = getCalendar();

//This function adjusts the height of calendar
const adjustHeight = () => {
    calendar = calendar || getCalendar();    //calendar may be null in the beginning before all the elements were set, so if it's null try to select it again
    if(calendar != null){
        calendar.style.height = (calendar.parentElement.clientHeight - header.clientHeight - appContainer.clientHeight)   "px";    //Adjust the height of calendar
    }
};

window.addEventListener("resize", adjustHeight);    //Adjust the height whenever the window gets resized
window.addEventListener("load", adjustHeight);    //Adjust the height on page load