Aplikasi Ekstensi Browser Firefox (WebExtensions)

Bagi orang yang pekerjaannya melibatkan penggunaan Internet, ekstensi browser bisa menjadi alat yang sangat berguna. Dengan menggunakannya, Anda dapat menyelamatkan pengguna dari mengulangi tindakan yang sama dan mengatur alur kerja dengan lebih baik. Anda dapat membuat kotak alat dari ekstensi yang ada, tetapi ini tidak cukup.

Untuk seseorang yang mengetahui pengembangan web, mudah untuk membuat ekstensi peramban baru. Sekarang sebagian besar browser paling populer mendukung sistem pengembangan standar, yang terutama menggunakan JavaScript, HTML dan CSS, - WebExtensions .

Mungkin sulit bagi orang yang belum pernah membuat add-on browser berdasarkan WebExtensions sebelumnya untuk segera memahami bagian dasar apa yang harus terdiri dan apa yang bisa dilakukan. Di Internet ada banyak informasi tentang sistem ini, tetapi untuk membuat gambaran keseluruhan untuk diri sendiri, Anda harus menghabiskan banyak waktu. Artikel ini akan membantu Anda cepat memahami struktur sistem WebExtensions dan menunjukkan bagaimana untuk lebih menavigasi dokumentasi untuk nya API . Ekstensi untuk peramban Firefox dijelaskan di sini , sehingga hampir semua informasi yang digunakan dalam artikel diambil dari situs web MDN . Tetapi artikel ini akan bermanfaat bagi mereka yang ingin membuat ekstensi untuk peramban lain yang mendukung WebExtensions, - terutama untuk Google Chrome dan Chromium .

Bagian ini mencakup pembuatan ekstensi desktop saja . Jika Anda perlu membuat ekstensi untuk browser seluler Chrome atau Firefox , artikel ini juga bisa menjadi sesuatu yang bermanfaat, tetapi Anda harus menemukan dan mempelajari sendiri sebagian besar informasi itu.

pengantar

Apa yang Anda butuhkan untuk memulai

Dan inilah yang Anda butuhkan:

• Browser Firefox - Versi Terbaik 60 atau Lebih Tinggi. Sepanjang artikel, diasumsikan bahwa browser seperti itu digunakan, kecuali dinyatakan lain. Tetapi Anda dapat menggunakan Google Chrome atau Chromium sebagai gantinya .
  
• 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
  

• Situs Pengaya Firefox (Firefox Browser ADD-ONS)