Изначально появился здесь

Если вы попадаете на эту страницу, вы, вероятно, искали в Google сценарий содержимого или имеете какое-то представление о сценариях содержимого.

Я решил написать этот пост, потому что при создании расширения я обнаружил, что информация о Content Script на момент написания этого поста очень разобщена в Интернете, и, следовательно, мне потребовалась целая жизнь, чтобы выполнить эту работу.

Надеюсь, это поможет другим в такой же ситуации выполнить работу быстрее.

Я не буду говорить о других функциях расширений Chrome, таких как действие страницы, фоновые страницы, действия браузера и т. Д. - могу просто упомянуть их мимоходом здесь и там.

Если вам нравится знать все, на что способны расширения Chrome, ознакомьтесь с этим постом

Расширения Google расширяют возможности пользователей, добавляя дополнительные инструменты в браузер Chrome. Иногда эти пользовательские инструменты требуют изменения CSS или HTML существующей веб-страницы.

Подумайте о кнопке "закрепить" на изображениях для расширения Pinterest. Такая манипуляция возможна только с помощью функции сценариев содержимого расширений Google Chrome.

Так что же такое сценарии содержимого?

Как говорится в документации Google,

Скрипты содержимого - это файлы JavaScript, которые запускаются в контексте веб-страниц. Используя стандартную объектную модель документа (DOM), они могут читать сведения о веб-страницах, которые посещает браузер, или вносить в них изменения.

Вот другие примеры того, что могут делать скрипты контента:

  • Найдите несвязанные URL-адреса на веб-страницах и преобразуйте их в гиперссылки
  • Увеличьте размер шрифта, чтобы текст был более разборчивым

Читая о сценариях содержания, многие статьи не отличают их от внедренных сценариев. Есть разница. Кроме того, сценарии содержимого отличаются от сценариев расширения.

Вот отличное объяснение благодаря этому ответу на переполнение стека.

Код JavaScript в расширениях Chrome можно разделить на следующие группы:

  • Сценарии расширения - полный доступ ко всем разрешенным API chrome. *.
    Это включает фоновую страницу и все страницы, которые имеют прямой доступ к ней через chrome.extension.getBackgroundPage () , Например, всплывающие окна браузера .
  • Скрипты содержимого (через файл манифеста или chrome.tabs.executeScript) - частичный доступ к некоторым API-интерфейсам Chrome, полный доступ к DOM страницы (не к любому из оконных объектов, включая фреймы).
    Скрипты содержимого выполняются в области между расширением и страницей. Объект глобального окна сценария содержимого отличается от глобального пространства имен страницы / расширения.
  • Внедренные скрипты (с помощью этого метода в Контентном скрипте) - полный доступ ко всем свойствам на странице. Нет доступа ни к одному из интерфейсов chrome. *.
    Внедренные скрипты ведут себя так, как если бы они были включены самой страницей и никак не связаны с расширением. См. Этот пост, чтобы узнать больше о различных методах инъекции.

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

Визуализация в помощь,

Спасибо Rob W за ответ выше. Это мне очень помогло, так как во всех других статьях (я прочитал их тонны) этот важный момент не упоминался.

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

Вот и все. В следующем посте я попытаюсь объяснить концепцию Content Scripts на примере. Мы добавим всплывающее окно на веб-страницу при определенном действии пользователя с помощью сценариев содержимого.

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