Расширение Chrome для вставки динамического скрипта в заголовок и после открытия тега body

Question

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

Любое хорошее руководство о том, как сделать это просто?

Answer 1

Jquery Solution

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

Чтобы добавить console.log к голове и телу в jquery:

Добавление к голове

$('head').append('<script>console.log("Script added to head")</script>');

Добавление к телу

$('body').append('<script>console.log("Script added to body")</script>');

Подтверждение

Если вы добавите оба из них на консоль Chrome, вы должны увидеть что-то вроде:

Script added to head
Script added to body

Если вы ищете в HTML (Jquery $('html').html()) для этого скрипта, вы получите два попадания:

> regex = new RegExp(/<script>console\.log\("Script added to \w*?"\)<\/script>/, "g")
> pagetext = $('html').html().match(regex).length
2

Когда мы добавили 2 строки консольного журнала «Скрипт был добавлен в ...», у нас есть подтверждениечто строки были добавлены.

Когда загружать

Если это в вашем скрипте контента, вам не нужно беспокоиться о вложении этого в window.onload или подобное , если у вас есть "run_at": "document_end" в вашем manifest.json (в скрипте содержимого JSON).