Firefox Browser Extensions App (WebExtensions)

Für Personen, deren Arbeit die Nutzung des Internets umfasst, können Browsererweiterungen sehr nützliche Werkzeuge sein. Mit ihnen können Sie verhindern, dass der Benutzer dieselben Aktionen wiederholt, und den Workflow besser organisieren. Sie können eine Toolbox aus vorhandenen Erweiterungen zusammenstellen, dies reicht jedoch nicht aus.

Für jemanden, der sich mit Webentwicklung auskennt, ist es einfach, eine neue Browsererweiterung zu erstellen. Jetzt unterstützen die meisten der beliebtesten Browser das Standardentwicklungssystem, das hauptsächlich JavaScript, HTML und CSS verwendet - WebExtensions .

Es kann für eine Person, die noch nie ein Browser-Add-On basierend auf WebExtensions erstellt hat , schwierig sein, sofort zu verstehen, aus welchen grundlegenden Teilen es bestehen sollte und was es tun kann. Im Internet gibt es viele Informationen zu diesem System, aber um ein Gesamtbild für sich selbst zu erstellen, müssen Sie viel Zeit aufwenden. Dieser Artikel hilft Ihnen dabei, die Struktur des WebExtensions-Systems schnell zu verstehen und zu zeigen, wie Sie die Dokumentation für seine API besser navigieren können . Die Erweiterung für den Firefox- Browser wird hier beschrieben , sodass fast alle im Artikel verwendeten Informationen von der MDN- Website stammen . Der Artikel ist jedoch hilfreich für diejenigen, die eine Erweiterung für andere Browser erstellen möchten, die WebExtensions unterstützen, - hauptsächlich für Google Chrome und Chromium .

In diesem Abschnitt wird das Erstellen von Nur- Desktop- Erweiterungen behandelt . Wenn Sie eine Erweiterung für den mobilen Chrome- oder Firefox - Browser erstellen müssen , kann dieser Artikel auch nützlich sein, aber Sie müssen die meisten Informationen selbst finden und studieren.

Einführung

Was Sie brauchen, um loszulegen

Und hier ist was Sie brauchen:

• Firefox Browser - Beste Version 60 oder höher. Im gesamten Artikel wird davon ausgegangen, dass ein solcher Browser verwendet wird, sofern nicht anders angegeben. Sie können jedoch stattdessen Google Chrome oder Chromium verwenden .
  
• HTML CSS, -.
  
• Javascript. ECMA, Promise .
  
• , API. , , ( ), . - «» MDN — , .
  
• Python Node.js.
  
• , , - .
  

Firefox 60 WebExtensions — . - Firefox 52.

Google Chrome Chromium WebExtensions , . , , . API Firefox , Building a cross-browser extension. , , Firefox, Chrome.

, , API Chrome.

, . , . , , .

— . — manifest.json. — -, . - , , , , , . — Javascript, HTML, CSS, (, ).

, :

• . , , . , . .
  
• - .
  
• , , . , , .
  
• , .
  
• , .
  
• , .
  
• , , . . , -.
  
• .
  

, — . . , , -, — .

— , .

«» , API WebExtensions. API, .

:

• « » MDN
• «Overview» developer.chrome.com

WebExtensions

, WebExtensions, , MDN. .

API WebExtensions:

, API WebExtensions, . Firefox browser, Google Chrome — chrome. , — window, — -.

, . — window. — API WebExtensions, — browser. window . , , , — , window, «window.» . API WebExtensions «browser.» . , WebExtensions MDN, , runtime.id . , —

var myAddonId = browser.runtime.id;

browser , . , API WebExtensions , .

— . , . . , .

DOM . -, HTML-, , HTML-! , , — window browser.

. — -. , -. , , . , . , . , , , ( « ») — .

:

• API WebExtensions, . MDN .
  
• HTML-, CSS JavaScript, JavaScript. HTML- . , , -. : HTML- JavaScript, <script>, — <script src="my_script.js"></script>! , .
  
• -, . window HTML-.
  
• JavaScript -, . . , HTML, , . — .
  

( )

- :

• API WebExtensions, .
  
• -. HTML — -. JavaScript CSS.
  
• DOM , — , API window. «» -. , , -. , - window, — .
  

, — -. , , , .

. , : window HTML- browser. , — , — - ( , ) . .

, , .

, : — , («Extension»), — , («Design»), — , («Native»). «Build», -. , , . , , : , «icons», «_locales» ( ). :

My_project
|--Design
|  |--concept.md
|
|--Build
|  |--my_extension-1.0.0.zip
|
|--Native
|  |--native_program.py
|  |--native_program_manifest.json
|  |--run.bat
|  |--install.sh
|  |--install.bat
|
|--Extension
   |--manifest.json
   |--background.js
   |--content.js
   |--browser_popup
   |  |--menu.html
   |  |--menu.css
   |  |--menu.js
   |
   |--icons
      |--my_extension.svg

manifest.json, . , . JSON. JavaScript, .

manifest.json MDN.

, — :

• manifest_version — 2.
  
• name — , .
  
• version — .
  

— short_name. , .

— description

. , , :

• author — . , , , .
  
• homepage_url — URL- . - , , , GitHub.
  

- developer. , .

,

browser_specific_settings.

Firefox, . , , ID . ( ) , ID . ID , . , — .

my_extension@user.habr.com
my_extension@user.github.com
my_extension@user.addons.mozilla.org

-

-, . , : ( -> -> ) , . icons.

MDN , — 48x48 , 32x32. — , Retina display Apple. , , : 32x32, 64x64, 48x48 96x96 .

PNG SVG. SVG , — . , Google Chrome SVG .

manifest.json. , .

{
  //       2
  "manifest_version": 2,

  //  
  "name": "Habr article editor",
  "short_name": "Habr Editor",

  // 
  "version": "1.0.0",

  //   
  "description": "Enhances editor of articles on habr.com site to support Markdown Extra",

  //   —   
  "author": "Aleksandr Solovyov",

  //    ,  —  
  //    GitHub
  "homepage_url": "https://github.com/alexandersolovyov/habr_editor",


  //       Firefox
  "browser_specific_settings": {
    "gecko": {
      "id": "habr_editor@alexandersolovyov.github.com",
      "strict_min_version": "52.0"
    }
  },

  // -
  "icons": {
    "32": "icons/habr_editor.svg",
    "64": "icons/habr_editor.svg",
    "48": "icons/habr_editor.svg",
    "96": "icons/habr_editor.svg"
  },

  ...
}

, , , , - . .

API

, API WebExtensions. , «» API, - .

permissions . , , , , , . , , « », .

, . , , . , , . optional_permissions. , , , permissions. API.

— permissions, optional_permissions. API . API, . , , permissions, optional_permissions. : — , ! API, , API WebExtensions. API , — , API, , .

-

- . , (host permissions) (activeTab). , .

activeTab . , -. , , URL, . , <all_urls> tabs, , .

host permissions . URL -, URL . , AJAX — , , HTTP- cookie. <all_urls> host permissions. , .

(options page)

, — . , -> ( ), . , ( , ) , . , , , . — - .

, -: HTML, CSS JavaScript.

HTML- options_ui. , . , , "open_in_tab": true options_ui.

, , , . — .

Options page.

storage API.

. , — , .

JavaScript, HTML- ( CSS!). background . , , DOM . HTML .

: , . WebExtensions . — , . persistent background — true. , , JavaScript .

:

1. Firefox, , ( ) , , , . . browser_action. , - — HTML, CSS JavaScript. , . — .addListener() - browser.browserAction.onClicked. — Toolbar Buttton MDN
   
2. URL . — page_action. . , browser.pageAction.onClicked. — Address bar button.
   
3. Firefox , -> . , sidebar_action. — , . , — . ( — ), . , -. Sidebars
   

Popups MDN

, , . — «», .

-

, -, , JavaScript CSS. , - , — , . .

- :

• content_scripts. JavaScript, CSS. , URL- . - , URL- . ( ) , , . (permissions).
  
• . : URL . , . . JavaScript, CSS, , . API browser.contentScripts. browser.contentScripts.register() URL . Promise. «» ( .then()) browser.contentScripts.RegisteredContentScript, « ». .unregister() . , -, . permissions - (host permissions), -, .
  
• . JavaScript — , . browser.tabs.executeScript(). , , (ID). Promise. , URL , browser.tabs.query(). Promise, - . ID browser.tabs.executeScript(). , , , permissions activeTab, , URL- (host permissions).
  

, . , , : , HTML- , . API: content_scripts , run_at, JavaScript, , — runAt .

, , , «» ( , ).

CSS , - <link>. JavaScript :

• DOM -, .
• API WebExtensions. API.
• AJAX ( XMLHttpRequest Fetch). - (host permissions), - AJAX , .
• «» - , API window. , , MDN.

, «» DOM , window, :

• JavaScript, «» -.
  
• , , «» .
  
• , «» -, , DOM. , , -, «» , .
  

MDN.

, - CSS JavaScript. , , - HTML. , — , StackOverflow.

, - . commands -.

. — , . — , . . — browser.commands.onCommand.addListener().

- , . context_menus. , — .

Firefox API browser.menus. - — browser.contextMenus. Firefox, , . .

, browser.menus.create(). ( ). , , , — , — .

, . , browser.menus.onClicked. , , , : , HTML-, .

DOM -, , JavaScript — browser.tabs.executeScript(). : , HTML-, . browser.menus.getTargetElement().

API

API WebExtensions. browser.runtime . API . — browser.tabs. . API .

API WebExtensions , :

• API browser.runtime.
  
• API browser.tabs.
  
• , - ( ), .
  

JavaScript, , , JSON . . JSON. , , , undefined, Symbol . , DOM . , , JSON JSON.stringify() , .

.

, , , . , . - , . :

1. , , sendMessage(). , browser.runtime.sendMessage(), — browser.tabs.sendMessage(). -, , , — , , .
   
2. onMessage, — browser.runtime.onMessage. . - — browser.runtime.onMessage.addListener(). - -, .
   
3. - , Promise. Promise . , , Promise resolve() reject(). , -, JSON. Error: !
   
4. , , sendMessage() Promise, — .then() .catch(). - - — .
   

, , — . , ( ), , «» Promise «».

, « ». API , — , . . :

1. connect(). , , browser.runtime.connect(), — browser.tabs.connect(). , . , .
   
2. connect() browser.runtime.Port, API «» . , - port1.
   
3. , , browser.runtime.onConnect — , , . - — browser.runtime.onConnect.addListener(). , - browser.runtime.Port — , , , . , port2. , -.
   
4. , . postMessage() ( port1.postMessage()) -.
   
5. onMessage ( — port2.onMessage). , port2.onMessage.addListener(). - . , port2.postMessage().
   
6. , «-». , , -, , : , «status» «error» «ok».
   
7. « » .disconnect() -. , , . window.onclose() port1.disconnect(). .
   
8. , - . port2.onDisconnect.addListener(). - - . - .disconnect() , .error window.Error. , . error Firefox, , browser.runtime.lastError.
   

, API WebExtensions , , ( «» «native»), , . .

, API . — , (, Python, Node.js Java), . — . , . .

— Python Node.js, . , , . . , -, , .

Native messaging. , — .

, , , . , , , - , - ( ). , «», . , -. , , Native Manifests.

API WebExtensions . , . .

.

, , JavaScript, JSON. UTF-8. (), 4 . — . ( stdin). (stdout) JSON , . JavaScript, .

, , . , , , JSON — , . , , , .

:

1. browser.runtime.sendNativeMessage(). ( name ) -, .
   
2. stdin , , .
   
3. .
   
4. stdout.
   
5. ! .
   
6. , (browser.runtime.sendNativeMessage()), Promise. : .then() .catch(). :
   
   • , . , .then(), - .
     
   • , , , , , (null undefined).
     
   • , , .catch(). Error .
     
   
   

, , — . , , , , , .

. :

1. browser.runtime.connectNative() — ( ).
   
2. . . , !
   
3. browser.runtime.connectNative(), , browser.runtime.Port — , , . port.
   
4. port.postMessage() .
   
5. (stdin) .
   
6. , — stdout.
   
7. , . - port.onMessage.addListener(). - .
   
8. :
   
   • , . , .
     
   • - , .
     
   • port.disconnect(), .
     
   
   
9. port.onDisconnect. -. , .error, . , Chromium, - — Firefox. browser.runtime.lastError.
   

, , .

API WebExtensions . :

• API browser.storage.
  
• . , Internationalization.
  
• : , , - . API browser.downloads.
  
• — , , . . browser.windows.create().
  
• . - , . browser.windows.create().
  
• — theme .
  
• HTTP- . API browser.webRequest.
  
• . browser.runtime.sendMessage(), — browser.runtime.onMessageExternal.
  
• , . Extending the developer tools.
  

web-ext

WebExtensions MDN web-ext. , Node.js, , , , Mozilla. , , , , «» . «» Firefox , , , .

web-ext Extension Workshop. , , «».

, , , :

• about:debugging Enter . Firefox.
  
• .
  
• - , .
  

. about:debugging . «» .

, :

• about:debugging , .
  
• , , .
  
• , .
  
• , , F12.
  

. , — , . , . , -. , , -, .

Firefox web-ext, , , , , ZIP. , : , GIT, NPM , , , Managed Storage PKCS#11.

Firefox . Extension Workshop.

, , , . , API WebExtensions. — , .

«» , :

• , Firefox — Extension Workshop
  
• - — Browser Extensions: Firefox workflow overview
  
• - — manifest.json
  
• API WebExtensions MDN — JavaScript APIs
  
• API WebExtensions Google Chrome — Chrome APIs
  
• API WebExtensions Opera — Extension APIs Supported in Opera
  
• API WebExtensions Edge — Microsoft Edge: Supported APIs
  
• - : , — Native Manifests
  

:

• 
  
• developer.chrome.com: Overview
  
• Building a cross-browser extension
  
• Options page
  
• Toolbar Buttton
  
• Address bar button
  
• Sidebars
  
• Popups
  
• Content scripts
  
• StackOverflow: Adding complex HTML using a Chrome content script
  
• Internationalization
  
• Native messaging
  

• Firefox-Add-Ons-Site (Firefox-Browser ADD-ONS)