1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: Анатомия Расширения
slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
tags:
- Расширение
- веб расширение
translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
---
<p>{{AddonSidebar}}</p>
<p><span class="notranslate">Расширение состоит из набора файлов, упакованных для распространения и установки.</span> <span class="notranslate"> В этой статье мы быстро рассмотрим файлы, которые могут присутствовать в расширении.</span></p>
<h2 id="manifest.json">manifest.json</h2>
<p><span class="notranslate">Это единственный файл, который должен присутствовать в каждом расширении.</span> <span class="notranslate"> Он содержит основные метаданные, такие как его имя, версию и требуемые разрешения.</span> <span class="notranslate"> Он также предоставляет указатели на другие файлы в расширении.</span></p>
<p><span class="notranslate">Этот манифест также может содержать указатели на несколько других типов файлов:</span></p>
<ul>
<li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Background pages</a>: <span class="notranslate">Реализует долгоиграющую логику.</span></li>
<li><span class="notranslate">Иконки для расширения и любых кнопок, которые оно может определить.</span></li>
<li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">Sidebars, popups, and options pages</a>: <span class="notranslate">HTML-документы, которые предоставляют содержимое для различных компонентов пользовательского интерфейса.</span></li>
<li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">Content scripts</a>: <span class="notranslate">JavaScript сценарии вашего расширения, которые будут исполняться на веб-страницах.</span></li>
<li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Web_accessible_resources">Web-accessible resources</a>: Делает контент вашего расширения видимым для веб-страниц и скриптов.</li>
</ul>
<p><br>
<img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p>
<p><span class="notranslate">Для получения подробной информации см. справочную страницу </span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></p>
<p><span class="notranslate">Помимо ссылок, указанных в манифесте, расширение может включать дополнительные</span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Extension_pages">веб-страницы расширения</a><span class="notranslate"> с поддерживающимися файлами.</span></p>
<h2 id="Фоновые_скрипты">Фоновые скрипты</h2>
<p><span class="notranslate">Расширения часто должны поддерживать долгосрочное состояние или выполнять долгосрочные операции независимо от срока жизни любой конкретной веб-страницы или окна браузера.</span> <span class="notranslate"> Для этого нужны фоновые сценарии.</span></p>
<p><span class="notranslate">Фоновые сценарии загружаются сразу после загрузки расширения и остаются загруженными до тех пор, пока расширение не будет отключено или удалено.</span> <span class="notranslate"> вы можете использовать любой</span> <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/API">API расширений</a> <span class="notranslate">в сценарии, если вы запросили необходимые </span><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">разрешения</a>.</p>
<h3 id="Спецификации_фоновых_скриптов">Спецификации фоновых скриптов</h3>
<p><span class="notranslate">Вы можете включить фоновый скрипт, используя <code>background</code> ключ в «manifest.json»:</span></p>
<pre class="brush: json">// manifest.json
"background": {
"scripts": ["background-script.js"]
}</pre>
<p><span class="notranslate">Вы можете указать несколько фоновых сценариев: если вы это сделаете, они выполняются в том же контексте, как и несколько сценариев, загруженных на одной веб-странице.</span></p>
<p>Вместо указания <span class="notranslate">несколько фоновых сценариев</span> вы можете указать фоновую страницу, которая так же преимущества поддержки ES6 модулей:</p>
<p style="margin-bottom: 0em;"><strong>manifest.json</strong></p>
<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="comment token">// manifest.json</span>
<span class="key token">"background":</span> <span class="punctuation token">{</span>
<span class="key token">"page":</span> <span class="string token">"background-page.html"</span>
<span class="punctuation token">}</span></code></pre>
<p style="margin-bottom: 0em;"><strong>background-page.html</strong></p>
<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>module<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>background-script.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre>
<h3 id="Окружение_фоновых_скриптов">Окружение фоновых скриптов</h3>
<h4 id="DOM_APIs">DOM APIs</h4>
<p>Фоновые скрипты запускаются в пространстве специальной страницы, называемой фоновой. Это даёт им доступ к глобальному <code><a href="/en-US/docs/Web/API/Window">window</a></code> объекту, а так же ко всем его DOM APIs.</p>
<h4 id="WebExtension_APIs">WebExtension APIs</h4>
<p>Фоновые скрипты могут использовать любые <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/API">API расширений</a>, если расширение имеет необходимые <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">разрешения</a>.</p>
<h4 id="Многоцелевой_доступ">Многоцелевой доступ</h4>
<p>Фоновые скрипты могут осуществлять XHR запросы к любому домену, если расширение имеет <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">host разрешения</a>.</p>
<h4 id="Web-содержимое">Web-содержимое</h4>
<p>Фоновые скрипты не получают прямого доступа к веб-страницам. Однако они могут загружать <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">скрипты содержимого</a> на веб-страницы и <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">взаимодействовать с этими скриптами с помощью API передачи сообщений</a>.</p>
<h4 id="Политика_безопасности_содержимого">Политика безопасности содержимого</h4>
<p>Фоновые скрипты ограничены в выполнении потенциально опасных операций, таких как <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>, через политику безопасности содержимого. Подробнее см. <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a>.</p>
<h2 id="Боковые_панели_(sidebar)_всплывающие_окна_(popup)_страницы_настроек">Боковые панели (sidebar), всплывающие окна (popup), страницы настроек</h2>
<p>Ваше расширение может иметь разнообразные компоненты интерфейса, определённые в HTML документах:</p>
<ul>
<li><font color="#0b0116"><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Боковая панель (sidebar</a></font>) - это панель, отображаемая в окне браузера с левой стороны, рядом с веб-страницей</li>
<li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Всплывающие окна (popup</a>) - диалоговое окно, отображаемое по клику на <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">кнопке</a> на <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">панели инструментов</a> или в адресной строке</li>
<li><a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Страница настроек</a> открывается, когда пользователь обращается к настройкам расширения на странице менеджера расширений.</li>
</ul>
<p>Для каждого из этих компонентов вы создаёте HTML файл и помещаете специальную информацию в <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>. HTML файл может в себя включать CSS и JavaScript файлы, как и любая web-страница.</p>
<p>Всё это типы <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">веб-страниц расширения</a>, и, в отличие от нормальных веб-страниц, ваш JavaScript может использовать все привелегии WebExtension APIs, как и ваши фоновые скрипты. Они даже могут получить доступ к переменным в фоновой странице, используя {{WebExtAPIRef("runtime.getBackgroundPage()")}}.</p>
<h2 id="Веб-страницы_расширения">Веб-страницы расширения</h2>
<p>Вы также можете включить HTML документы в ваше расширение, даже если они не будут включены в какой-либо существующий компонент пользовательского интерфейса. В отличие от документов, которые вы можете предоставить для боковых панелей, всплывающих окон или страниц настроек, эти документы не содержатся в manifest.json. Однако, они также имеют такой же доступ к WebExtension APIs, как и фоновые скрипты.</p>
<p>Вы можете загрузить такую страницу, используя {{WebExtAPIRef("windows.create()")}} или {{WebExtAPIRef("tabs.create()")}}.</p>
<p>Подробнее см. <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a>.</p>
<h2 id="Встраиваемые_скрипты">Встраиваемые скрипты</h2>
<p>Используйте встраиваемые скрипты для доступа и изменения веб-страниц. Встраиваемые скрипты загружаются в веб-страницу и исполняются в контексте данной конкретной страницы.</p>
<p>Встраиваемые скрипты предоставляются расширением; этим они отличаются от скриптов, загруженных самой веб-страницей, включая тех, что загружены с помощью {{HTMLElement("script")}} элемента веб-страницы.</p>
<p>Встраиваемые скрипты имеют доступ и могут манипулировать DOM, как и обычные скрипты, загруженные веб-страницей.</p>
<p>В отличие от обычных скриптов, они могут:</p>
<ul>
<li>Осуществлять XHR запросы.</li>
<li>Использовать часть <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/API">API расширений</a>.</li>
<li>Обмениваться сообщениями с их фоновыми скриптами и таким образом иметь доступ ко всему WebExtension APIs.</li>
</ul>
<p>Встраиваемые скрипты не могут напрямую взаимодействовать с обычными скриптами на странице, но они могут обмениваться сообщениями с помощью стандартного <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage()</a></code> API.</p>
<p>Обычно, когда мы говорим о встраиваемых скриптах, мы отсылаемся к JavaScript, но вы так же можете внедрить CSS в веб-страницы, используя этот же механизм.</p>
<p>Подробнее см. <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a>.</p>
<h2 id="Веб-доступные_ресурсы"><span class="tlid-translation translation"><span title="">Веб-доступные ресурсы</span></span></h2>
<p><span class="tlid-translation translation"><span title="">Веб-доступные ресурсы</span></span> - это ресурсы вроде изображений, HTML, CSS и JavaScript, которые вы включаете в расширение и хотите сделать доступными для встраиваемых скриптов и оригинальных скриптов веб-страницы. Такие ресурсы могут быть доступны скриптам через специальную URI схему.</p>
<p>Например, если встраиваемый скрипт хочет добавить какие-либо изображения в веб-страницу, вы можете включить эти изображения в расширение и сделать их веб-доступными. Тогда встраиваемый скрипт может создать и добавить <code><a href="/en-US/docs/Web/HTML/Element/img">img</a></code> тэги, которые будут ссылаться на эти изображения через <code>src</code> атрибут.</p>
<p>Подробнее см. <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> секцию manifest.json.</p>
<p> </p>
<p> </p>
|
