拡張機能の開発 ( 基礎編 ) 109 HACK 図 18-2 Translator JP 拡張機能の動作例 ❷ 18-3 translator-jp 図 18-3 パッケージのフォルダ構成 Translator JP URL

Size: px

Start display at page:

Download "拡張機能の開発 ( 基礎編 ) 109 HACK 図 18-2 Translator JP 拡張機能の動作例 ❷ 18-3 translator-jp 図 18-3 パッケージのフォルダ構成 Translator JP URL"

ひでかはにうだ
5 years ago
Views:

$HACK 108 3 章 Add-on SDK でかんたん拡張機能開発 "-p", "C:\\Users\\***\\AppData\\Roaming\\Mozilla\\Firefox\\" + "Profiles\\***" ], "nightly": [ "-b", "C:\\Program Files\\Mozilla Firefox Nightly\\" + "firefox.$

1 HACK 章 Add-on SDK でかんたん拡張機能開発 "-p", "C:\\Users\\***\\AppData\\Roaming\\Mozilla\\Firefox\\" + "Profiles\\***" ], "nightly": [ "-b", "C:\\Program Files\\Mozilla Firefox Nightly\\" + "firefox.exe" ] "default": cfx run -g nightly "nightly": [Hack ] Add-on SDK H A C K Add-on SDK を用いて SDK ベース拡張機能を開発しながら基本的な開発手法を解説します Translator JP Translator JP18-1Web Translate into Japanese 18-2 図 18-1 Translator JP 拡張機能の動作例 ❶

2 拡張機能の開発 ( 基礎編 ) 109 HACK 図 18-2 Translator JP 拡張機能の動作例 ❷ 18-3 translator-jp 図 18-3 パッケージのフォルダ構成 Translator JP URL package.json CommonJS Packages 18-1JSON cfx Firefox JavaScript {

3 HACK 章 Add-on SDK でかんたん拡張機能開発 // 18-1 package.json { "name": "translator-jp", // ❶ "fullname": "Translator JP", // ❷ "description": "Translates selection into Japanese.", "author": "Gomita", // ❹ "version": "0.1" // ❺ // ❸ ❶ ❷ ❸ ❹ ❺ trailing comma Package Specification lib main.js main.js exports.main = function(){ console.log("translator JP"); ; exports.main =... CommonJS modules/1.0/ main

4 拡張機能の開発 ( 基礎編 ) 111 HACK console.log Add-on SDK 1 Add-on SDK Web JavaScript window document 表 18-1 グローバルオブジェクトの分類種類概要 JavaScript Globals JavaScript の仕様で定められたグローバルオブジェクト String Array Date JSON など CommonJS Globals CommonJS Module 1.0 の仕様で定められたグローバルオブジェクト require exports define の3つ SDK Globals Add-on SDK が定義するグローバルオブジェクト console.log など Translator JP [Hack #17] cfx run Translator JP Add-on SDKIDID "id" cfx run Firefox info: Translator JP Translator JP Test App 0.1 Add-on SDK addon-kit Translator JP 18-2 表 18-2 Translator JPで使用するモジュールの一覧機能使用するモジュール右クリックメニューへの項目追加 context-menu モジュール Web サービスを使った翻訳 request モジュール選択範囲の文字列を置換 selection モジュール

HACK 112 3 章 Add-on SDK でかんたん拡張機能開発 Add-on SDK Web context-menu 18-3 18-3 main.js const contextmenu = require("context-menu"); exports.main = function() { contextmenu.

5 HACK 章 Add-on SDK でかんたん拡張機能開発 Add-on SDK Web context-menu main.js const contextmenu = require("context-menu"); exports.main = function() { contextmenu.item({ // ❷ label: "Translate into Japanese", context: contextmenu.selectioncontext(), ); ; // ❶ // ❸ // ❹ ❶ CommonJS Globals 1 require context-menu ❷ context-menu Item ❸ Item label Translate into Japanese ❹ Item context Firefox cfx run Firefox Web Translate into Japanese アドオンマネージャ上で Test App 0.1 を一度無効化して再度有効化しても変更が反映されないことに注意してください Jetpack SDK add Add-on SDK

6 拡張機能の開発 ( 基礎編 ) 113 HACK Web Web Add-on SDK e10s Web DOM WebDOM JavaScript WebDOM WebDOM Web Worker API 18-4 図 18-4 メインプログラムとコンテントスクリプトの関係 Translator JPWeb 1. Web 2. click 3. click WebDOM 4. Electrolysis e10s [Hack #34]

7 HACK 章 Add-on SDK でかんたん拡張機能開発 main.js const contextmenu = require("context-menu"); exports.main = function() { contextmenu.item({ label: "Translate into Japanese", context: contextmenu.selectioncontext(), // ❺ contentscript: "self.on('click', function() {" + " var sel = window.getselection().tostring();" + " self.postmessage(sel);" + ");", // ❻ onmessage: function(sel) { console.log("selection: " + sel); // [ToDo] 翻訳処理を実装 ); ; ❺ Item contentscript Web EventEmitterAPI 1self.on click clickwebdom window.getselection() self.postmessage self.postmessage JSON ❻ console.log Translate into JapaneseWeb

8 拡張機能の開発 ( 基礎編 ) 115 HACK EventEmitter Web DOM API addeventlistener Add-on SDK on API EventEmitter EventEmitter 1DOM API eventeventemitter event 18-3 表 18-3 DOM の API と EventEmitter フレームワークの比較処理 DOMのAPI EventEmitter フレームワークイベントリスナの追加 element.addeventlistener(type, item.on(type, listener) listener, usecapture) イベントリスナの削除 element. removeeventlistener(type, item.removelistener(type, listener) listener, usecapture) イベントリスナへ渡される引数 event オブジェクトモジュールの API によって様々イベントの発行 document.createevent でevent オブ EventEmitter のプライベートメジェクトを生成し event.initevent でソッド _emit(type, リスナへ渡発行す引数 ) で発行 Web Google Translate API htmlweb Google Translate API REST APIJSON Google Translate API late?v=1.0&q=hello&langpair= ja {"responsedata": {"translatedtext":" ","dete ctedsourcelanguage":"en", "responsedetails": null,

9 HACK 章 Add-on SDK でかんたん拡張機能開発 "responsestatus": 200 Add-on SDK Web request main.js const contextmenu = require("context-menu"); const request = require("request"); // ❼ exports.main = function() { contextmenu.item({ onmessage: function(sel) { var req = request.request({ // ❽ url: " + language/translate", // ❾ content: { v: "1.0", q: sel, langpair: " ja", oncomplete: function(response) { // ⓫ console.log(response.json.tosource()); console.log(response.json.responsedata. translatedtext); // [ToDo] Webページの選択範囲を置換する処理 ); req.get(); // ⓬ ); ; // ❿ ❼ request ❽ request Request Web request ❾ Request url URL ❿ contentq ⓫ Web oncomplete oncomplete response response text JSON json JavaScript JSON console.log

10 addon-kit ライブラリ 117 HACK #19 ⓬ request get Add-on SDK Web selection main.js const contextmenu = require("context-menu"); const request = require("request"); const selection = require("selection"); oncomplete: function(response) { // ⓭ var translated = response.json.responsedata.translatedtext; selection.text = translated; // ⓮ ⓭ selection ⓮ Web Web Web Translate into Japanese H A C K #19 addon-kit Add-on SDK の標準ライブラリの 1つであるaddon-kit ライブラリについて各モジュールの使い方を解説します [Hack #16] Add-on SDKaddon-kit api-utils 2 addon-kit SDK addon-kit

e10s におけるプロセス間通信の基本 219 HACK #34 Components.manager.removeBootstrappedManifestLocati on() function shutdown(adata, areason) { const IOService =

e10s におけるプロセス間通信の基本 219 HACK #34 Components.manager.removeBootstrappedManifestLocati on() function shutdown(adata, areason) { const IOService = e10s におけるプロセス間通信の基本 219 Components.manager.removeBootstrappedManifestLocati on() function shutdown(adata, areason) { const IOService = Cc["@mozilla.org/network/io-service;1"].getService(Ci.nsIIOService);