Как исправить получение того же элемента документа 'meta' в расширении Google Chrome

Question

Я разрабатываю новое расширение Chrome, которое возвращает мета сайта. Моя проблема в том, что у меня всегда один и тот же результат, даже если содержание веб-страницы меняется. Чтобы получить правильные и актуальные метаэлементы, я должен обновить вкладку (F5).

Код моей кнопки:

chrome.tabs.executeScript({file: 'app/js/get_metas.js'});

И код моего get_metas.js:

document.head.addEventListener("DOMContentLoaded", getMeta(), true);

function getMeta() {

const meta = document.head.querySelector("meta[property='****']").getAttribute("content");

alert(meta);
}

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

Answer 1

Если вы введете следующий код в своей консоли, вы сразу увидите предупреждение:

document.head.addEventListener("DOMContentLoaded", getMeta(), true);

function getMeta() {
    alert("test");
}

Причина в том, что функция будет вызвана немедленно. Чтобы изменить это, удалите (), а также я считаю, что событие запускается на самом документе (я не уверен, что событие проходит по всему документу, и useCapture = true будет работать). Так что используйте что-то вроде:

document.addEventListener("DOMContentLoaded", getMeta, true);

Он все равно будет срабатывать только один раз при загрузке документа. Если вам нужно запустить функцию после какого-то другого события, вам нужно добавить прослушиватель для этого события.

Если вы хотите вызывать свою функцию после изменения документа (включая навигацию ajax), вы можете использовать Наблюдатели мутаций .