From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../add_a_button_to_the_toolbar/index.html | 221 +++++ .../anatomy_of_a_webextension/index.html | 150 ++++ .../webextensions/api/alarms/alarm/index.html | 84 ++ .../webextensions/api/alarms/clear/index.html | 92 ++ .../webextensions/api/alarms/clearall/index.html | 89 ++ .../webextensions/api/alarms/create/index.html | 125 +++ .../webextensions/api/alarms/get/index.html | 92 ++ .../webextensions/api/alarms/getall/index.html | 73 ++ .../add-ons/webextensions/api/alarms/index.html | 50 ++ .../webextensions/api/alarms/onalarm/index.html | 105 +++ .../api/bookmarks/bookmarktreenode/index.html | 91 ++ .../api/bookmarks/bookmarktreenodetype/index.html | 39 + .../bookmarktreenodeunmodifiable/index.html | 74 ++ .../webextensions/api/bookmarks/create/index.html | 98 +++ .../api/bookmarks/createdetails/index.html | 81 ++ .../webextensions/api/bookmarks/export/index.html | 114 +++ .../webextensions/api/bookmarks/get/index.html | 102 +++ .../api/bookmarks/getchildren/index.html | 126 +++ .../api/bookmarks/getrecent/index.html | 97 ++ .../api/bookmarks/getsubtree/index.html | 125 +++ .../webextensions/api/bookmarks/gettree/index.html | 117 +++ .../webextensions/api/bookmarks/import/index.html | 114 +++ .../add-ons/webextensions/api/bookmarks/index.html | 130 +++ .../webextensions/api/bookmarks/move/index.html | 107 +++ .../api/bookmarks/onchanged/index.html | 138 +++ .../api/bookmarks/onchildrenreordered/index.html | 130 +++ .../api/bookmarks/oncreated/index.html | 104 +++ .../api/bookmarks/onimportbegan/index.html | 110 +++ .../api/bookmarks/onimportended/index.html | 110 +++ .../webextensions/api/bookmarks/onmoved/index.html | 139 +++ .../api/bookmarks/onremoved/index.html | 135 +++ .../webextensions/api/bookmarks/remove/index.html | 96 ++ .../api/bookmarks/removetree/index.html | 101 +++ .../webextensions/api/bookmarks/search/index.html | 135 +++ .../webextensions/api/bookmarks/update/index.html | 117 +++ .../api/browseraction/colorarray/index.html | 67 ++ .../api/browseraction/disable/index.html | 87 ++ .../webextensions/api/browseraction/index.html | 129 +++ .../api/browseraction/onclicked/index.html | 102 +++ .../webextensions/api/browsersettings/index.html | 49 ++ .../browsersettings/newtabpageoverride/index.html | 27 + .../webextensions/api/browsingdata/index.html | 127 +++ .../api/browsingdata/removecache/index.html | 100 +++ .../add-ons/webextensions/api/clipboard/index.html | 39 + .../api/clipboard/setimagedata/index.html | 72 ++ .../add-ons/webextensions/api/commands/index.html | 84 ++ .../webextensions/api/contentscripts/index.html | 47 + .../api/contentscripts/register/index.html | 107 +++ .../api/contextualidentities/index.html | 63 ++ .../webextensions/api/cookies/cookie/index.html | 111 +++ .../add-ons/webextensions/api/cookies/index.html | 143 +++ .../api/devtools.inspectedwindow/eval/index.html | 211 +++++ .../api/devtools.inspectedwindow/index.html | 79 ++ .../api/devtools.inspectedwindow/tabid/index.html | 77 ++ .../webextensions/api/devtools.network/index.html | 74 ++ .../webextensions/api/devtools.panels/index.html | 105 +++ .../api/downloads/download/index.html | 127 +++ .../add-ons/webextensions/api/downloads/index.html | 134 +++ .../add-ons/webextensions/api/events/index.html | 74 ++ .../add-ons/webextensions/api/extension/index.html | 105 +++ .../api/extensiontypes/imagedetails/index.html | 75 ++ .../webextensions/api/extensiontypes/index.html | 76 ++ .../api/extensiontypes/runat/index.html | 76 ++ .../add-ons/webextensions/api/find/find/index.html | 298 +++++++ .../add-ons/webextensions/api/find/index.html | 32 + .../api/history/historyitem/index.html | 83 ++ .../add-ons/webextensions/api/history/index.html | 132 +++ .../api/i18n/detectlanguage/index.html | 115 +++ .../api/i18n/getacceptlanguages/index.html | 92 ++ .../webextensions/api/i18n/getmessage/index.html | 119 +++ .../api/i18n/getuilanguage/index.html | 84 ++ .../add-ons/webextensions/api/i18n/index.html | 94 ++ .../webextensions/api/i18n/languagecode/index.html | 68 ++ .../locale-specific_message_reference/index.html | 127 +++ .../api/identity/getredirecturl/index.html | 55 ++ .../add-ons/webextensions/api/identity/index.html | 106 +++ .../add-ons/webextensions/api/idle/index.html | 88 ++ .../mozilla/add-ons/webextensions/api/index.html | 55 ++ .../webextensions/api/management/index.html | 112 +++ .../add-ons/webextensions/api/menus/index.html | 197 +++++ .../webextensions/api/menus/onclicked/index.html | 108 +++ .../api/notifications/create/index.html | 139 +++ .../webextensions/api/notifications/index.html | 66 ++ .../add-ons/webextensions/api/omnibox/index.html | 70 ++ .../webextensions/api/pageaction/index.html | 106 +++ .../api/pageaction/onclicked/index.html | 104 +++ .../webextensions/api/permissions/index.html | 89 ++ .../add-ons/webextensions/api/pkcs11/index.html | 40 + .../add-ons/webextensions/api/privacy/index.html | 70 ++ .../add-ons/webextensions/api/proxy/index.html | 150 ++++ .../add-ons/webextensions/api/runtime/index.html | 167 ++++ .../api/runtime/messagesender/index.html | 86 ++ .../webextensions/api/runtime/onmessage/index.html | 317 +++++++ .../api/runtime/openoptionspage/index.html | 96 ++ .../api/runtime/sendmessage/index.html | 167 ++++ .../add-ons/webextensions/api/sessions/index.html | 134 +++ .../webextensions/api/sidebaraction/index.html | 98 +++ .../add-ons/webextensions/api/storage/index.html | 109 +++ .../webextensions/api/storage/local/index.html | 84 ++ .../api/storage/storagearea/clear/index.html | 62 ++ .../api/storage/storagearea/get/index.html | 133 +++ .../storage/storagearea/getbytesinuse/index.html | 53 ++ .../api/storage/storagearea/index.html | 73 ++ .../api/storage/storagearea/remove/index.html | 70 ++ .../api/storage/storagearea/set/index.html | 105 +++ .../api/storage/storagechange/index.html | 79 ++ .../webextensions/api/storage/sync/index.html | 87 ++ .../api/tabs/capturevisibletab/index.html | 105 +++ .../webextensions/api/tabs/create/index.html | 131 +++ .../webextensions/api/tabs/duplicate/index.html | 98 +++ .../api/tabs/executescript/index.html | 176 ++++ .../add-ons/webextensions/api/tabs/get/index.html | 87 ++ .../add-ons/webextensions/api/tabs/index.html | 215 +++++ .../webextensions/api/tabs/mutedinfo/index.html | 67 ++ .../api/tabs/mutedinforeason/index.html | 67 ++ .../webextensions/api/tabs/oncreated/index.html | 100 +++ .../webextensions/api/tabs/query/index.html | 216 +++++ .../webextensions/api/tabs/remove/index.html | 102 +++ .../add-ons/webextensions/api/tabs/tab/index.html | 128 +++ .../add-ons/webextensions/api/theme/index.html | 50 ++ .../add-ons/webextensions/api/topsites/index.html | 79 ++ .../add-ons/webextensions/api/types/index.html | 64 ++ .../webextensions/api/webnavigation/index.html | 143 +++ .../webextensions/api/webrequest/index.html | 200 +++++ .../add-ons/webextensions/api/windows/index.html | 117 +++ .../api/windows/windowstate/index.html | 73 ++ .../api/windows/windowtype/index.html | 65 ++ .../index.html | 25 + .../browser_support_for_javascript_apis/index.html | 26 + .../chrome_incompatibilities/index.html | 158 ++++ .../webextensions/content_scripts/index.html | 534 +++++++++++ .../content_security_policy/index.html | 109 +++ .../debugging_(before_firefox_50)/index.html | 243 +++++ .../add-ons/webextensions/examples/index.html | 29 + .../extending_the_developer_tools/index.html | 166 ++++ .../implement_a_settings_page/index.html | 221 +++++ files/ja/mozilla/add-ons/webextensions/index.html | 141 +++ .../mozilla/add-ons/webextensions/index/index.html | 14 + .../interact_with_the_clipboard/index.html | 106 +++ .../intercept_http_requests/index.html | 159 ++++ .../webextensions/internationalization/index.html | 415 +++++++++ .../webextensions/manifest.json/author/index.html | 44 + .../manifest.json/background/index.html | 115 +++ .../manifest.json/browser_action/index.html | 240 +++++ .../browser_specific_settings/index.html | 91 ++ .../chrome_settings_overrides/index.html | 136 +++ .../manifest.json/chrome_url_overrides/index.html | 97 ++ .../manifest.json/commands/index.html | 186 ++++ .../manifest.json/content_scripts/index.html | 229 +++++ .../content_security_policy/index.html | 121 +++ .../manifest.json/default_locale/index.html | 44 + .../manifest.json/description/index.html | 44 + .../manifest.json/developer/index.html | 52 ++ .../manifest.json/devtools_page/index.html | 42 + .../manifest.json/homepage_url/index.html | 46 + .../webextensions/manifest.json/icons/index.html | 78 ++ .../manifest.json/incognito/index.html | 70 ++ .../add-ons/webextensions/manifest.json/index.html | 123 +++ .../manifest.json/manifest_version/index.html | 45 + .../webextensions/manifest.json/name/index.html | 46 + .../webextensions/manifest.json/omnibox/index.html | 50 ++ .../manifest.json/optional_permissions/index.html | 98 +++ .../manifest.json/options_ui/index.html | 103 +++ .../manifest.json/page_action/index.html | 200 +++++ .../manifest.json/permissions/index.html | 190 ++++ .../manifest.json/protocol_handlers/index.html | 87 ++ .../manifest.json/short_name/index.html | 44 + .../manifest.json/sidebar_action/index.html | 133 +++ .../webextensions/manifest.json/theme/index.html | 979 +++++++++++++++++++++ .../webextensions/manifest.json/version/index.html | 53 ++ .../manifest.json/version_name/index.html | 40 + .../web_accessible_resources/index.html | 100 +++ .../webextensions/match_patterns/index.html | 432 +++++++++ .../webextensions/modify_a_web_page/index.html | 254 ++++++ .../webextensions/native_manifests/index.html | 315 +++++++ .../webextensions/native_messaging/index.html | 405 +++++++++ .../packaging_and_installation/index.html | 218 +++++ .../porting_from_google_chrome/index.html | 24 + .../publishing_your_webextension/index.html | 68 ++ .../index.html" | 21 + .../mozilla/add-ons/webextensions/tips/index.html | 54 ++ .../user_interface/browser_action/index.html | 49 ++ .../user_interface/context_menu_items/index.html | 54 ++ .../user_interface/devtools_panels/index.html | 66 ++ .../user_interface/extension_pages/index.html | 70 ++ .../webextensions/user_interface/index.html | 103 +++ .../user_interface/notifications/index.html | 50 ++ .../user_interface/options_pages/index.html | 65 ++ .../user_interface/page_actions/index.html | 50 ++ .../webextensions/user_interface/popups/index.html | 59 ++ .../user_interface/sidebars/index.html | 55 ++ .../add-ons/webextensions/walkthrough/index.html | 451 ++++++++++ .../what_are_webextensions/index.html | 57 ++ .../add-ons/webextensions/what_next_/index.html | 60 ++ .../work_with_the_bookmarks_api/index.html | 199 +++++ .../webextensions/working_with_files/index.html | 160 ++++ .../working_with_the_tabs_api/index.html | 629 +++++++++++++ .../your_first_webextension/index.html | 153 ++++ .../index.html" | 17 + 199 files changed, 23790 insertions(+) create mode 100644 files/ja/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/alarms/alarm/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/alarms/clear/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/alarms/clearall/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/alarms/create/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/alarms/get/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/alarms/getall/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/alarms/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/alarms/onalarm/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodetype/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/create/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/export/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/get/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/import/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/move/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/remove/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/bookmarks/update/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/browseraction/disable/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/browseraction/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/browsersettings/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/browsersettings/newtabpageoverride/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/browsingdata/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/clipboard/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/commands/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/contentscripts/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/contentscripts/register/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/contextualidentities/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/cookies/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/downloads/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/events/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/extension/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/find/find/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/find/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/history/historyitem/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/history/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/i18n/getmessage/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/i18n/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/i18n/languagecode/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/identity/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/idle/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/management/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/menus/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/menus/onclicked/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/notifications/create/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/notifications/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/omnibox/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/pageaction/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/pageaction/onclicked/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/permissions/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/pkcs11/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/privacy/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/proxy/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/runtime/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/runtime/messagesender/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/sessions/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/sidebaraction/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/local/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/storagechange/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/oncreated/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/query/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/theme/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/topsites/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/types/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/webrequest/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/windows/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/windows/windowtype/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/browser_compatibility_for_manifest.json/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/content_scripts/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/content_security_policy/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/examples/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/index/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/intercept_http_requests/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/internationalization/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/author/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/background/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/browser_action/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/commands/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/default_locale/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/description/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/developer/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/icons/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/incognito/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/name/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/omnibox/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/page_action/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/short_name/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/version/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/version_name/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/match_patterns/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/native_manifests/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/native_messaging/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html create mode 100644 "files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" create mode 100644 files/ja/mozilla/add-ons/webextensions/tips/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/notifications/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/walkthrough/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/what_next_/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/work_with_the_bookmarks_api/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/working_with_files/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 "files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" (limited to 'files/ja/mozilla/add-ons/webextensions') diff --git a/files/ja/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html b/files/ja/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..b70402a17d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html @@ -0,0 +1,221 @@ +--- +title: ツールバーにボタンを追加する +slug: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +--- +
{{AddonSidebar}}
+ +

ツールバーボタンは拡張機能で利用できる主な UI コンポーネントです。ツールバーボタンはブラウザーツールバーに存在してアイコンを含んでいます。ユーザーがアイコンをクリックした時、下記の 2 つのいずれかが起こります:

+ + + +

WebExtension API では、こうしたボタンの種類は "ブラウザーアクション" と呼ばれ、次のようにセットアップされます:

+ + + +

シンプルなボタン

+ +

このセクションでは、ツールバーにボタンを追加する拡張機能を作ります。ユーザーがボタンをクリックしたときに https://developer.mozilla.org を新しいタブで開きます。

+ +

まず、新しいディレクトリー"button"を作り、そして"manifest.json"と呼ばれる、以下の内容のファイルを作ります:

+ +
{
+
+  "description": "Demonstrating toolbar buttons",
+  "manifest_version": 2,
+  "name": "button-demo",
+  "version": "1.0",
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

これは "background.js"という名前のバックグラウンドスクリプトと、"icons"ディレクトリーにあるブラウザーアクション(ボタン)を指定します。

+ +
+
These icons are from the bitsies! iconset created by Recep Kütük.
+
+ +

次に、"buttons"ディレクトリー内に "icons" ディレクトリーを作成し、下記に表示されている 2 つのアイコンを保存します:

+ + + +
+ +

高解像度ディスプレイで大きいのを使うように 2 つのアイコンがあります。ブラウザーは現在のディスプレイに最適なアイコンを選ぶよう配慮します。

+ +

次に、拡張機能のルートディレクトリー内の "background.js" を作り、次の中身を入れます:

+ +
function openPage() {
+  browser.tabs.create({
+    url: "https://developer.mozilla.org"
+  });
+}
+
+browser.browserAction.onClicked.addListener(openPage);
+ +

これはブラウザーアクションのクリックイベントをリッスンして、イベントが発火したとき、openPage() 関数が実行されて、tabs API を使って特定のページを開きます。

+ +

ここで完全な拡張機能は次のようです:

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    background.js
+    manifest.json
+ +

ここで拡張機能をインストールしてボタンをクリックします:

+ +

{{EmbedYouTube("kwwTowgT-Ys")}}

+ +

ポップアップを追加する

+ +

ボタンにポップアップを追加してみましょう。manifest.json を次のように置き換えます:

+ +
{
+
+  "description": "Demonstrating toolbar buttons",
+  "manifest_version": 2,
+  "name": "button-demo",
+  "version": "1.0",
+
+  "browser_action": {
+    "browser_style": true,
+    "default_popup": "popup/choose_page.html",
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

オリジナルから 3 つの変更点があります:

+ + + +

さてポップアップを作らねばなりません。"popup" というディレクトリーを作成してその中に "choose_page.html" というファイルを作ります。中身は次の通り:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_page.css"/>
+  </head>
+
+<body>
+  <div class="page-choice">developer.mozilla.org</div>
+  <div class="page-choice">support.mozilla.org</div>
+  <div class="page-choice">addons.mozilla.org</div>
+  <script src="choose_page.js"></script>
+</body>
+
+</html>
+ +

これはふつうの HTML ページに 3 つの{{htmlelement("div")}} 要素があり、その中に Mozilla サイトがあるのが分かるでしょう。また次で追加する CSS ファイルと JavaScript ファイルも入っています。

+ +

"popup" ディレクトリーに"choose_page.css" というファイルを作って、次の中身を入れます:

+ +
html, body {
+  width: 300px;
+}
+
+.page-choice {
+  width: 100%;
+  padding: 4px;
+  font-size: 1.5em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.page-choice:hover {
+  background-color: #CFF2F2;
+}
+ +

これは単にポップアップのスタイリングです。

+ +

次に、"popup" ディレクトリーに"choose_page.js" ファイルを作成し、次の中身を入れます:

+ +
document.addEventListener("click", function(e) {
+  if (!e.target.classList.contains("page-choice")) {
+    return;
+  }
+
+  var chosenPage = "https://" + e.target.textContent;
+  browser.tabs.create({
+    url: chosenPage
+  });
+
+});
+ +

この JavaScript で、ポップアップ選択のクリックをリッスンします。まずは page-choices にクリックがあったかをチェックし、そうでない場合は何もしません。クリックが page-choice にあった場合は、それから URL を作成し、対応するページを含む新規タブを開きます。注意として、バックグラウンドスクリプト内と同じように、ポップアップスクリプトでも WebExtension APIs を使用できます。

+ +

拡張機能の最終構造は次の通りです:

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    popup/
+        choose_page.css
+        choose_page.html
+        choose_page.js
+    manifest.json
+ +

拡張機能を再読み込みし、もう一度ボタンをクリックし、ポップアップの選択をクリックしてみてください:

+ +

{{EmbedYouTube("QPEh1L1xq0Y")}}

+ +

ページアクション

+ +

ページアクション はブラウザーアクションと同様ですが、ブラウザー全体でなく特定ページだけに関連するアクションという点だけが異なります。

+ +

ブラウザーアクションはいつも見えていて、ページアクションは関連するタブだけに見えています。ページアクションボタンはブラウザーツールバーでなく、URL バーに表示されます。

+ +

関連項目

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html new file mode 100644 index 0000000000..2956a356a2 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -0,0 +1,150 @@ +--- +title: 拡張機能の中身 +slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +

{{AddonSidebar}}

+ +

拡張機能は複数のファイルで構成されており、それらのファイルが配布・インストール用にパッケージ化されたものです。この記事では、拡張機能に含まれるファイルについて簡単に説明します。

+ +

manifest.json

+ +

どの拡張機能においても不可欠な唯一のファイルです。このファイルには名前やバージョン、必要とするパーミッションなど、拡張機能に関する基本的なメタデータが含まれます。加えて、アドオンに含まれている他のファイルへの参照も含んでいます。

+ +

このマニフェストには、下記のファイルに対する参照を含めることができます。

+ + + +

+ +

詳細は manifest.json のリファレンスを参照してください。

+ +

マニフェストに載っているものの他に、拡張機能はサポートするファイルの拡張機能ページを持つことができます。

+ +

バックグラウンドスクリプト

+ +

しばしば拡張機能は、ウェブページやブラウザーウィンドウと独立したうえで、状態を長く維持したり処理を長時間実行する必要があります。バックグラウンドスクリプトはそのような場合のためのスクリプトなのです。

+ +

バックグラウンドスクリプトは拡張機能が読み込まれると同時にロードされ、拡張機能が無効にされるかアンインストールされるまでロードされた状態を維持します。あらかじめ要求された必要なパーミッションの限りにおいて、スクリプト中で WebExtention API を使うことができます。

+ +

{{英語版章題("Specifying background scripts")}}

+ +

バックグラウンドスクリプトを定義する

+ +

"manifest.json" の中に background キーを用いることでバックグラウンドスクリプトをインクルードできます。

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

複数のバックグラウンドスクリプトを定義することも可能であり、その場合は 1 つの ウェブページに複数のスクリプトが読み込まれているのと同様に、スクリプトは同じコンテキストで動作します。

+ +

バックグラウンドスクリプトを指定する代わりに、ES5 モジュールをサポートするという追加された利点のあるバックグラウンドページを指定することもできます:

+ +

manifest.json

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

background-page.html

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script type="module" src="background-script.js"></script>
+  </head>
+</html>
+ +

{{英語版章題("Background script environment")}}

+ +

バックグラウンドスクリプトの実行環境

+ +

DOM APIs

+ +

バックグラウンドスクリプトはバックグラウンドページと呼ばれる特殊なページのコンテキストで実行されます。ここでは window というグローバルオブジェクトが利用でき、そのオブジェクトによってすべての DOM API 標準が利用できます。

+ +
+

 Firefoxでは、バックグラウンドページではalert()、confirm()、prompt()の使用はサポートされません。

+
+ +

WebExtension APIs

+ +

バックグラウンドスクリプトは、その拡張機能が持つパーミッションの範囲で WebExtension API にアクセスできます。

+ +

Cross-origin access

+ +

バックグラウンドスクリプトは、拡張機能が持つ host パーミッションに一致するホストに XHR リクエストを送信できます。

+ +

Web content

+ +

バックグラウンドスクリプトからウェブページに直接アクセスすることができません。しかし、ウェブページにコンテンツスクリプトを読み込ませれば、メッセージを渡す API を使ってコンテンツスクリプトと通信をすることができます。

+ +

Content security policy

+ +

バックグラウンドスクリプトは Content Security Policy による制約を受けており、eval() のように危険な処理は実行できません。詳細は Content Security Policy を参照してください。

+ + + +

拡張機能には HTML 文書で中身を決めたいろいろなユーザーインターフェイスコンポーネントを入れる事ができます。

+ + + +

各コンポーネント用に、HTML ファイルと、それを指定する manifest.json の特定プロパティを作成します。HTML ファイルには、通常のウェブページと同様に、CSS と JavaScript ファイルを入れる事ができます。

+ +

これらのすべては拡張機能ページの一種で、通常のウェブページと異なり、JavaScript はバックグラウンドスクリプトと同じ権限で WebExtension API を使用できます。バックグラウンドページの変数にも{{WebExtAPIRef("runtime.getBackgroundPage()")}} を使って直接アクセスすることさえできます。

+ +

拡張機能ページ

+ +

拡張機能に事前定義された UI コンポーネントに属さない HTML 文書を入れることもできます。サイドバー、ポップアップ、オプションページに提供されるドキュメントと違って、これは manifest.json 内にエントリーがないです。しかし、バックグラウンドスクリプトと同様に権限のある WebExtension API のすべてにアクセスできます。

+ +

典型的には {{WebExtAPIRef("windows.create()")}} か {{WebExtAPIRef("tabs.create()")}} を使ってページを読み込みます。

+ +

詳しくは拡張機能ページを見てください。

+ +

コンテンツスクリプト

+ +

ウェブページにアクセスして操作するにはコンテンツスクリプトが用いられます。コンテンツスクリプトは ウェブページに読み込まれて実行されます。

+ +

コンテンツスクリプト はアドオンが提供するスクリプトであり、ウェブページのコンテキスト内で動作します。このため、{{HTMLElement("script")}} 要素で取得されたものなど、そのページ自身が読み込んだスクリプトとは異なります。

+ +

ウェブページに読み込まれた通常のスクリプトと同様に、コンテンツスクリプトも ウェブページの DOM へアクセスできます。

+ +

通常のスクリプトと異なるのは、コンテンツスクリプトで以下のことが可能な点です。

+ + + +

コンテンツスクリプトから通常のスクリプトに直接アクセスすることはできませんが、標準化されている window.postMessage() API を用いれば、スクリプト間でメッセージを交換することが可能です。

+ +

ここでの議論対象であるコンテンツスクリプトとは基本的に JavaScript のことを指していますが、先ほどと同じ方法で ウェブページに CSS を差し込むこともできます。

+ +

詳しくは コンテンツスクリプトの記事を参照してください。

+ +

Web accessible resources

+ +

Web accessible resources とは、拡張機能にインクルードしてコンテンツスクリプトや ウェブページのスクリプトからアクセスできるリソースのことであり、代表的なものは画像や HTML / CSS / JavaScript です。web-accessible なリソースは、特殊な URI スキームを介して ウェブページのスクリプトやコンテンツスクリプトから参照できます。

+ +

例えばコンテンツスクリプトから ウェブページ内に画像を挿入したい場合、拡張機能に画像をインクルードして web-accessible とし、画像を src 属性で参照する img タグをコンテンツスクリプトが作成して ウェブページに追加する、といったシナリオが考えられます。

+ +

詳細は、manifest.json のキーの web_accessible_resources の文書を見てください。

diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/alarm/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/alarm/index.html new file mode 100644 index 0000000000..0d57999f01 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/alarm/index.html @@ -0,0 +1,84 @@ +--- +title: alarms.Alarm +slug: Mozilla/Add-ons/WebExtensions/API/alarms/Alarm +tags: + - API + - Add-ons + - Extensions + - Non-standard + - Reference + - Type + - WebExtensions + - alarm + - alarms +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms/Alarm +--- +
{{AddonSidebar()}}
+ +

単一のアラームに関する情報を含みます。このオブジェクトは {{WebExtAPIRef('alarms.get()')}} や {{WebExtAPIRef('alarms.getAll()')}} の戻り値として返されます。また、{{WebExtAPIRef('alarms.onAlarm')}} リスナに渡されることもあります。

+ +

値の型

+ +

この値の型はオブジェクトであり、以下のプロパティを含みます。

+ +
+
name
+
string. アラームの名前（このアラームを生成した {{WebExtAPIRef('alarms.create()')}} の呼び出し時に渡された名前）を表します。
+
scheduledTime
+
double. 次にアラームが発火する時刻（1970 年 1 月 1 日からの経過ミリ秒）を表します。
+
periodInMinutes{{optional_inline}}
+
double. この値が null ではない場合、アラームが発火する周期を分単位で表します。
+
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Opera
基本サポート{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatGeckoDesktop('45.0') }}{{ CompatOpera('33') }}
+
+ +
+ + + + + + + + + + + + + + + +
機能EdgeFirefox OSFirefox Mobile (Gecko)
+

基本サポート

+ 		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.alarms API に基づいています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/clear/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/clear/index.html new file mode 100644 index 0000000000..e4ddafb425 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/clear/index.html @@ -0,0 +1,92 @@ +--- +title: alarms.clear() +slug: Mozilla/Add-ons/WebExtensions/API/alarms/clear +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - alarms + - clear +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms/clear +--- +
{{AddonSidebar()}}
+ +

与えた名前に対応するアラームを解除します。

+ +

Syntax

+ +
browser.alarms.clear(
+  name,                        // 文字列
+  function(wasCleared) {...}   // 関数
+)
+
+ +

引数

+ +
+
name{{optional_inline}}
+
string. 解除したいアラームの名前を指定します。指定しなかった場合は空文字列 "" が用いられます。
+
callback{{optional_inline}}
+
function. この関数には以下の引数が渡されます。
+
+
+
wasCleared
+
boolean. アラームが解除された場合は true が、それ以外の場合は false が入ります。
+
+
+
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Opera
基本サポート{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatGeckoDesktop('45.0') }}{{ CompatOpera('33') }}
+
+ +
+ + + + + + + + + + + + + + + +
機能EdgeFirefox OSFirefox Mobile (Gecko)
基本サポート{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.alarms API に基づいています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/clearall/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/clearall/index.html new file mode 100644 index 0000000000..889a71b697 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/clearall/index.html @@ -0,0 +1,89 @@ +--- +title: alarms.clearAll() +slug: Mozilla/Add-ons/WebExtensions/API/alarms/clearAll +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - alarms + - clearAll +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms/clearAll +--- +
{{AddonSidebar()}}
+ +

予約されたアラームすべてを解除します。

+ +

構文

+ +
browser.alarms.clearAll(
+  function(wasCleared) {...}   // 関数
+)
+
+ +

引数

+ +
+
callback
+
function. この関数には以下の引数が渡ります。
+
+
+
wasCleared
+
boolean. アラームが解除された場合は true が、それ以外の場合は false が入ります。Chrome の場合は常に true が入ることに注意してください。
+
+
+
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Opera
基本サポート{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatGeckoDesktop('45.0') }}{{ CompatOpera('33') }}
+
+ +
+ + + + + + + + + + + + + + + +
機能EdgeFirefox OSFirefox Mobile (Gecko)
基本サポート{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.alarms API に基づいています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/create/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/create/index.html new file mode 100644 index 0000000000..d95d778d6d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/create/index.html @@ -0,0 +1,125 @@ +--- +title: alarms.create() +slug: Mozilla/Add-ons/WebExtensions/API/alarms/create +tags: + - API + - Add-ons + - Create + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - alarms +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms/create +--- +
{{AddonSidebar()}}
+ +

新しいアラームを生成します。

+ +

構文

+ +
browser.alarms.create(
+  name,              // 文字列
+  alarmInfo          // オブジェクト
+)
+
+ +

引数

+ +
+
name{{optional_inline}}
+
string. アラームの名前を指定します。デフォルト値は空の文字列です。
+
この値は {{WebExtAPIRef('alarms.get()')}} や {{WebExtAPIRef('alarms.clear()')}} で特定のアラームを参照する際に用います。また、{{WebExtAPIRef('alarms.onAlarm')}} のリスナ関数に渡すオブジェクト {{WebExtAPIRef('alarms.Alarm')}} のプロパティ name からも参照されます。
+
アラームの名前は常に固有です（スコープはアドオンごとに区切られます）。以前そのアドオンが作成したアラーム名に一致する文字列を name に与えた場合、既存のアラームは削除されて発火しなくなります。
+
alarmInfo{{optional_inline}}
+
+

object. アラームが最初に発火する時刻を指定する引数です。時刻の指定には絶対値（when プロパティ）か、アラーム設定時を基準とした時間（delayInMinutes プロパティ）のどちらかで指定します。アラームを周期的に発火させるには periodInMinutes プロパティも指定します。

+ +

Chrome の場合、パッケージ化された状態でアドオンが読み込まれると、アラームを 1 分に 1 回以上の頻度で呼び出すことはできません。ここでアドオンが delayInMinutes や when に 1 未満の値を指定しようとすると、アラームは 1 分後に発火します。アドオンが periodInMinutes に 1 未満の値を指定した場合、アラームは 1 分おきに発火します。

+ +

alarmInfo オブジェクトで指定できるプロパティは以下の通りです。

+
+
+
+
when{{optional_inline}}
+
double. アラームが最初に発火する時刻を 1970 年 1 月 1 日からの経過ミリ秒 で指定します。現在までの経過ミリ秒は Date.now() で取得できます。when を指定した場合は delayInMinutes を指定しないでください。
+
delayInMinutes{{optional_inline}}
+
double. アラームが最初に発火する時刻を、アラーム設定時から何分後かで指定します。 delayInMinutes を指定した場合は when を指定しないでください。
+
periodInMinutes{{optional_inline}}
+
double. この値が指定された場合、アラームは最初の発火時刻から periodInMinutes の周期で繰り返し発火します。この値を指定したうえでwhen と delayInMinutes の両方を省略した場合、最初にアラームが発火するのは periodInMinutes の時間が経過した後になります。periodInMinutes が指定されなければ、アラームは一度だけ発火します。
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.alarms.create")}}

+ +

例

+ +

現在から相対的な時刻で一度限り発火するアラームを "" という名前で作成する例：

+ +
const delayInMinutes = 5;
+
+chrome.alarms.create({
+  delayInMinutes
+});
+ +

現在からの相対的な時刻から繰り返すアラームを "my-periodic-alarm" の名前で作成する例：

+ +
const delayInMinutes = 5;
+const periodInMinutes = 2;
+
+chrome.alarms.create("my-periodic-alarm", {
+  delayInMinutes,
+  periodInMinutes
+});
+ +

絶対的な時刻から繰り返すアラームを "my-periodic-alarm" の名前で作成する例：

+ +
const when = 1545696000;
+const periodInMinutes = 2;
+
+chrome.alarms.create("my-periodic-alarm", {
+  when,
+  periodInMinutes
+});
+ +
謝辞 + +

この API は Chromium の chrome.alarms API に基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/get/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/get/index.html new file mode 100644 index 0000000000..500a3be7db --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/get/index.html @@ -0,0 +1,92 @@ +--- +title: alarms.get() +slug: Mozilla/Add-ons/WebExtensions/API/alarms/get +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - alarms + - get +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms/get +--- +
{{AddonSidebar()}}
+ +

与えた名前に対応するアラームを取得します。取得したアラームは、コールバック関数に渡す {{WebExtAPIRef('alarms.Alarm')}} オブジェクトとして用いることがあります。

+ +

構文

+ +
browser.alarms.get(
+  name,                   // 文字列
+  function(alarm) {...}   // 関数
+)
+
+ +

引数

+ +
+
name{{optional_inline}}
+
string. 取得したいアラームの名前を指定します。指定しなかった場合は空文字列 "" が用いられます。
+
callback
+
function. この関数には以下の引数が渡ります。
+
+
+
alarm
+
{{WebExtAPIRef('alarms.Alarm')}}. 名前が name にマッチするアラームが入ります。マッチするアラームがなかった場合、undefined が入ります。
+
+
+
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Opera
基本サポート{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatGeckoDesktop('45.0') }}{{ CompatOpera('33') }}
+
+ +
+ + + + + + + + + + + + + + + +
機能EdgeFirefox OSFirefox Mobile (Gecko)
基本サポート{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.alarms API に基づいています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/getall/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/getall/index.html new file mode 100644 index 0000000000..a7d8a3759b --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/getall/index.html @@ -0,0 +1,73 @@ +--- +title: alarms.getAll() +slug: Mozilla/Add-ons/WebExtensions/API/alarms/getAll +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - alarms + - getAll +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms/getAll +--- +
{{AddonSidebar()}}
+ +

予約されたアラームすべてを取得します。取得されたアラームは {{WebExtAPIRef('alarms.Alarm')}} オブジェクトの配列としてコールバック関数に渡されます。

+ +

構文

+ +
browser.alarms.getAll(
+  function(array) {...}   // 関数
+)
+
+ +

引数

+ +
+
callback
+
function. この関数には以下の引数が渡ります。
+
+
+
alarms
+
予約されたアラームすべてを含む {{WebExtAPIRef('alarms.Alarm')}} の配列です。予約されたアラームがない場合は空の配列となります。
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.alarms.getAll")}}

+ +

例

+ +

コールバックを用いた例：

+ +
function gotAll(alarms) {
+  for (var alarm of alarms) {
+    console.log(alarm.name);
+  }
+}
+
+chrome.alarms.getAll(gotAll);
+ +

Promise を用いた例：

+ +
function gotAll(alarms) {
+  for (var alarm of alarms) {
+    console.log(alarm.name);
+  }
+}
+
+var getAlarms = browser.alarms.getAll();
+getAlarms.then(gotAll);
+ +

{{WebExtExamples}}

+ +
+

謝辞

+ +

この API はChromium の chrome.alarms API に基づいています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/index.html new file mode 100644 index 0000000000..3f37d24473 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/index.html @@ -0,0 +1,50 @@ +--- +title: alarms +slug: Mozilla/Add-ons/WebExtensions/API/alarms +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms +--- +
{{AddonSidebar}}
+ +

コードが動作するタイミングを予約します。この API は setTimeout() や setInterval() と似ていますが、 alarms API はバックグラウンドで動作する点が異なります。

+ +

この API を利用するには "alarms" パーミッション が必要です。

+ +

関連する値の型

+ +
+
{{WebExtAPIRef("alarms.Alarm")}}
+
特定のアラームに関する情報が含まれます。
+
+ +

メソッド

+ +
+
{{WebExtAPIRef("alarms.create()")}}
+
新しいアラームを生成します。
+
{{WebExtAPIRef("alarms.get()")}}
+
与えた名前に対応するアラームを取得します。
+
{{WebExtAPIRef("alarms.getAll()")}}
+
予約されたアラームすべてを取得します。
+
{{WebExtAPIRef("alarms.clear()")}}
+
与えた名前に対応するアラームを解除します。
+
{{WebExtAPIRef("alarms.clearAll()")}}
+
予約されたアラームすべてを解除します。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("alarms.onAlarm")}}
+
アラームが動作した際に発火します。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.alarms")}} {{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.alarms API に基づいています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/alarms/onalarm/index.html b/files/ja/mozilla/add-ons/webextensions/api/alarms/onalarm/index.html new file mode 100644 index 0000000000..fec4fd491a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/alarms/onalarm/index.html @@ -0,0 +1,105 @@ +--- +title: alarms.onAlarm +slug: Mozilla/Add-ons/WebExtensions/API/alarms/onAlarm +tags: + - API + - Add-ons + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - alarms + - onAlarm +translation_of: Mozilla/Add-ons/WebExtensions/API/alarms/onAlarm +--- +
{{AddonSidebar()}}
+ +

アドオンによってアラームが動作した際に発火します。

+ +

構文

+ +
browser.alarms.onAlarm.addListener(function(
+  alarm      // Alarm
+) {...})
+browser.alarms.onAlarm.removeListener(listener)
+browser.alarms.onAlarm.hasListener(listener)
+
+ +

このイベントには 3 つのメソッドが用意されています。

+ +
+
addListener(callback)
+
イベントリスナを追加します。
+
removeListener(listener)
+
イベントリスナを削除します。引数 listener には削除したいリスナを指定します。
+
hasListener(listener)
+
listener がイベントリスナとして登録されているか確認します。登録されていれば true を、それ以外の場合は false を返します。
+
+ +

addListener の構文

+ +

引数

+ +
+
callback
+
+

このイベントが発火した際に呼び出される関数を指定します。この関数には以下の引数が渡ります。

+ +
+
alarm
+
発火するアラーム {{WebExtAPIRef('alarms.Alarm')}} が入ります。発火したアラームを判別するには Alarm.name が利用できます。
+
+
+
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Opera
基本サポート{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatGeckoDesktop('45.0') }}{{ CompatOpera('33') }}
+
+ +
+ + + + + + + + + + + + + + + +
機能EdgeFirefox OSFirefox Mobile (Gecko)
基本サポート{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.alarms API に基づいています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.html new file mode 100644 index 0000000000..a6db52f663 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.html @@ -0,0 +1,91 @@ +--- +title: bookmarks.BookmarkTreeNode +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode +tags: + - API + - Add-ons + - BookmarkTreeNode + - Bookmarks + - Extensions + - Non-standard + - Reference + - Type + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode +--- +
{{AddonSidebar()}}
+ +

bookmarks.BookmarkTreeNode 型のオブジェクトは、ブックマークツリー上のノード（ブックマーク / フォルダ）を表現するものです。子ノードは親フォルダの中で index に従って順序付けされます。

+ +

値の型

+ +

以下のプロパティを含む {{jsxref("object")}} です。

+ +
+
id
+
そのノードを一意に識別する {{jsxref("string")}} です。この ID はユーザのプロファイル内で固有であり、ブラウザを再起動した後も有効です。
+
parentId {{optional_inline}}
+
親フォルダの ID を表す {{jsxref("string")}} です。ルートノードの場合は省略されます。
+
index {{optional_inline}}
+
親フォルダの中におけるノードの位置を表す 0 以上の {{jsxref("number")}} です。0 は先頭の要素を意味します。
+
url {{optional_inline}}
+
ブックマークの URL を表す {{jsxref("string")}} です。フォルダの場合は省略されます。
+
title
+
ブックマークリストやメニューにノードが表示される際のテキストを表す {{jsxref("string")}} です。
+
dateAdded {{optional_inline}}
+
このノードが生成された時刻を 1970 年 1 月 1 日からの経過ミリ秒 で表す {{jsxref("number")}} です。
+
dateGroupModified {{optional_inline}}
+
その内容の最終変更時刻を 1970 年 1 月 1 日からの経過ミリ秒 で表す {{jsxref("number")}} です。
+
unmodifiable {{optional_inline}}
+
{{WebExtAPIRef('bookmarks.BookmarkTreeNodeUnmodifiable')}} 型で表現される {{jsxref("string")}} です。このノードが変更不可である理由を表します。変更可能な場合には省略されます。
+
children {{optional_inline}}
+
各要素がノードの子要素を表す、{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} の {{jsxref("array")}} です。リストの要素は UI に表示されているのと同じ順序で並びます。フォルダの場合は省略されます。
+
+ +
+

現在、ブックマークリストのセパレータをこのオブジェクトで表すことはできません。

+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.BookmarkTreeNode", 10)}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodetype/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodetype/index.html new file mode 100644 index 0000000000..8a87f614ea --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodetype/index.html @@ -0,0 +1,39 @@ +--- +title: bookmarks.BookmarkTreeNodeType +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNodeType +tags: + - API + - Add-ons + - BookmarkTreeNodeType + - Bookmarks + - Extensions + - Property + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNodeType +--- +
{{AddonSidebar()}}
+ +

bookmarks.BookmarkTreeNodeType 型は、ブックマークツリーのノードがブックマーク、フォルダーまたはセパレーターであるかどうかを示すために使用されます。

+ +

型

+ +

bookmarks.BookmarkTreeNodeType は以下の 3 つのうちいずれかの値を取りうる {{jsxref("string")}} です。

+ + + +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.bookmarks.BookmarkTreeNodeType", 10)}}

+ + + +

{{WebExtExamples}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.html new file mode 100644 index 0000000000..2d8575e341 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.html @@ -0,0 +1,74 @@ +--- +title: bookmarks.BookmarkTreeNodeUnmodifiable +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNodeUnmodifiable +tags: + - API + - Add-ons + - BookmarkTreeNodeUnmodifiable + - Bookmarks + - Extensions + - Non-standard + - Reference + - Type + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNodeUnmodifiable +--- +

{{AddonSidebar()}}

+ +

bookmarks.BookmarkTreeNodeUnmodifiable 型は、ブックマークツリー上のノード（ブックマーク / フォルダー）が変更不可な理由を表すものです。この型は、ブックマークノードの {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "bookmarks.BookmarkTreeNode.unmodifiable", "unmodifiable")}} プロパティで使用されます。

+ +

値の型

+ +

この値は {{jsxref("string")}} 型であり、現在取りうる値は "managed" のみです。すなわち、システム管理者（ペアレンタルコントロールが有効な場合は保護者）がこのブックマークノードを設定したことを意味します。

+ +

ブラウザー実装状況

+ + + + + +

{{Compat("webextensions.api.bookmarks.BookmarkTreeNodeUnmodifiable")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/create/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/create/index.html new file mode 100644 index 0000000000..1e4a2c36fe --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/create/index.html @@ -0,0 +1,98 @@ +--- +title: bookmarks.create() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/create +tags: + - API + - Add-ons + - Bookmarks + - Create + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/create +--- +
{{AddonSidebar()}}
+ +

bookmarks.create() は、parentId で指定した {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} の配下に、ブックマークやフォルダを作成するメソッドです。フォルダを作成する場合は、{{WebExtAPIRef("bookmarks.CreateDetails", "CreateDetails", "url")}} の引数を省略するか空にします。

+ +

構文

+ +
browser.bookmarks.create(
+  bookmark, // CreateDetails
+  callback  // 関数（省略可）
+)
+
+ +

引数

+ +
+
bookmark
+
{{WebExtAPIRef('bookmarks.CreateDetails')}}
+
callback{{optional_inline}}
+
ブックマークが新しく作成された際に呼び出される {{jsxref("function")}} です。この関数は以下の引数を 1 つ受け取ります。
+
+
+
result
+
新しく作成されたブックマークノードを表す {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}}
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.create")}}

+ +

使用例

+ +

以下の例は、このページのブックマークをデフォルトのフォルダ（Firefox は「未分類のブックマーク」、Chrome は「その他のブックマーク」）に作成するものです。

+ +
function onBookmarkAdded(bookmarkItem) {
+  console.log("Bookmark added with ID: " + bookmarkItem.id);
+}
+
+chrome.bookmarks.create({
+  title: "bookmarks.create() on MDN",
+  url: "https://developer.mozilla.org/Add-ons/WebExtensions/API/bookmarks/create"
+}, onBookmarkAdded);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.html new file mode 100644 index 0000000000..b7463079da --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.html @@ -0,0 +1,81 @@ +--- +title: bookmarks.CreateDetails +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/CreateDetails +tags: + - API + - Add-ons + - Bookmarks + - CreateDetails + - Extensions + - Non-standard + - Reference + - Type + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/CreateDetails +--- +

{{AddonSidebar()}}

+ +

CreateDetails 型は、新しいブックマークやフォルダのプロパティを表すためのオブジェクト型です。{{WebExtAPIRef("bookmarks.create()")}} メソッドの呼び出し時に渡します。

+ +
+

現在、ブックマークリストのセパレータをこのオブジェクト型で表すことはできません。

+
+ +

値の型

+ +

以下のプロパティを含む {{jsxref("object")}} です。

+ +
+
parentId{{optional_inline}}
+
新しいブックマーク / フォルダの親フォルダを指定する {{jsxref("string")}} です。デフォルト値はブラウザによって異なり、Chrome の場合は「その他のブックマーク」、Firefox の場合は「未分類のブックマーク」です。
+
index{{optional_inline}}
+
親要素の配下における、新しいブックマーク / フォルダの位置を指定する {{jsxref("number")}} です。値が 0 の場合、リストの先頭に置かれます。
+
title{{optional_inline}}
+
作成するブックマークのタイトルやフォルダの名前を指定する {{jsxref("string")}} です。値を省略した場合、タイトルは "" になります。
+
url{{optional_inline}}
+
ブックマークの URL を指定する {{jsxref("string")}} です。値を省略するか null を指定した場合、ブックマークではなくフォルダが作成されます。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.CreateDetails", 10)}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/export/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/export/index.html new file mode 100644 index 0000000000..381e471807 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/export/index.html @@ -0,0 +1,114 @@ +--- +title: bookmarks.export() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/export +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - export +translation_of: Archive/Add-ons/bookmarks.export +--- +

{{AddonSidebar()}}

+ +

ブックマークを HTML ブックマークファイルにエクスポートします。

+ +

構文

+ +
browser.bookmarks.export(
+  function() {...} // 関数（省略可）
+)
+
+ +

Parameters

+ +
+
callback{{optional_inline}}
+
function.
+
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Opera
基本サポート{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatNo() }}{{ CompatOpera('33') }}
+
+ +
+ + + + + + + + + + + + + + + +
機能EdgeFirefox OSFirefox Mobile (Gecko)
基本サポート{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/get/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/get/index.html new file mode 100644 index 0000000000..a3d5245abc --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/get/index.html @@ -0,0 +1,102 @@ +--- +title: bookmarks.get() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/get +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - get +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/get +--- +
{{AddonSidebar()}}
+ +

bookmarks.get() は、指定した {{WebExtAPIRef("bookmarks.BookmarkTreeNode")}} の ID（または ID の配列）にマッチするノードを取得するメソッドです。

+ +

構文

+ +
browser.bookmarks.get(
+  idOrIdList, // 文字列または文字列の配列
+  callback    // 関数
+)
+
+ +

引数

+ +
+
idOrIdList
+
取得したい {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} オブジェクトの ID を指定した {{jsxref("string")}} または {{jsxref("string")}} の {[jsxref("array")}} です。
+
callback
+
ノードが取得された際に実行される {{jsxref("function")}} です。この関数には以下の引数が渡ります。
+
+
+
results
+
各要素が {{WebExtAPIRef("bookmarks.BookmarkTreeNode")}} である、マッチしたノードの {{jsxref("array")}} です。セパレータは結果の戻り値に含まれません。ノードが見つからなかった場合の results は undefined となり、{{WebExtAPIRef("runtime.lastError")}} がセットされます。
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.get")}}

+ +

使用例

+ +

以下の例は、特定の ID を持つブックマークが存在するかどうかを確認するものです。

+ +
function onGot(bookmarkItems) {
+  if (bookmarkItems) {
+    console.log("bookmark exists!");
+  } else {
+    console.log("bookmark does not exist!");
+    console.log("lasterror: " + chrome.runtime.lastError);
+  }
+}
+
+function doesBookmarkExist(bookmarkId) {
+  browser.bookmarks.get(bookmarkId, onGot);
+}
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいて作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.html new file mode 100644 index 0000000000..6a489247c5 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.html @@ -0,0 +1,126 @@ +--- +title: bookmarks.getChildren() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/getChildren +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - getChildren +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/getChildren +--- +

{{AddonSidebar()}}

+ +

bookmarks.getChildren() は、ブックマークフォルダの ID を {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} で指定し、その直下にあたる子要素をすべて取得します。

+ +

構文

+ +
browser.bookmarks.getChildren(
+  id,      // 文字列
+  callback // 関数
+)
+
+ +

Parameters

+ +
+
id
+
取得したい子要素を持つフォルダ ID を指定する {{jsxref("string")}} です。
+
callback
+
子ノードのリストが取得された際に実行される関数です。この関数には以下の引数が渡ります。
+
+
+
results
+
各要素が 1 つの子ノードを表す、{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} の {{jsxref("array")}} です。要素の順序は、UI に表示されているのと同じ順番です。現在、セパレータの有無は結果に含まれません。指定したノードに子要素が含まれていなかった場合、results は空配列となります。
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.getChildren")}}

+ +

使用例

+ +

基本的な使い方

+ +
function gotChildren(children) {
+  console.log(children);
+}
+
+chrome.bookmarks.getChildren(bookmarkItemId, gotChildren);
+ +

指定したフォルダでブックマークを切替

+ +

以下の例は、フォルダを {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} で指定し、そのフォルダに新しいブックマークを作成するものです。ただし、既に同じ名前のブックマークがあった場合は、逆に既存のブックマークを削除することとします。このとき新しいブックマークは作成されません。

+ +
function toggleBookmark(folderNode, title, url) {
+  chrome.bookmarks.getChildren(folderNode.id, function(results) {
+    let node = results.find(function(el) {
+      return el.title === title;
+    });
+
+    // ブックマークが存在する場合は削除する
+    // そうでなければ新しく作成する
+
+    if (node !== undefined) {
+      chrome.bookmarks.remove(node.id);
+    } else {
+      chrome.bookmarks.create({
+        parentId: folderNode.id,
+        title: title,
+        url: url
+      });
+    }
+  });
+}
+ +

先の toggleBookmark() 関数は、folderNode で指定した {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} の中に既に存在しているすべてのブックマークのリストを取得するため、最初に bookmarks.getChildren() を呼び出しています。

+ +

コールバックに指定された匿名関数には results という引数が 1 つ渡されます。この引数は、フォルダの直下にある子要素をすべて含んだ配列です。まず初めに、与えられたタイトルを持つノードがフォルダに存在するかどうかを調べます。ここでは {{jsxref("Array.find()")}} メソッドを使い、タイトルが等しいかどうかをコールバック内で判定しています。

+ +

マッチするノードがあった場合（すなわち、node が undefined ではない場合）、指定した title を持つブックマークが既に存在していたことが分かったので、既存のブックマークを削除するために {{WebExtAPIRef("bookmarks.remove()")}} を呼び出します。

+ +

そうではなかった場合、新しいブックマークを作成するために {{WebExtAPIRef("bookmarks.create()")}} が呼び出します。この際、引数 folderNode で与えられていたフォルダ ID を新しい親フォルダの ID に指定し、合わせて title と url も指定します。

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.html new file mode 100644 index 0000000000..3900d1888f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.html @@ -0,0 +1,97 @@ +--- +title: bookmarks.getRecent() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/getRecent +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - getRecent +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/getRecent +--- +

{{AddonSidebar()}}

+ +

bookmarks.getRecent() は、最近に追加されたブックマークを指定した最大個数まで取得し、{{WebExtAPIRef('bookmarks.BookmarkTreeNode', 'BookmarkTreeNode')}} オブジェクトの配列としてコールバック関数に渡します。

+ +

構文

+ +
browser.bookmarks.getRecent(
+  numberOfItems, // 整数
+  callback       // 関数
+)
+
+ +

引数

+ +
+
numberOfItems
+
取得する要素の最大個数を指定する整数です。最近追加された要素のうち、ここで指定した個数までが戻り値のリストに含まれます。
+
callback
+
リストが取得された際に実行される関数です。この関数には以下の引数が渡ります。
+
+
+
results
+
各要素が 1 つのブックマークノードを表す {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} オブジェクトの {{jsxref("array")}}
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.getRecent")}}

+ +

使用例

+ +

以下の例は、直近に追加されたブックマークの URL を出力するものです。

+ +
function gotMostRecent(bookmarkItems) {
+  if (bookmarkItems.length) {
+    console.log(bookmarkItems[0].url);
+  }
+}
+
+chrome.bookmarks.getRecent(1, gotMostRecent);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいて作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.html new file mode 100644 index 0000000000..c13185cd5a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.html @@ -0,0 +1,125 @@ +--- +title: bookmarks.getSubTree() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/getSubTree +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - getSubTree +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/getSubTree +--- +

{{AddonSidebar()}}

+ +

bookmarks.getSubTree() は、ID を指定して {{WebExtAPIRef("bookmarks.BookmarkTreeNode")}} を非同期に取得するメソッドです。

+ +

対象がフォルダの場合、children プロパティを再帰的にたどることで、すべての子要素にアクセスすることができます。

+ +

構文

+ +
browser.bookmarks.getSubTree(
+  id,      // 文字列
+  callback // 関数
+)
+
+ +

引数

+ +
+
id
+
取得したい部分木のルートノードに対応する ID を表す {{jsxref("string")}} です。
+
callback
+
リクエストしたノードが取得された際に呼び出される関数です。この関数には以下の引数が渡ります。
+
+
+
results
+
指定した ID に対応する {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} オブジェクトが 1 つ含まれた配列
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.getSubTree")}}

+ +

例

+ +

以下の例は、指定したノードの配下にある部分木を再帰的に出力するものです。

+ +
function makeIndent(indentLength) {
+  return ".".repeat(indentLength);
+}
+
+function logItems(bookmarkItem, indent) {
+  if (bookmarkItem.url) {
+    console.log(makeIndent(indent) + bookmarkItem.url);
+  } else {
+    console.log(makeIndent(indent) + "Folder");
+    indent++;
+  }
+  if (bookmarkItem.children) {
+    for (child of bookmarkItem.children) {
+      logItems(child, indent);
+    }
+  }
+  indent--;
+}
+
+function logSubTree(bookmarkItems) {
+  logItems(bookmarkItems[0], 0);
+}
+
+function handleClick() {
+  var subTreeID = "unfiled_____";
+  chrome.bookmarks.getSubTree(subTreeID, logSubTree);
+}
+
+chrome.browserAction.onClicked.addListener(handleClick);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ +

 

+ + + +

 

diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.html new file mode 100644 index 0000000000..b66987075d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.html @@ -0,0 +1,117 @@ +--- +title: bookmarks.getTree() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/getTree +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - getTree +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/getTree +--- +

{{AddonSidebar()}}

+ +

bookmarks.getTree() は、ブックマークツリーのルートを表した{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}} オブジェクトの配列を返します。

+ +

構文

+ +
browser.bookmarks.getTree(
+  callback // 関数
+)
+
+ +

引数

+ +
+
callback
+
ルートに相当するノードが取得された際に実行される関数です。この関数には以下の引数が渡ります。
+
+
+
results
+
+

ルートノードを表す {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} オブジェクトが 1 つ含まれた配列

+
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.getTree")}}

+ +

例

+ +

以下の例は、ブックマークツリー全体を出力するものです。

+ +
function makeIndent(indentLength) {
+  return ".".repeat(indentLength);
+}
+
+function logItems(bookmarkItem, indent) {
+  if (bookmarkItem.url) {
+    console.log(makeIndent(indent) + bookmarkItem.url);
+  } else {
+    console.log(makeIndent(indent) + "Folder");
+    indent++;
+  }
+  if (bookmarkItem.children) {
+    for (child of bookmarkItem.children) {
+      logItems(child, indent);
+    }
+  }
+  indent--;
+}
+
+function logTree(bookmarkItems) {
+  logItems(bookmarkItems[0], 0);
+}
+
+function handleClick() {
+  chrome.bookmarks.getTree(logTree);
+}
+
+chrome.browserAction.onClicked.addListener(handleClick);
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/import/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/import/index.html new file mode 100644 index 0000000000..758b72dbfa --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/import/index.html @@ -0,0 +1,114 @@ +--- +title: bookmarks.import() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/import +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - import +translation_of: Archive/Add-ons/bookmarks.import +--- +

{{AddonSidebar()}}

+ +

ブックマークを HTML ブックマークファイルからインポートします。

+ +

構文

+ +
browser.bookmarks.import(
+  function() {...} // 関数（省略可）
+)
+
+ +

引数

+ +
+
callback{{optional_inline}}
+
function.
+
+ +

ブラウザ実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Opera
基本サポート{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatNo() }}{{ CompatOpera('33') }}
+
+ +
+ + + + + + + + + + + + + + + +
機能EdgeFirefox OSFirefox Mobile (Gecko)
基本サポート{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.html new file mode 100644 index 0000000000..c1c073c551 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/index.html @@ -0,0 +1,130 @@ +--- +title: bookmarks +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks +--- +

{{AddonSidebar}}

+ +

WebExtensions {{WebExtAPIRef("bookmarks")}} API を利用すると、拡張機能からブラウザーのブックマークシステムにアクセスしたり、操作することができます。ページをブックマークしたり、既存のブックマークを取得したり、ブックマークを編集・削除・整理することが可能です。

+ +

この API を使用する際は、拡張機能の manifest.json ファイルで "bookmarks" パーミッション を指定する必要があります。

+ +

拡張機能ではブックマークツリーのルートノードではブックマークを作成・編集・削除できません。それをしようとすると次のエラーになります: "The bookmark root cannot be modified"

+ +

関連する値の型

+ +
+
{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}
+
ブックマークツリー上のブックマークやフォルダーを表します。
+
{{WebExtAPIRef("bookmarks.BookmarkTreeNodeType")}}
+
ツリー内のノードがブックマークかフォルダーかセパレーターかを表す {{jsxref("string")}} の列挙型です。
+
{{WebExtAPIRef("bookmarks.BookmarkTreeNodeUnmodifiable")}}
+
ブックマークやフォルダーが変更不可である理由を表す {{jsxref("string")}} の列挙型です。
+
{{WebExtAPIRef("bookmarks.CreateDetails")}}
+
新しいブックマークを作成する際、{{WebExtAPIRef("bookmarks.create()")}} メソッドに渡す情報を含みます。
+
+ +

関数

+ +
+
{{WebExtAPIRef("bookmarks.create()")}}
+
ブックマークやフォルダーを作成します。
+
{{WebExtAPIRef("bookmarks.get()")}}
+
ブックマークの ID や ID の配列を指定し、1 つ以上の {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode(s)")}} を取得します。
+
{{WebExtAPIRef("bookmarks.getChildren()")}}
+
指定した {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} の子要素を取得します。
+
{{WebExtAPIRef("bookmarks.getRecent()")}}
+
最近追加されたブックマークを取得します。
+
{{WebExtAPIRef("bookmarks.getSubTree()")}}
+
指定したノードを起点とする、ブックマークツリーの部分木を取得します。
+
{{WebExtAPIRef("bookmarks.getTree()")}}
+
ブックマークのツリー全体を {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} オブジェクトの配列として取得します。
+
{{WebExtAPIRef("bookmarks.move()")}}
+
指定した {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} を所望の場所に移します。
+
{{WebExtAPIRef("bookmarks.remove()")}}
+
ノードの ID を指定し、ブックマークや空のブックマークフォルダーを削除します。
+
{{WebExtAPIRef("bookmarks.removeTree()")}}
+
ブックマークのフォルダーを再帰的に削除します。すなわち、フォルダーノードの ID を指定し、そのノードと子要素すべてを削除します。
+
{{WebExtAPIRef("bookmarks.search()")}}
+
与えた条件に一致する {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNodes")}} を検索します。
+
{{WebExtAPIRef("bookmarks.update()")}}
+
ブックマークの ID を指定し、ブックマークの URL やタイトル、またはフォルダーの名前を更新します。
+
+ +

Events

+ +
+
{{WebExtAPIRef("bookmarks.onCreated")}}
+
ブックマークやフォルダーが作成された際に発火します。
+
{{WebExtAPIRef("bookmarks.onRemoved")}}
+
ブックマークやフォルダーが削除された際に発火します。フォルダーが再帰的に削除された場合は、そのフォルダーに対して一回だけ発火し、フォルダーの中身については発火しません。
+
{{WebExtAPIRef("bookmarks.onChanged")}}
+
ブックマークやフォルダーが変更された際に発火します。現在は title と url の変更に対してのみ発火します。
+
{{WebExtAPIRef("bookmarks.onMoved")}}
+
異なる親フォルダーへ、または同じフォルダー内の異なる場所へブックマークやフォルダーが移された際に発火します。
+
{{WebExtAPIRef("bookmarks.onChildrenReordered")}}
+
UI で表示されている順序に伴って子フォルダーの順序も変更された際に発火します。{{WebExtAPIRef("bookmarks.move", "move()")}} の実行後には発火しません。
+
{{WebExtAPIRef("bookmarks.onImportBegan")}}
+
ブックマークのインポートが開始した際に発火します。パフォーマンスが重要である場合、イベントのオブザーバは {{WebExtAPIRef("bookmarks.onImportEnded")}} が発火するまで {{WebExtAPIRef("bookmarks.onCreated")}} を無視すべきでしょう。その場合であっても、オブザーバは他のイベントについては即座に処理すべきでしょう。
+
{{WebExtAPIRef("bookmarks.onImportEnded")}}
+
ブックマークのインポートが終了した際に発火します。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.bookmarks")}}

+ + + +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/move/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/move/index.html new file mode 100644 index 0000000000..c164626551 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/move/index.html @@ -0,0 +1,107 @@ +--- +title: bookmarks.move() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/move +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/move +--- +

{{AddonSidebar()}}

+ +

bookmarks.move() は、指定した {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} をブックマークツリー内の所望の位置に移すメソッドです。このメソッドにより、ブックマークを新しいフォルダの中や、同じフォルダ内の別の場所に移動させることができます。

+ +

構文

+ +
browser.bookmarks.move(
+  id,          // 文字列
+  destination, // オブジェクト
+  callback     // 関数（省略可）
+)
+
+ +

引数

+ +
+
id
+
移動させるブックマーク / フォルダの ID を表す {{jsxref("string")}} です。
+
destination
+
ブックマークの移動先を表す {{jsxref("object")}} です。このオブジェクトには以下のプロパティが必ず 1 つ以上含まれます。
+
+
+
parentId {{optional_inline}}
+
移動先フォルダの ID を指定する {{jsxref("string")}} です。この値が省略された場合、現在と同じフォルダ内の新しい場所へ移動されます。
+
index {{optional_inline}}
+
移動先フォルダ内における位置を指定する 0 起点のインデックスです。値が 0 の場合、そのフォルダの先頭に移動されます。値が省略された場合、新しい親フォルダ内の最後に移動されます。
+
+
+
callback {{optional_inline}}
+
移動が終了した際に呼び出される {{jsxref("function")}} です。この関数は以下の引数を 1 つ受け取ります。
+
+
+
result
+
移動された新しいノードを表す {{WebExtAPIRef('bookmarks.BookmarkTreeNode', 'BookmarkTreeNode')}}
+
+ +

 

+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.move")}}

+ +

使用例

+ +

ブックマークを現在のフォルダの先頭へ移動

+ +

次の例は、既存のブックマークを現在のフォルダの先頭へ移動させるものです。移動後に必要な処理は特にないため、ここではコールバック無しで呼び出しています。

+ +
browser.bookmarks.move(bookmarkID, { index: 0 });
+ +

ブックマークを異なるフォルダへ移動

+ +

以下の例は、ID で指定したブックマークを、別の ID で指定したフォルダへ移動させる関数です。今回は、移動後に実行されるコールバック関数も指定しています。

+ +
function moveToFolder(bookmarkId, destinationId) {
+  browser.bookmarks.move(bookmarkId, { parentId: destinationId },
+                         function(updatedNode) {
+    /* ブックマークの移動後に行う処理 */
+  });
+}
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.html new file mode 100644 index 0000000000..bf6cf83ce7 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.html @@ -0,0 +1,138 @@ +--- +title: bookmarks.onChanged +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onChanged +tags: + - API + - Add-ons + - Bookmarks + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - onChanged +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/onChanged +--- +
{{AddonSidebar()}}
+ +

以下の変更に対して発火します。

+ + + +

構文

+ +
browser.bookmarks.onChanged.addListener(function(
+  id,        // 文字列
+  changeInfo // オブジェクト
+) {...})
+browser.bookmarks.onChanged.removeListener(listener)
+browser.bookmarks.onChanged.hasListener(listener)
+
+ +

このイベントには 3 つのメソッドが用意されています。

+ +
+
addListener(callback)
+
イベントリスナを追加します。
+
removeListener(listener)
+
イベントリスナを削除します。引数 listener には削除したいリスナを指定します。
+
hasListener(listener)
+
listener がイベントリスナとして登録されているか確認します。登録されていれば true を、それ以外の場合は false を返します。
+
+ +

addListener の構文

+ +

引数

+ +
+
callback
+
+

イベントが発火した際に呼び出される関数を指定します。この関数には以下の引数が渡ります。

+
+
+ +
+
+
+
id
+
変更を受けた要素の ID を表す {{jsxref("string")}}
+
+ +
+
changeInfo
+
変更に関する詳細を含んだ {{jsxref("object")}}
+
+
+
+ +

付随するオブジェクト

+ +

changeInfo

+ +
+
title
+
変更された要素のタイトルを表す {{jsxref("string")}}
+
url{{optional_inline}}
+
変更された要素の URL を表す {{jsxref("string")}}。要素がフォルダだった場合に値は入りません。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.onChanged")}}

+ +

使用例

+ +
function handleChanged(id, changeInfo) {
+  console.log("Item: " + id + " changed");
+  console.log("Title: " + changeInfo.title);
+  console.log("Url: " + changeInfo.url);
+}
+
+function handleClick() {
+  chrome.bookmarks.onChanged.addListener(handleChanged);
+}
+
+chrome.browserAction.onClicked.addListener(handleClick);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.html new file mode 100644 index 0000000000..3d5b10eb91 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.html @@ -0,0 +1,130 @@ +--- +title: bookmarks.onChildrenReordered +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onChildrenReordered +tags: + - API + - Add-ons + - Bookmarks + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - onChildrenReordered +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/onChildrenReordered +--- +

{{AddonSidebar()}}

+ +

UI で表示されている順序に伴って子フォルダの順序も変更された際に発火します。{{WebExtAPIRef("bookmarks.move()")}} の実行後や、UI におけるドラッグの際には発火しません。

+ +

構文

+ +
browser.bookmarks.onChildrenReordered.addListener(function(
+  id,         // 文字列
+  reorderInfo // オブジェクト
+) {...})
+browser.bookmarks.onChildrenReordered.removeListener(listener)
+browser.bookmarks.onChildrenReordered.hasListener(listener)
+
+ +

このイベントには 3 つのメソッドが用意されています。

+ +
+
addListener(callback)
+
イベントリスナを追加します。
+
removeListener(listener)
+
イベントリスナを削除します。引数 listener には削除したいリスナを指定します。
+
hasListener(listener)
+
listener がイベントリスナとして登録されているか確認します。登録されていれば true を、それ以外の場合は false を返します。
+
+ +

addListener の構文

+ +

引数

+ +
+
callback
+
+

イベントが発火した際に呼び出される関数を指定します。この関数には以下の引数が渡ります。

+
+
+ +
+
+
+
id
+
子要素の順序が変更されたフォルダの ID を表す {{jsxref("string")}} です。
+
+ +
+
reorderInfo
+
詳細情報を含んだ {{jsxref("object")}} です。
+
+
+
+ +

付随するオブジェクト

+ +

reorderInfo

+ +
+
childIds
+
{{jsxref("string")}} の {{jsxref("array")}} です。このフォルダに含まれるブックマーク要素すべての ID が含まれており、UI に表示されているのと同じ順番に並んでいます。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.onChildrenReordered")}}

+ +

使用例

+ +
function handleChildrenReordered(id, reorderInfo) {
+  console.log("Item: " + id + " children reordered");
+  console.log("Children: " + reorderInfo.childIds);
+}
+
+function handleClick() {
+  chrome.bookmarks.onChildrenReordered.addListener(handleChildrenReordered);
+}
+
+chrome.browserAction.onClicked.addListener(handleClick);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License. に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.html new file mode 100644 index 0000000000..5c1eea40d5 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.html @@ -0,0 +1,104 @@ +--- +title: bookmarks.onCreated +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onCreated +tags: + - API + - Add-ons + - Bookmarks + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - onCreated +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/onCreated +--- +
{{AddonSidebar()}}
+ +

ブックマークやフォルダが作成された際に発火します。

+ +

構文

+ +
browser.bookmarks.onCreated.addListener(function(
+  id,      // 文字列
+  bookmark // BookmarkTreeNode
+) {...})
+browser.bookmarks.onCreated.removeListener(listener)
+browser.bookmarks.onCreated.hasListener(listener)
+
+ +

このイベントには 3 つのメソッドが用意されています。

+ +
+
addListener(callback)
+
イベントリスナを追加します。
+
removeListener(listener)
+
イベントリスナを削除します。引数 listener には削除したいリスナを指定します。
+
hasListener(listener)
+
listener がイベントリスナとして登録されているか確認します。登録されていれば true を、それ以外の場合は false を返します。
+
+ +

addListener の構文

+ +

引数

+ +
+
callback
+
+

イベントが発火した際に呼び出される {{jsxref("function")}} です。この関数には以下の引数が渡ります。

+ +
+
id
+
string.
+
+ +
+
bookmark
+
{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}}.
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.onCreated")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.html new file mode 100644 index 0000000000..6a11683646 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.html @@ -0,0 +1,110 @@ +--- +title: bookmarks.onImportBegan +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onImportBegan +tags: + - API + - Add-ons + - Bookmarks + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - onImportBegan +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/onImportBegan +--- +

{{AddonSidebar()}}

+ +

ブックマークのインポートが開始した際に発火します。

+ +

ブックマークをインポートしている間、{{WebExtAPIRef("bookmarks.onCreated", "onCreated")}} が何度も発火する場合があります。onCreated に紐づけるリスナ関数の処理が重い場合には、onImportBegan と {{WebExtAPIRef("bookmarks.onImportEnded", "onImportEnded")}} をリッスンし、onImportEnded  が発火するまでは onCreated を無視してください。他のイベントは通常通り処理できます。

+ +

構文

+ +
browser.bookmarks.onImportBegan.addListener(function() {...})
+browser.bookmarks.onImportBegan.removeListener(listener)
+browser.bookmarks.onImportBegan.hasListener(listener)
+
+ +

このイベントには 3 つのメソッドが用意されています。

+ +
+
addListener(callback)
+
イベントリスナを追加します。
+
removeListener(listener)
+
イベントリスナを削除します。引数 listener には削除したいリスナを指定します。
+
hasListener(listener)
+
listener がイベントリスナとして登録されているか確認します。登録されていれば true を、それ以外の場合は false を返します。
+
+ +

addListener の構文

+ +

引数

+ +
+
callback
+
+

イベントが発火した際に呼び出される関数を指定します。この関数に渡される引数はありません。

+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.onImportBegan")}}

+ +

使用例

+ +
function handleImportBegan() {
+  console.log("Importing...");
+}
+
+function handleImportEnded() {
+  console.log("...finished.");
+}
+
+function handleClick() {
+  chrome.bookmarks.onImportBegan.addListener(handleImportBegan);
+  chrome.bookmarks.onImportEnded.addListener(handleImportEnded);
+}
+
+chrome.browserAction.onClicked.addListener(handleClick);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License. に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.html new file mode 100644 index 0000000000..4ecfe782cf --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.html @@ -0,0 +1,110 @@ +--- +title: bookmarks.onImportEnded +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onImportEnded +tags: + - API + - Add-ons + - Bookmarks + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - onImportEnded +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/onImportEnded +--- +

{{AddonSidebar()}}

+ +

ブックマークのインポートが終了した際に発火します。

+ +

{{WebExtAPIRef("bookmarks.onImportBegan")}} も参照してください。

+ +

構文

+ +
browser.bookmarks.onImportEnded.addListener(function() {...})
+browser.bookmarks.onImportEnded.removeListener(listener)
+browser.bookmarks.onImportEnded.hasListener(listener)
+
+ +

このイベントには 3 つのメソッドが用意されています。

+ +
+
addListener(callback)
+
イベントリスナを追加します。
+
removeListener(listener)
+
イベントリスナを削除します。引数 listener には削除したいリスナを指定します。
+
hasListener(listener)
+
listener がイベントリスナとして登録されているか確認します。登録されていれば true を、それ以外の場合は false を返します。
+
+ +

addListener の構文

+ +

引数

+ +
+
callback
+
+

イベントが発火した際に呼び出される関数を指定します。この関数に渡される引数はありません。

+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.onImportEnded")}}

+ +

使用例

+ +
function handleImportBegan() {
+  console.log("Importing...");
+}
+
+function handleImportEnded() {
+  console.log("...finished.");
+}
+
+function handleClick() {
+  chrome.bookmarks.onImportBegan.addListener(handleImportBegan);
+  chrome.bookmarks.onImportEnded.addListener(handleImportEnded);
+}
+
+chrome.browserAction.onClicked.addListener(handleClick);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.html new file mode 100644 index 0000000000..6b14db985b --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.html @@ -0,0 +1,139 @@ +--- +title: bookmarks.onMoved +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onMoved +tags: + - API + - Add-ons + - Bookmarks + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - onMoved +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/onMoved +--- +

{{AddonSidebar()}}

+ +

ブックマークやフォルダが、異なる親フォルダやフォルダ内の別の場所へ移された際に発火します。

+ +

構文

+ +
browser.bookmarks.onMoved.addListener(function(
+  id,      // 文字列
+  moveInfo // オブジェクト
+) {...})
+browser.bookmarks.onMoved.removeListener(listener)
+browser.bookmarks.onMoved.hasListener(listener)
+
+ +

このイベントには 3 つのメソッドが用意されています。

+ +
+
addListener(callback)
+
イベントリスナを追加します。
+
removeListener(listener)
+
イベントリスナを削除します。引数 listener には削除したいリスナを指定します。
+
hasListener(listener)
+
listener がイベントリスナとして登録されているか確認します。登録されていれば true を、それ以外の場合は false を返します。
+
+ +

addListener の構文

+ +

引数

+ +
+
callback
+
+

イベントが発火した際に呼び出される関数を指定します。この関数には以下の引数が渡ります。

+
+
+ +
+
+
+
id
+
移動した要素の ID を表す {{jsxref("string")}} です。
+
+ +
+
moveInfo
+
移動に関する詳細を含んだ {{jsxref("object")}} です。
+
+
+
+ +

付随するオブジェクト

+ +

moveInfo

+ +
+
parentId
+
新しい親フォルダを表す {{jsxref("string")}}
+
index
+
この要素が親から見て何番目にあるかを表す整数
+
oldParentId
+
移動前の親フォルダを表す {{jsxref("string")}}
+
oldIndex
+
移動前において、この要素が親から見て何番目にあったかを表す整数
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.onMoved")}}

+ +

Examples

+ +
function handleMoved(id, moveInfo) {
+  console.log("Item: " + id + " moved");
+  console.log("Old index: " + moveInfo.oldIndex);
+  console.log("New index: " + moveInfo.index);
+  console.log("Old folder: " + moveInfo.oldParentId);
+  console.log("New folder: " + moveInfo.parentId);
+}
+
+function handleClick() {
+  chrome.bookmarks.onMoved.addListener(handleMoved);
+}
+
+chrome.browserAction.onClicked.addListener(handleClick);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge compatibility の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.html new file mode 100644 index 0000000000..abe7b7968a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.html @@ -0,0 +1,135 @@ +--- +title: bookmarks.onRemoved +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/onRemoved +tags: + - API + - Add-ons + - Bookmarks + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - onRemoved +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/onRemoved +--- +

{{AddonSidebar()}}

+ +

ブックマークやフォルダが削除された際に発火します。フォルダが再帰的に削除された場合は、そのフォルダに対して 1 回だけ発火し、そのフォルダの中身に関しては発火しません。

+ +

構文

+ +
browser.bookmarks.onRemoved.addListener(function(
+  id,        // 文字列
+  removeInfo // オブジェクト
+) {...})
+browser.bookmarks.onRemoved.removeListener(listener)
+browser.bookmarks.onRemoved.hasListener(listener)
+
+ +

このイベントには 3 つのメソッドが用意されています。

+ +
+
addListener(callback)
+
イベントリスナを追加します。
+
removeListener(listener)
+
イベントリスナを削除します。引数 listener には削除したいリスナを指定します。
+
hasListener(listener)
+
listener がイベントリスナとして登録されているか確認します。登録されていれば true を、それ以外の場合は false を返します。
+
+ +

addListener の構文

+ +

引数

+ +
+
callback
+
+

イベントが発火した際に呼び出される関数を指定します。この関数には以下の引数が渡ります。

+
+
+ +
+
+
+
id
+
削除された要素の ID を表す {{jsxref("string")}}
+
+ +
+
removeInfo
+
削除された要素の詳細を含んだ {{jsxref("object")}}
+
+
+
+ +

付随するオブジェクト

+ +

removeInfo

+ +
+
parentId
+
要素の親の ID を表す {{jsxref("string")}}
+
index
+
この要素が親からみて何番目にあるかを表す 0 以上の整数
+
node
+
削除された要素に関する詳細を含む {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}}
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.onRemoved")}}

+ +

Examples

+ +
function handleRemoved(id, removeInfo) {
+  console.log("Item: " + id + " removed");
+  console.log("Title: " + removeInfo.node.title);
+  console.log("Url: " + removeInfo.node.url);
+}
+
+function handleClick() {
+  chrome.bookmarks.onRemoved.addListener(handleRemoved);
+}
+
+chrome.browserAction.onClicked.addListener(handleClick);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/remove/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/remove/index.html new file mode 100644 index 0000000000..a76c3f74bc --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/remove/index.html @@ -0,0 +1,96 @@ +--- +title: bookmarks.remove() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/remove +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - remove +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/remove +--- +

{{AddonSidebar()}}

+ +

bookmarks.remove() は、ブックマークや空のブックマークフォルダを削除するメソッドです。

+ +

ブックマークが見つからなかった、またはフォルダが空ではなかった場合には {{WebExtAPIRef("runtime.lastError")}} がセットされ、エラーの有無はコールバック内で確認できます。

+ +

構文

+ +
browser.bookmarks.remove(
+  id,      // 文字列
+  callback // 関数（省略可）
+)
+
+ +

引数

+ +
+
id
+
削除したいブックマーク / 空フォルダの ID を指定する {{jsxref("string")}} です。
+
callback{{optional_inline}}
+
ブックマークやフォルダが削除された際に実行される関数です。この関数に渡される引数はありません。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.remove")}}

+ +

使用例

+ +

以下の例はブックマークを削除するものです。

+ +
function onRemoved() {
+  if (chrome.runtime.lastError) {
+    console.log(chrome.runtime.lastError);
+  } else {
+    console.log("bookmark item removed!");
+  }
+
+}
+
+chrome.bookmarks.remove(bookmarkItemId");
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.html new file mode 100644 index 0000000000..03378dfc79 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.html @@ -0,0 +1,101 @@ +--- +title: bookmarks.removeTree() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/removeTree +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - removeTree +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/removeTree +--- +

{{AddonSidebar()}}

+ +

bookmarks.removeTree() は、ブックマークフォルダやその要素を再帰的に削除するメソッドです。

+ +

ブックマークが見つからなかった場合は {{WebExtAPIRef("runtime.lastError")}} がセットされ、エラーの有無はコールバック内で確認できます。

+ +

構文

+ +
browser.bookmarks.removeTree(
+  id,      // 文字列
+  callback // 関数（省略可）
+)
+
+ +

引数

+ +
+
id
+
子要素とともに削除されるフォルダノードの ID を表す {{jsxref("string")}} です。
+
callback{{optional_inline}}
+
ノードが削除された際に実行される関数です。この関数に渡される引数はありません。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.removeTree")}}

+ +

使用例

+ +

以下の例は、"MDN" という名前のフォルダを探し、それ自身とその子要素をすべて削除するものです。

+ +
function onRemoved() {
+  if (chrome.runtime.lastError) {
+    console.log(chrome.runtime.lastError);
+  } else {
+    console.log("bookmark item removed!");
+  }
+}
+
+function removeMDN(searchResults) {
+  if (searchResults.length) {
+    chrome.bookmarks.removeTree(searchResults[0].id, onRemoved);
+  }
+}
+
+chrome.bookmarks.search({ title: "MDN" }, removeMDN);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.html new file mode 100644 index 0000000000..4532e33fdd --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/search/index.html @@ -0,0 +1,135 @@ +--- +title: bookmarks.search() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/search +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - Search + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/search +--- +
{{AddonSidebar()}}
+ +

bookmarks.search() 関数は、指定したクエリにマッチするブックマークを検索するものです。マッチしたブックマークは、{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} オブジェクトの配列として、指定されたコールバック関数の引数に渡されます。

+ +

入力引数の値や型が不正だった場合、この関数は例外を送出します。エラーメッセージはコンソールで確認できます。送出された例外はエラー ID を含んでおらず、またメッセージを変更される可能性があるため、これらを解析するようなコードは書かないでください。

+ +

構文

+ +
browser.bookmarks.search(
+  query,   // 文字列またはオブジェクト
+  callback // 関数
+)
+
+ +

引数

+ +
+
query
+
実行するクエリを表す {{jsxref("string")}} または {{jsxref("object")}} です。
+
query を文字列で指定する場合、query は 0 個以上の検索項から構成されます。検索項はスペースで区切りますが、複数語からなる句を検索したい場合は引用符でくくります。それぞれの検索項はブックマークの URL やタイトルの部分文字列にマッチします（大文字・小文字は区別されません）。あるブックマークがクエリにマッチするには、クエリの検索項すべてがマッチしなければなりません。
+
+

query をオブジェクトで指定する場合、以下の 3 つのプロパティのうち 0 個以上を指定することになります。あるブックマークがクエリにマッチするには、指定されたプロパティすべてにおいてマッチしなければなりません。

+
+
+
+
query{{optional_inline}}
+
1 つ以上の検索項を含んだ {{jsxref("string")}} を指定します。このフォーマットは query 引数における文字列のフォーマットと同じです。このプロパティ値が {{jsxref("string")}} でなかった場合、 例外が送出されます。
+
url{{optional_inline}}
+
ブックマークの URL と完全一致しなければならない {{jsxref("string")}} を指定します。マッチの際に大文字・小文字は区別されず、また末尾のスラッシュも無視されます。
+
+

無効な URL を指定した場合、例外が送出されます。

+
+
+ +
+
title{{optional_inline}}
+
ブックマークのタイトルと完全一致しなければならない {{jsxref("string")}} を指定します。マッチの際には大文字・小文字が区別されます。
+
+
+
callback
+
クエリの結果が得られた場合に呼び出される関数を指定します。この関数には以下の引数が渡ります。
+
+
+
results
+
{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} オブジェクトの配列であり、各要素はマッチしたブックマークをそれぞれ表しています。何も見つからなかった場合は空の配列となります。
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.search")}}

+ +

使用例

+ +

以下の例は、ブックマークすべての ID を出力するものです。

+ +
function onGot(bookmarkItems) {
+  for (item of bookmarkItems) {
+    console.log(item.id);
+  }
+}
+
+chrome.bookmarks.search({}, onGot);
+ +

以下の例は、その時にアクティブなタブがブックマークされているかどうかを確認するものです。

+ +
function onGot(bookmarkItems) {
+  if (bookmarkItems.length) {
+    console.log("active tab is bookmarked");
+  } else {
+    console.log("active tab is not bookmarked");
+  }
+}
+
+function checkActiveTab(tab) {
+  chrome.bookmarks.search({url: tab.url}, onGot);
+}
+
+chrome.browserAction.onClicked.addListener(checkActiveTab);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.bookmarks API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードから作成されています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/bookmarks/update/index.html b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/update/index.html new file mode 100644 index 0000000000..8ceee69300 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/bookmarks/update/index.html @@ -0,0 +1,117 @@ +--- +title: bookmarks.update() +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks/update +tags: + - API + - Add-ons + - Bookmarks + - Extensions + - Method + - Non-standard + - Reference + - Update + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/update +--- +

{{AddonSidebar()}}

+ +

bookmarks.update() は、ブックマークの URL やタイトル、またはフォルダの名前を更新するメソッドです。

+ +

ブックマーク要素が見つからなかった場合には {{WebExtAPIRef("runtime.lastError")}} がセットされるので、エラーの有無をコールバックで確認できます。

+ +

構文

+ +
browser.bookmarks.update(
+  id,      // 文字列
+  changes, // オブジェクト
+  callback // 関数（省略可）
+)
+
+ +

引数

+ +
+
id
+
更新したいブックマーク / フォルダの ID を表す {{jsxref("string")}} です。
+
changes
+
適用したい変更内容を表す {{jsxref("object")}} であり、以下のプロパティから構成されます。指定しなかったプロパティについて、ブックマークやフォルダが変更されることはありません。
+ +
+
title{{optional_inline}}
+
id がフォルダを表す場合、ブックマークの新しいタイトル / フォルダの新しい名前を指定する {{jsxref("string")}} です。
+
url{{optional_inline}}
+
ブックマークの新しい URL を指定する {{jsxref("string")}} です。
+
+
+
callback{{optional_inline}}
+
変更が適用された際に実行される関数です。この関数には次の引数が 1 つ渡ります。
+
+
+
result
+
更新されたブックマークを表す{{WebExtAPIRef('bookmarks.BookmarkTreeNode')}} オブジェクトです。
+
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.bookmarks.update")}}

+ +

使用例

+ +

フォルダのリネーム

+ +

以下の例は、"MDN" という名前のフォルダすべてを "MDN" to "Mozilla Developer Network (MDN)" にリネームするものです。

+ +
function updateFolders(items) {
+  for (item of items) {
+    // only folders, so skip items with a `url`
+    if (!item.url) {
+      chrome.bookmarks.update(item.id, {
+        title: "Mozilla Developer Network (MDN)"
+      });
+    }
+  }
+}
+
+chrome.bookmarks.search({ title: "MDN" }, updateFolders);
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.bookmarks API. This documentation is derived from bookmarks.json in the Chromium code.

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.html b/files/ja/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.html new file mode 100644 index 0000000000..70bb6d5039 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.html @@ -0,0 +1,67 @@ +--- +title: browserAction.ColorArray +slug: Mozilla/Add-ons/WebExtensions/API/browserAction/ColorArray +translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/ColorArray +--- +
{{AddonSidebar()}}
+ +

型

+ +

RGBA色を定義する、4つの0から255の整数の配列です。4つの値は以下のチャネルを指定します:

+ +
    +
  1. 赤(Red)
    2. +
  2. 緑(Green)
    3. +
  3. 青(Blue)
    4. +
  4. アルファ(Alpha) (不透明度)
    5. +
+ +

たとえば、不透明な赤は[255, 0, 0, 255]です。

+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.browserAction.ColorArray")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

このAPIはChromiumのchrome.browserAction APIに基づいています。このドキュメントはChromiumコードの browser_action.jsonから派生したものです。

+ +

 

+ +

Microsoft Edgeの互換性データはMicrosoft Corporationから提供されており、Creative Commons Attribution 3.0 United States Licenseのもとにここに含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/disable/index.html b/files/ja/mozilla/add-ons/webextensions/api/browseraction/disable/index.html new file mode 100644 index 0000000000..5eb7c5f3c4 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/disable/index.html @@ -0,0 +1,87 @@ +--- +title: browserAction.disable() +slug: Mozilla/Add-ons/WebExtensions/API/browserAction/disable +translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/disable +--- +
{{AddonSidebar()}}
+ +

タブに対してブラウザアクションを無効にします。つまり、タブがアクティブな時クリックされなくなります。

+ +

書式

+ +
browser.browserAction.disable(
+  tabId // optional integer
+)
+
+ +

パラメータ

+ +
+
tabId{{optional_inline}}
+
integer. ブラウザアクションを無効にしたいタブのIDです。
+
+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.browserAction.disable")}}

+ +

例

+ +

クリックされたときブラウザアクションを無効にし、新しいタブが開かれる毎回再度有効にします:

+ +
browser.tabs.onCreated.addListener(() => {
+  browser.browserAction.enable();
+});
+
+browser.browserAction.onClicked.addListener(() => {
+  browser.browserAction.disable();
+});
+
+ +

アクティブなタブにだけブラウザアクションを無効にします:

+ +
browser.browserAction.onClicked.addListener((tab) => {
+  browser.browserAction.disable(tab.id);
+});
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.browserAction API. This documentation is derived from browser_action.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.html b/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.html new file mode 100644 index 0000000000..f5291179ee --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/index.html @@ -0,0 +1,129 @@ +--- +title: browserAction +slug: Mozilla/Add-ons/WebExtensions/API/browserAction +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - browserAction +translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction +--- +
{{AddonSidebar}}
+ +

ブラウザーのツールバーにボタンを追加します。

+ +

ブラウザーアクションはブラウザーのツールバー内のボタンです。

+ +

これをボタンつきポップアップと関連付けられます。ポップアップは通常のウェブページ同様に、HTML, CSS, JavaScript を使って指定できます。ポップアップの中で動く JavaScript はバックグラウンドスクリプトとすべて同じ WebExtension API にアクセスできますが、グローバルコンテキストはブラウザーに表示される現在のページではなく、ポップアップになります。ウェブページに影響するには messages 経由で通信する必要があります。

+ +

ユーザーがアイコンをクリックした時に、ポップアップを指定していると、表示され — そしてコンテンツが読み込まれるでしょう 。ポップアップを指定していない時は、ユーザーがアイコンをクリックした時、拡張機能にイベントがディスパッチされます。

+ +

たいていのブラウザーアクションのプロパティは、manifest.json 内の browser_action キーを用いて宣言的に定義できます。

+ +

browserAction API では、次が可能です:

+ + + +

型

+ +
+
{{WebExtAPIRef("browserAction.ColorArray")}}
+
RGBA 色を決める 0-255 の範囲の4整数の配列
+
{{WebExtAPIRef("browserAction.ImageDataType")}}
+
画像のピクセルデータ。ImageData オブジェクト (例えば {{htmlelement("canvas")}} 要素から) でないといけない。
+
+ +

関数

+ +
+
{{WebExtAPIRef("browserAction.setTitle()")}}
+
ブラウザーアクションのタイトルをセットする。ツールチップに表示される。
+
{{WebExtAPIRef("browserAction.getTitle()")}}
+
ブラウザーアクションのタイトルを取得します。
+
{{WebExtAPIRef("browserAction.setIcon()")}}
+
ブラウザーアクションのアイコンをセットします。
+
{{WebExtAPIRef("browserAction.setPopup()")}}
+
ユーザーがブラウザーアクションのアイコンをクリックした時に表示されるポップアップの HTML 文書をセットします。
+
{{WebExtAPIRef("browserAction.getPopup()")}}
+
ブラウザーアクションのポップアップとしてセットされた HTML 文書を取得します。
+
{{WebExtAPIRef("browserAction.openPopup()")}}
+
ブラウザーアクションのポップアップを開きます。
+
{{WebExtAPIRef("browserAction.setBadgeText()")}}
+
ブラウザーアクションのバッジテキストをセットします。バッジはアイコンの上部に表示されます。
+
{{WebExtAPIRef("browserAction.getBadgeText()")}}
+
ブラウザーアクションのバッジのテキストを取得します。
+
{{WebExtAPIRef("browserAction.setBadgeBackgroundColor()")}}
+
バッジの背景色を指定します。
+
{{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}
+
バッジの背景色を取得します。
+
{{WebExtAPIRef("browserAction.enable()")}}
+
タブのブラウザーアクションを有効にします。既定では、ブラウザーアクションはすべてのタブで有効です。
+
{{WebExtAPIRef("browserAction.disable()")}}
+
タブのブラウザーアクションを無効にします。つまりタブがアクティブでもクリックできません。
+
{{WebExtAPIRef("browserAction.isEnabled()")}}
+
ブラウザーアクションが有効か否かをチェックします。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("browserAction.onClicked")}}
+
ブラウザーアクションがクリックされた時に発火します。このイベントはブラウザーアクションがポップアップ付きでない場合は発火しません。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.browserAction")}}

+ + + +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.browserAction API に基づいています。この文書は Chromium コードの browser_action.json から得ています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.html b/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.html new file mode 100644 index 0000000000..46f3a666a7 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.html @@ -0,0 +1,102 @@ +--- +title: browserAction.onClicked +slug: Mozilla/Add-ons/WebExtensions/API/browserAction/onClicked +translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/onClicked +--- +
{{AddonSidebar()}}
+ +

ブラウザアクションアイコンがクリックされたときに発火します。このイベントはブラウザアクションがポップアップを持っているときは発火しません。

+ +

右クリックを定義するには、contextMenus API の"browser_action" context typeを利用してください。

+ +

書式

+ +
browser.browserAction.onClicked.addListener(listener)
+browser.browserAction.onClicked.removeListener(listener)
+browser.browserAction.onClicked.hasListener(listener)
+
+ +

イベントは３つの関数を持っています:

+ +
+
addListener(listener)
+
このイベントのリスナーを追加します。
+
removeListener(listener)
+
このイベントのリスニングを停止します。引数listenerは削除するリスナーです。
+
hasListener(listener)
+
listenerがこのイベントに登録されているかどうかを調べます。trueが返ればリスニング中です。falseが返ればそうれはありません。
+
+ +

addListenerの書式

+ +

パラメータ

+ +
+
callback
+
+

イベントが発生したときに呼び出される関数です。関数は以下の引数を渡されます:

+ +
+
tab
+
{{WebExtAPIRef('tabs.Tab')}}. アイコンがクリックされたときにアクティブなタブです。
+
+
+
+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.browserAction.onClicked")}}

+ +

例

+ +

ユーザがアイコンをクリックすると、アクティブなタブではアイコンを無効にし、タブのURLをログします:

+ +
browser.browserAction.onClicked.addListener((tab) => {
+  // disable the active tab
+  browser.browserAction.disable(tab.id);
+  // requires the "tabs" or "activeTab" permission
+  console.log(tab.url);
+});
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

このAPIはChromiumのchrome.browserAction APIに基づいています。このドキュメントはChromiumコードのbrowser_action.jsonから派生したものです。

+ +

Microsoft Edgeの互換性データはMicrosoft Corporationから提供されており、Creative Commons Attribution 3.0 United States Licenseのもとにここに含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/browsersettings/index.html b/files/ja/mozilla/add-ons/webextensions/api/browsersettings/index.html new file mode 100644 index 0000000000..a9bbf45a6a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/browsersettings/index.html @@ -0,0 +1,49 @@ +--- +title: browserSettings +slug: Mozilla/Add-ons/WebExtensions/API/browserSettings +tags: + - API + - Add-ons + - Extensions + - Non-standard + - Reference + - WebExtensions + - browserSettings +translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings +--- +
{{AddonSidebar}}
+ +
拡張機能にグローバルなブラウザー設定の変更を可能にします。この API の各プロパティは {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} オブジェクトで、これはそれぞれの設定の変更能力を提供します。
+ +
 
+ +
これはグローバルな設定のため、拡張機能で衝突が起きる可能性があります。衝突の処理方法の詳細は BrowserSetting.set() の文書を見てください。
+ +
 
+ +
+

この API を使うには "browserSettings" パーミッションが必要です。

+
+ +

プロパティ

+ +
+
{{WebExtAPIRef("browserSettings.allowPopupsForUserEvents")}}
+
ユーザーのイベントに反応して、ウェブページで実行しているコードがポップアップを許可するかどうかを決める
+
{{WebExtAPIRef("browserSettings.cacheEnabled")}}
+
ブラウザーキャッシュの有効・無効を決める
+
{{WebExtAPIRef("browserSettings.homepageOverride")}}
+
ブラウザーのホームページの値を読む
+
{{WebExtAPIRef("browserSettings.imageAnimationBehavior")}}
+
ブラウザーが画像アニメーションをどう扱うのかを決める
+
{{WebExtAPIRef("browserSettings.newTabPageOverride")}}
+
ブラウザーの新規タブページ値を読む
+
{{WebExtAPIRef("browserSettings.webNotificationsDisabled")}}
+
ウェブサイトが Notification Web API を使って通知を表示するのを妨げる
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.browserSettings")}}

+ +

{{WebExtExamples("h2")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/browsersettings/newtabpageoverride/index.html b/files/ja/mozilla/add-ons/webextensions/api/browsersettings/newtabpageoverride/index.html new file mode 100644 index 0000000000..de5eda9664 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/browsersettings/newtabpageoverride/index.html @@ -0,0 +1,27 @@ +--- +title: browserSettings.newTabPageOverride +slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/newTabPageOverride +translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings/newTabPageOverride +--- +
{{AddonSidebar()}}
+ +

{{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} オブジェクトを使用すると「新規タブ」ページ、つまりユーザーが新しい空のタブを開いたときのページを表すURLを取得することができます。

+ +

なお、これは読み取り専用の設定です。

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.browserSettings.newTabPageOverride", 10)}}

+ +

例

+ +

現在の新規タブURLを取得する：

+ +
browser.browserSettings.newTabPageOverride.get({}).then(result => {
+  console.log(result.value);
+});
+
+ +

{{WebExtExamples}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/browsingdata/index.html b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/index.html new file mode 100644 index 0000000000..c648980e4e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/index.html @@ -0,0 +1,127 @@ +--- +title: browsingData +slug: Mozilla/Add-ons/WebExtensions/API/browsingData +tags: + - Add-ons + - Extensions + - Non-standard + - Reference + - WebExtensions + - browsingData +translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData +--- +
{{AddonSidebar}}
+ +
拡張機能がユーザーのブラウズ中に蓄積したデータをクリアできるようにします。
+ +

 browsingData APIでは、ブラウズデータは下記の型に分けられます:

+ + + +

これらの型の組み合わせを削除するのに {{WebExtAPIRef("browsingData.remove()")}} 関数を使用できます。それぞれのデータ型を削除する専用関数もあり、例えば {{WebExtAPIRef("browsingData.removePasswords()", "removePasswords()")}}, {{WebExtAPIRef("browsingData.removeHistory()", "removeHistory()")}} などです。

+ +

すべての browsingData.remove[X]() 関数は {{WebExtAPIRef("browsingData.RemovalOptions")}} オブジェクトを取って、これをデータ削除のその他2つの側面を管理するのに使うことができます:

+ + + +

最後に、この API の {{WebExtAPIRef("browsingData.settings()")}} 関数で、ブラウザー組み込みの「履歴消去」機能の現在の設定値を取得できます。

+ +

この API を使うには、"browsingData" の API パーミッションが必要です。

+ +

型

+ +
+
{{WebExtAPIRef("browsingData.DataTypeSet")}}
+
削除データの型を指定するオブジェクト: 例えば、history, downloads, passwords, など
+
{{WebExtAPIRef("browsingData.RemovalOptions")}}
+
データ削除するのにどれくらい以前に遡るのか、通常のウェブブラウジング/ホスト型アプリ/アドオンのどのデータを削除するのかを指定するオブジェクト。
+
+ +

メソッド

+ +
+
{{WebExtAPIRef("browsingData.remove()")}}
+
指定された型のブラウジングデータを削除する
+
{{WebExtAPIRef("browsingData.removeCache()")}}
+
ブラウザーキャッシュを消去する
+
{{WebExtAPIRef("browsingData.removeCookies()")}}
+
cookies を削除する
+
{{WebExtAPIRef("browsingData.removeDownloads()")}}
+
ダウンロード済みのファイルを削除する
+
{{WebExtAPIRef("browsingData.removeFormData()")}}
+
保存されたフォームデータを消去する
+
{{WebExtAPIRef("browsingData.removeHistory()")}}
+
ブラウザー履歴を消去する
+
{{WebExtAPIRef("browsingData.removeLocalStorage()")}}
+
ウェブサイトが作成した local storage を消去する
+
{{WebExtAPIRef("browsingData.removePasswords()")}}
+
パスワードを消去する
+
{{WebExtAPIRef("browsingData.removePluginData()")}}
+
プラグインに関連するデータを消去する
+
{{WebExtAPIRef("browsingData.settings()")}}
+
ブラウザーの「履歴消去」機能の現在の設定値を得る
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.browsingData", 1, 1)}}

+ + + +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.browsingData API に基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.html b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.html new file mode 100644 index 0000000000..cf43475f5a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.html @@ -0,0 +1,100 @@ +--- +title: browsingData.removeCache() +slug: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCache +tags: + - API + - Add-ons + - Extensions + - Method + - Reference + - WebExtensions + - browsingData + - removeCache +translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCache +--- +
{{AddonSidebar()}}
+ +

ブラウザのキャッシュを消去します。

+ +

この関数は{{WebExtAPIRef("browsingData.RemovalOptions")}} オブジェクトを引数に取りますが無視されます。そのためこの関数を使うとすべてのキャッシュが消去されるため注意してください。

+ +

この関数は Promise を返す非同期関数です。

+ +

構文

+ +
var removing = browser.browsingData.removeCache(
+  removalOptions            // RemovalOptions オブジェクト
+)
+
+ +

引数

+ +
+
removalOptions {{optional_inline}}
+
{{WebExtAPIRef("browsingData.RemovalOptions")}} オブジェクト このパラメータは無視されます。
+
+ +

返り値

+ +

消去が完了した後に実行される Promise が返されます。この Promise は引数を持ちません。エラーが発生した場合はエラーメッセージを引数にしてrejectを呼び出します。

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.browsingData.removeCache")}}

+ +

例

+ +

ブラウザキャッシュを消去します。

+ +
function onRemoved() {
+  console.log("removed");
+}
+
+function onError(error) {
+  console.error(error);
+}
+
+browser.browsingData.removeCache({}).
+then(onRemoved, onError);
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

この API は Chromium の chrome.browsingData API に基づいています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは  Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/clipboard/index.html b/files/ja/mozilla/add-ons/webextensions/api/clipboard/index.html new file mode 100644 index 0000000000..f104a67940 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/clipboard/index.html @@ -0,0 +1,39 @@ +--- +title: clipboard +slug: Mozilla/Add-ons/WebExtensions/API/clipboard +tags: + - API + - Add-ons + - Clipboard + - Extensions + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard +--- +
{{AddonSidebar}}
+ +

クリップボード API は、拡張機能がシステムのクリップボードに要素をクリップするのを可能にします。現在この API は画像のコピーだけをサボートしていますが、将来的にはテキストとHTMLのコピーをサボートする計画です。

+ +

この WebExtension API は主に標準の web クリップボード API がクリップボードに画像を書き込めないために存在しています。標準 web API にこの力が備わった時には、このAPI は非推奨になるはずです。

+ +

クリップボードの読み込みはこの API でサポートしません。なぜならクリップボードはすでに標準 web プラットホーム API を用いて読むことができるからです。クリップボードとやりとりするを見てください。

+ +

この API は Chrome の clipboard API に基づきますが、その API はChrome アプリだけで利用できて、拡張機能ではできません。

+ +

この API を使うには "clipboardWrite" パーミッションが必要です。

+ +

関数

+ +
+
{{WebExtAPIRef("clipboard.setImageData()")}}
+
画像をクリップボードにコピーする
+
+ +

ブラウザー互換性

+ +

{{Compat("webextensions.api.clipboard", 1, 1)}} {{WebExtExamples("h2")}}

+ +
Acknowledgements + +

この API は Chromiumの chrome.clipboard API に基づきます。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html b/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html new file mode 100644 index 0000000000..950f1c866e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/clipboard/setimagedata/index.html @@ -0,0 +1,72 @@ +--- +title: clipboard.setImageData() +slug: Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData +translation_of: Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData +--- +
{{AddonSidebar()}}
+ +

イメージをクリップボードにコピーします。イメージはクリップボードに書き込まれる前に再エンコードされます。イメージが無効な場合、クリップボードは修正されません。

+ +

The image is provided as an ArrayBuffer containing the encoded image. JPEG and PNG formats are supported.

+ +

Although this API is based on Chrome's clipboard.setImageData() API, there are some differences:

+ + + +

これはPromiseを返す非同期関数です。

+ +

書式

+ +
browser.clipboard.setImageData(imageData, imageType)
+
+ +

パラメータ

+ +
+
imageData
+
An ArrayBuffer containing the encoded image data to copy to the clipboard.
+
imageType
+
A {{domxref("DOMString")}} indicating the type of image contained in imageData: "png" or "jpeg".
+
+ +

返り値

+ +

A Promise that will be resolved with no arguments if the operation succeeded, or rejected if there was an error (for example, because the data did not represent a valid image).

+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.clipboard.setImageData", 10)}}

+ +

例

+ +

Copy a remote image:

+ +
// requires:
+// * the host permission for "https://cdn.mdn.mozilla.net/*"
+// * the API permission "clipboardWrite"
+
+fetch('https://cdn.mdn.mozilla.net/static/img/favicon144.png')
+.then(response => response.arrayBuffer())
+.then(buffer => browser.clipboard.setImageData(buffer, 'png'));
+ +

Copy an image that was bundled with the extension:

+ +
// requires the API permission "clipboardWrite"
+
+fetch(browser.runtime.getURL('image.png'))
+.then(response => response.arrayBuffer())
+.then(buffer => browser.clipboard.setImageData(buffer, 'png'));
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.clipboard API.

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/commands/index.html b/files/ja/mozilla/add-ons/webextensions/api/commands/index.html new file mode 100644 index 0000000000..0e622b38d2 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/commands/index.html @@ -0,0 +1,84 @@ +--- +title: commands +slug: Mozilla/Add-ons/WebExtensions/API/commands +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - commands +translation_of: Mozilla/Add-ons/WebExtensions/API/commands +--- +
{{AddonSidebar}}
+ +

commands manifest.json キーを使って、登録したコマンドをユーザーが実行するのをリッスンします。

+ +

型

+ +
+
{{WebExtAPIRef("commands.Command")}}
+
コマンドを表す型。これは manifest.json の commands キーのコマンドで指定された情報が入っています。
+
+ +

関数

+ +
+
{{WebExtAPIRef("commands.getAll")}}
+
+

拡張機能用のすべての登録済みコマンドを取得します。

+
+
+ +

イベント

+ +
+
{{WebExtAPIRef("commands.onCommand")}}
+
+
関連付けされたキーボードショートカットを使ってコマンドが実行された時に発火します。
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.commands")}} {{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.commands API に基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/contentscripts/index.html b/files/ja/mozilla/add-ons/webextensions/api/contentscripts/index.html new file mode 100644 index 0000000000..d72cf1de1d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/contentscripts/index.html @@ -0,0 +1,47 @@ +--- +title: contentScripts +slug: Mozilla/Add-ons/WebExtensions/API/contentScripts +tags: + - API + - Extensions + - Interface + - WebExtensions + - contentScripts + - インタフェース + - コンテントスクリプト + - 拡張機能 +translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts +--- +
{{AddonSidebar}}
+ +

このAPIはコンテントスクリプトを登録するためにお使いいただけます。コンテントスクリプトを登録することで、指定したURLにマッチするページにそのスクリプトを挿入するようブラウザに指定することができます。

+ +

このAPIはmanifest.jsonにある"content_scripts"キーと似ていますが、"content_scripts"ではコンテントスクリプトとURLのパターンはインストールタイムに固定されます。一方content_scripts APIは、ランタイム（実行時）でスクリプトを登録・登録解除することが可能です。

+ +

このAPIは、{{WebExtAPIRef("contentScripts.register()")}} メソッドを呼び出して使用していただけます。その際は、登録するコンテントスクリプト、URLのマッチングパターン、またその他のオプションを実引数(arguments)として渡してください。このメソッドは{{WebExtAPIRef("contentScripts.RegisteredContentScript")}} オブジェクトがresolveされた Promise を返します。

+ +

RegisteredContentScript オブジェクトは register() で登録されたスクリプトを保持し、unregister()でそのスクリプトを登録解除(unregister)できます。また、コンテントスクリプトはそれらを作ったページが消された際にも自動的に登録解除されます。例えば、backgroundページによって登録されたコンテントスクリプトは、backgroundページが消去された際に自動的に登録解除されます。

+ +

contentScripts API にパーミッションは存在しませんが、拡張機能はregister()でマッチさせるURLにおいては適切なhost permissionsを持っている必要があります。

+ +

Types

+ +
+
{{WebExtAPIRef("contentScripts.RegisteredContentScript")}}
+
+

このタイプのオブジェクトは{{WebExtAPIRef("contentScripts.register()")}}関数の返り値です。{{WebExtAPIRef("contentScripts.register()")}}関数で登録されたコンテントスクリプトを持ち、このオブジェクトを使ってそれらを登録解除することができます。

+
+
+ +

Functions

+ +
+
{{WebExtAPIRef("contentScripts.register()")}}
+
コンテントスクリプトを登録します。
+
+ +

ブラウザの互換性

+ +

{{Compat("webextensions.api.contentScripts", 10, 1)}}

+ +

{{WebExtExamples("h2")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/contentscripts/register/index.html b/files/ja/mozilla/add-ons/webextensions/api/contentscripts/register/index.html new file mode 100644 index 0000000000..ec8cfeaa28 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/contentscripts/register/index.html @@ -0,0 +1,107 @@ +--- +title: contentScripts.register() +slug: Mozilla/Add-ons/WebExtensions/API/contentScripts/register +tags: + - API + - Extensions + - Method + - Reference + - contentScripts + - register +translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts/register +--- +
{{AddonSidebar()}}
+ +

このメソッドは一つ以上の content scripts を登録するときに使用します。

+ +

manifest.json内の content_scripts に似た一つのオブジェクトを引数に持ちます。content_scripts では配列ですが、この register() ではオブジェクトを引数に持ちます。

+ +

これは Promise を返す非同期関数です。

+ +

構文

+ +
var registering = browser.contentScripts.register(
+  contentScriptOptions       // object
+)
+
+ +

パラメーター

+ +
+
contentScriptOptions
+
+

object です。RegisteredContentScriptOptions オブジェクトは登録するコンテントスクリプトを表します。content_scripts と似た構文のオブジェクトで、その違いは以下の通りです。

+ +
    +
  • プロパティ名にはスネーク形式ではなくキャメル形式を使用します (例えば、excludeMatchesを使用します。exclude_matches ではありません)
    • +
  • js プロパティと css プロパティには、相対パスのほかに文字列も指定できます。このため、登録したいものがどちらであるのかを明確にできる構文になっています。
    • +
+ +

RegisteredContentScriptOptions は次のプロパティを持ちます:

+ +
+
allFrames{{optional_inline}}
+
content_scripts における all_frames と同様です。
+
css{{optional_inline}}
+
オブジェクトの配列。 それぞれのオブジェクトは file という名前の manifest.json からの相対パスで登録したい CSS ファイルを指定した URL の文字列を持つプロパティか、code という名前の登録したい CSS の文字列を持つプロパティを含みます。
+
excludeGlobs{{optional_inline}}
+
content_scripts における exclude_globs と同様です。
+
excludeMatches{{optional_inline}}
+
content_scripts における exclude_matches と同様です。
+
includeGlobs{{optional_inline}}
+
content_scripts における include_globs と同様です。
+
js{{optional_inline}}
+
オブジェクトの配列。各オブジェクトは file または code プロパティを含み、その要素は css プロパティと同様です。
+
matchAboutBlank{{optional_inline}}
+
content_scripts における match_about_blank と同様です。
+
matches
+
content_scripts における matches と同様です。
+
runAt{{optional_inline}}
+
content_scripts における run_at と同様です。
+
+
+
+ +

返り値

+ +

登録したコンテントスクリプトを削除することができる {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} オブジェクトを引数に持つ Promise を返します。

+ +


+ 現在、登録したコンテントスクリプトは、これを登録した拡張機能ページをアンロードしたときに削除されます。したがって、コンテントスクリプトを登録する際は、少なくとも登録されたままであってほしいだけ存在する拡張機能ページから登録すべきです。

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.contentScripts.register", 10)}}

+ +

例

+ +

defaultCode コンテントスクリプトを、すべての .org URL に対して登録します。

+ +
const defaultHosts = "*://*.org/*";
+const defaultCode = "document.body.innerHTML = '<h1>このページは書き換えられました<h1>'";
+
+async function register(hosts, code) {
+
+  return await browser.contentScripts.register({
+    matches: [hosts],
+    js: [{code}],
+    runAt: "document_idle"
+  });
+
+}
+
+var registered = register(defaultHosts, defaultCode);
+ +

次のコードは content_scripts/example.js にある JavaScript ファイルを登録します。

+ +
const scriptObj = await browser.contentScripts.register({
+  "js": [{file: "/content_scripts/example.js"}],
+  "matches": ["<all_urls>"],
+  "allFrames": true,
+  "runAt": "document_start"
+});
+
+ +

{{WebExtExamples}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/contextualidentities/index.html b/files/ja/mozilla/add-ons/webextensions/api/contextualidentities/index.html new file mode 100644 index 0000000000..46f956e09e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/contextualidentities/index.html @@ -0,0 +1,63 @@ +--- +title: contextualIdentities +slug: Mozilla/Add-ons/WebExtensions/API/contextualIdentities +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/contextualIdentities +--- +
{{AddonSidebar}}
+ +

contextual identitiesの操作: contextual identities を一覧、作成、削除、更新します。

+ +

"Contextual identities"は「コンテナ」とも言われ、ブラウザーの機能で、ユーザーがウェブブラウズしている時に複数のIDを想定し、そこでもID同時の分離を維持したいアイデアを指します。例えば、ユーザーが「仕事のID」と「個人のID」を分けたいと考えて、これら2つのコンテキストで cookies を共有したくない場合など。

+ +

contextual identities 機能により、各コンテキストIDは名前、色、及びアイコンを持ちます。新規タブがIDにアサインされ、名前、アイコン、色がアドレスバーに出現します。内部的には、各IDが他のタブには共有されない自分の cookie ストアを持ちます。

+ +

Contextual identities は Firefox の実験的機能であり、Firefox Nightly だけでデフォルト有効になっています。その他のバージョンの Firefox で有効にするには、 privacy.userContext.enabled の設定を true にします。contextual identities は Android版Firefox でも利用できますが、このバージョンでは動作する UI がないのにご注意ください。

+ +

Firefox 57 より前では、contextualIdentities API は contextual identities 機能自体が有効になっている場合にだけ利用できます。機能が無効なまま拡張機能が contextualIdentities API を使おうとした場合、メソッド呼び出しは promises を false に解決します。

+ +

Firefox 57 以降では、contextualIdentities API を使う拡張機能がインストールされたら、contextual identities 機能は自動的に有効化されます。"privacy.userContext.enabled" プリファレンスを使って、まだユーザーが機能を無効化できるのに注意します。これが起きたら、contextualIdentities メソッドの呼び出しで、エラーメッセージと共に promises を拒否します。

+ +

Firefox での contextual identities のより詳しい情報はこのガイドを見てください。

+ +

Contextual identities は現在その他のブラウザーではサポートされていません。

+ +

この API を使うには、 manifest.json ファイル内で "contextualIdentities" パーミッションを入れます。

+ +

型

+ +
+
{{WebExtAPIRef("contextualIdentities.ContextualIdentity")}}
+
contextual identity に関する情報を含みます。
+
+ +

関数

+ +
+
{{WebExtAPIRef("contextualIdentities.create()")}}
+
新しい contextual identity を作成します
+
{{WebExtAPIRef("contextualIdentities.get()")}}
+
cookie ストア ID を引数に、単一の contextual identity を取得します
+
{{WebExtAPIRef("contextualIdentities.query()")}}
+
すべての contextual identities を取得、あるいは特定の名前の全 contextual identities を取得します
+
{{WebExtAPIRef("contextualIdentities.update()")}}
+
既存のcontextual identity のプロパティを更新します
+
{{WebExtAPIRef("contextualIdentities.remove()")}}
+
contextual identity を削除します
+
+

イベント

+
+
{{WebExtAPIRef("contextualIdentities.onCreated")}}
+
contextual identity 作成時に発火します
+
{{WebExtAPIRef("contextualIdentities.onRemoved")}}
+
contextual identity 削除時に発火します
+
{{WebExtAPIRef("contextualIdentities.onUpdated")}}
+
1つ以上の contextual identity のプロパティが更新された時に発火します
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.contextualIdentities")}}

+ +

{{WebExtExamples("h2")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.html b/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.html new file mode 100644 index 0000000000..b308cb0f6a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/cookies/cookie/index.html @@ -0,0 +1,111 @@ +--- +title: cookies.Cookie +slug: Mozilla/Add-ons/WebExtensions/API/cookies/Cookie +tags: + - API + - Add-ons + - Cookies + - Extensions + - Non-standard + - Reference + - Type + - WebExtensions + - cookie +translation_of: Mozilla/Add-ons/WebExtensions/API/cookies/Cookie +--- +
{{AddonSidebar()}}
+ +

{{WebExtAPIRef("cookies")}} API の Cookie 型はHTTP cookie の情報を持ちます。

+ +

型

+ +

以下のプロパティを含むオブジェクトです。

+ +
+
domain
+
cookie の所属するドメイン (例えば "www.google.com" や "example.com") を示す文字列を持つ string 型です。
+
expirationDate{{optional_inline}}
+
cookie の有効期限をUNIX時刻からの秒数で持つ number 型です。セッション cookie はこのプロパティを持っていません。
+
firstPartyDomain
+
cookie に関連付けられたファーストパーティドメインを表す文字列を格納している string 型です。 cookie のFirst-party isolationが無効の間は空文字列になります。詳細は First-party isolation をご覧ください。
+
hostOnly
+
boolean 型です。cookie がホストオンリークッキー (リクエストのホストが cookie の指定ドメインと完全一致している場合のみ送信) である場合に true 、でなければ false になります。
+
httpOnly
+
boolean 型です。 cookieに HttpOnly 属性 ( cookie をクライアント側スクリプトから参照できなくする属性) が付与されている場合に true 、でなければ false が格納されます。
+
name
+
cookie の名前が格納される string 型です。
+
path
+
cookie のパスが格納される string 型です。
+
secure
+
boolean 型です。 cookie に secure 属性(暗号化通信でのみ cookie を送信する属性)が付与されている場合に true 、でなければ false になります。
+
session
+
boolean 型です。 cookie がセッション cookie ( セッション限りで破棄される cookie )である場合に true 、でなければ false が付与されます。
+
storeId
+
この cookie が格納されている cookie ストアのIDを格納する string 型です。{{WebExtAPIRef("cookies.getAllCookieStores()")}}によって提供されます。
+
value
+
 cookie の値を格納する string 型です。
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.cookies.Cookie")}}

+ +

例

+ +

cookies API のほとんどは入力パラメータまたは戻り値の一部として使用される Cookie オブジェクトを含みます。例えば {{WebExtAPIRef("cookies.getAll()")}} は Cookie オブジェクトの配列を返します。

+ +

以下の例ではすべての cookie を取得し、コンソールログに  Cookie オブジェクト中のいくつかのプロパティを出力します。

+ +
function logCookies(cookies) {
+  for (cookie of cookies) {
+    console.log(`Domain: ${cookie.domain}`);
+    console.log(`Name: ${cookie.name}`);
+    console.log(`Value: ${cookie.value}`);
+    console.log(`Persistent: ${!cookie.session}`);
+  }
+}
+
+var gettingAll = browser.cookies.getAll({});
+gettingAll.then(logCookies);
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

この API は Chromium の chrome.cookies API に基づいています。 また、このドキュメントは cookies.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/cookies/index.html b/files/ja/mozilla/add-ons/webextensions/api/cookies/index.html new file mode 100644 index 0000000000..63788a4292 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/cookies/index.html @@ -0,0 +1,143 @@ +--- +title: cookies +slug: Mozilla/Add-ons/WebExtensions/API/cookies +tags: + - API + - Add-ons + - Cookies + - Extensions + - Interface + - Reference + - dard +translation_of: Mozilla/Add-ons/WebExtensions/API/cookies +--- +
{{AddonSidebar}}
+ +

拡張機能に cookie の取得と設定と、変更された時の通知を可能にします。

+ +

この API を使用するには、manifest.json ファイルで "cookies" の API パーミッション があることと、同様にアクセスする cookie を持つ host パーミッション も必要になります。cookie パーミッションを見てください。

+ +

型

+ +
+
{{WebExtAPIRef("cookies.Cookie")}}
+
HTTP cookieの情報を表す。
+
{{WebExtAPIRef("cookies.CookieStore")}}
+
ブラウザーの cookie store を表す。
+
{{WebExtAPIRef("cookies.OnChangedCause")}}
+
cookie の変更理由を表す。
+
+ +

メソッド

+ +
+
{{WebExtAPIRef("cookies.get()")}}
+
1つの cookie の情報を取得する。
+
{{WebExtAPIRef("cookies.getAll()")}}
+
与えられたフィルターにマッチするすべての cookies を取得する。
+
{{WebExtAPIRef("cookies.set()")}}
+
与えられた cookie データ を cookie に設定する; おなじ cookies が存在すれば上書きする。
+
{{WebExtAPIRef("cookies.remove()")}}
+
指定した名前の cookie を削除する。
+
{{WebExtAPIRef("cookies.getAllCookieStores()")}}
+
すべての cookie stores を一覧する。
+
+ +

イベントハンドラー

+ +
+
{{WebExtAPIRef("cookies.onChanged")}}
+
cookie が設定、削除された時に発火する。
+
+ +

パーミッション

+ +

この API を使うには、アドオンは manifest で "cookies" の API パーミッション を指定せねばならず、同様に cookie がアクセスするあらゆるサイトの host パーミッションも要ります。アドオンは host パーミッションにマッチするURLから読み書きされる cookie を読み書きできます。例えば:

+ +
+
http://*.example.com/
+
+

この host パーミッションを持つアドオンは下記ができます:

+ +
    +
  • www.example.com のあらゆるパスの、非セキュア型 cookie を読む
    • +
  • セキュア/非セキュア問わず、www.example.com のあらゆるパスの cookie に書き込む
    • +
+ +

下記はできません:

+ +
    +
  • www.example.com のセキュア型cookie を読む
    • +
+
+
http://www.example.com/
+
+

この host パーミッションを持つアドオンは下記ができます:

+ +
    +
  • www.example.com のあらゆるパスの、非セキュア型cookie を読む
    • +
  • .example.comのあらゆるパスの、非セキュア型cookie を読む
    • +
  • セキュア/非セキュア問わず、www.example.comのあらゆるパスの cookie に書き込む
    • +
  • セキュア/非セキュア問わず、.example.comのあらゆるパスの cookie に書き込む
    • +
+ +

下記はできません:

+ +
    +
  • foo.example.com の cookie の読み書き
    • +
  • foo.www.example.com の cookie の読み書き
    • +
+
+
*://*.example.com/
+
+

この host パーミッションを持つアドオンは下記ができます:

+ +
    +
  • セキュア/非セキュア問わず、www.example.com のあらゆるパスの cookie の読み書き
    • +
+
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.cookies")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.cookies API に基づいています。また、このドキュメントは cookies.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html new file mode 100644 index 0000000000..5ed0d6580f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html @@ -0,0 +1,211 @@ +--- +title: devtools.inspectedWindow.eval() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +--- +
{{AddonSidebar()}}
+ +

devtools が接続されているウィンドウで JavaScript を実行します。

+ +

これは {{WebExtAPIRef("tabs.executeScript()")}} を使用してコンテンツスクリプトを添付することに似ていますが、主に2つの違いがあります。

+ +

第1に、JavaScript はブラウザが通常 devtools コンソール実装で提供する特別なコマンドのセットを使用できます。たとえば、"$0" を使用してインスペクタで現在選択されている要素を参照します。

+ +

次に、実行する JavaScript はページが読み込んだスクリプトによってページに加えられた変更を確認できます。これは、ページスクリプトが読み込まれなかった場合に存在するページを表示するコンテンツスクリプトとは対照的です。ただし、コンテンツスクリプトによって提供される分離は意図的なセキュリティ機能であり、DOM 関数とプロパティを再定義することにより、悪意のあるまたは単に非協力的な Web ページがWebExtensions API を混乱または破壊することを困難にすることを目的としています。つまり eval() を使用してこの保護を放棄する場合は非常に注意する必要があり、eval() を使用する必要がない限りコンテンツスクリプトを使用する必要があります。

+ +

スクリプトは、ページのメインフレームでデフォルトで評価されます。スクリプトは、JSON として表現できる値に評価する必要があります (たとえば、関数または関数を含むオブジェクトには評価されない可能性があることを意味します)。デフォルトでは、スクリプトはページに添付されたコンテンツスクリプトを表示しません。

+ +

"about:addons" などの特権ブラウザウィンドウで eval() を呼び出すことはできません。

+ +

オプションで options パラメータを指定できます。options パラメータには、異なるフレームまたは添付コンテンツスクリプトのコンテキストでスクリプトを評価するオプションが含まれます。Firefox はまだ options パラメータをサポートしていないことに注意してください。

+ +

eval() 関数は、スクリプトの評価結果またはエラーを解決する Promise を返します。

+ +

ヘルパー

+ +

The script gets access to a number of objects that help the injected script interact with the developer tools. The following helpers are currently supported:

+ +
+
$0
+
Contains a reference to the element that's currently selected in the devtools Inspector.
+
inspect()
+
Given an object, if it is an DOM element in the page, selects it in the devtools Inspector, otherwise it creates an object preview in the webconsole.
+
+ +

See some examples.

+ +

Syntax

+ +
var evaluating = browser.devtools.inspectedWindow.eval(
+  expression,       // string
+  options           // object
+)
+
+ +

Parameters

+ +
+
expression
+
string. The JavaScript expression to evaluate. The string must evaluate to a object that can be represented as JSON, or an exception will be thrown. For example, expression must not evaluate to a function.
+
options{{optional_inline}}
+
object. Options for the function (Note that Firefox does not yet support this options), as follows:
+
+
+
frameURL{{optional_inline}}
+
string. The URL of the frame in which to evaluate the expression. If this is omitted, the expression is evaluated in the main frame of the window.
+
useContentScriptContext{{optional_inline}}
+
boolean. If true, evaluate the expression in the context of any content scripts that this extension has attached to the page. If you set this option, then you must have actually attached some content scripts to the page, or a Devtools error will be thrown.
+
contextSecurityOrigin {{optional_inline}}
+
string. Evaluate the expression in the context of a content script attached by a different extension, whose origin matches the value given here. This overrides useContentScriptContext.
+
+
+
+ +

Return value

+ +

A Promise that will be fulfilled with an array containing two elements.

+ +

If no error occurred, element 0 will contain the result of evaluating the expression, and element 1 will be undefined.

+ +

If an error occurred, element 0 will be undefined, and element 1 will contain an object giving details about the error. Two different sorts of errors are distinguished:

+ + + +

ブラウザの対応状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

+ + + +

例

+ +

This tests whether jQuery is defined in the inspected window, and logs the result. Note that this wouldn't work in a content script, because even if jQuery were defined, the content script would not see it.

+ +
function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  console.log(result);
+  if (result[0] !== undefined) {
+    console.log(`jQuery: ${result[0]}`);
+  } else if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+const checkjQuery = "typeof jQuery != 'undefined'";
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(checkjQuery)
+    .then(handleResult);
+});
+ +

Helper examples

+ +

This uses the $0 helper to set the background color of the element that's currently selected in the Inspector:

+ +
const evalButton = document.querySelector("#reddinate");
+const evalString = "$0.style.backgroundColor = 'red'";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(evalString)
+    .then(handleResult);
+});
+
+ +

This uses the inspect() helper to select the first <h1> element in the page:

+ +
const inspectButton = document.querySelector("#inspect");
+const inspectString = "inspect(document.querySelector('h1'))";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+inspectButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(inspectString)
+    .then(handleResult);
+});
+
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.devtools API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html new file mode 100644 index 0000000000..e7a8f7181d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html @@ -0,0 +1,79 @@ +--- +title: devtools.inspectedWindow +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inspectedWindow +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +--- +
{{AddonSidebar}}
+ +
+

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.inspectedWindow API によって開発ツール拡張機能では開発ツールが割当てられたウィンドウと相互作用できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。詳細は developer tools の拡張 を見てください。

+ +

プロパティ

+ +
+
devtools.inspectedWindow.tabId
+
開発ツールが付属しているウィンドウの ID
+
+ +

Functions

+ +
+
devtools.inspectedWindow.eval()
+
ターゲットウィンドウ内の  JavaScript を評価する
+
devtools.inspectedWindow.reload()
+
ターゲットウィンドウのドキュメントを再読み込みする
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow")}}{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.inspectedWindow API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html new file mode 100644 index 0000000000..6837e95e36 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html @@ -0,0 +1,77 @@ +--- +title: devtools.inspectedWindow.tabId +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +--- +
{{AddonSidebar()}}
+ +

devtools のこのインスタンスがアタッチされる {{WebExtAPIRef("tabs.Tab", "tab")}} の ID。番号で表されます。

+ +

これは拡張機能のバックグラウンドページに送信できるため、バックグラウンドページは {{WebExtAPIRef("tabs")}} API を使用してタブと対話できます:

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+attachContentScriptButton.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

ブラウザの対応状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

+ + + +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools API に基づいています。

+ +

Microsoft Edge の互換性データは Microsoft Corporation によって提供され、Creative Commons Attribution 3.0 United States License に含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html new file mode 100644 index 0000000000..b5d97b1b1e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html @@ -0,0 +1,74 @@ +--- +title: devtools.network +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network +--- +
{{AddonSidebar}}
+ +
+

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.network API によって開発ツール拡張機能では開発ツールが付属しているウィンドウ(インスペクト対象ウィンドウ)に関連するネットワークリクエストの情報を取得できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

+ +

Events

+ +
+
devtools.network.onNavigated
+
ユーザーが新規ページのインスペクト対象ウィンドウに移動した時に発火します
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.network")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.network API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html new file mode 100644 index 0000000000..efb826a25f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html @@ -0,0 +1,105 @@ +--- +title: devtools.panels +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels +--- +
{{AddonSidebar}}
+ +
+

このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.panels API によって開発ツール拡張機能では開発ツールウィンドウ内のユーザーインターフェイスの定義ができます。

+ +

開発ツールウィンドウにはいくつもの個別のツールがあります - JavaScript デバッガー、ネットワークモニター、などが。最上位のタブの行でユーザーは色々なツールを切り替えられます。ツールのUIをホストするこのウィンドウは「パネル」と呼ばれます。

+ +

devtools.panels API にて開発ツールウィンドウ内の新規パネルを作成できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えばパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

+ +

型

+ +
+
devtools.panels.ElementsPanel
+
ブラウザーの開発ツールの HTML/CSS インスペクターを表す
+
devtools.panels.ExtensionPanel
+
拡張機能によって作られた開発ツールパネルを表す
+
devtools.panels.ExtensionSidebarPane
+
ブラウザーの開発ツールの HTML/CSS インスペクターに、拡張機能が追加したペインを表す
+
+ +

プロパティ

+ +
+
devtools.panels.elements
+
ElementsPanel オブジェクトの参照
+
devtools.panels.themeName
+
現在の開発ツールテーマの名前
+
+ +

関数

+ +
+
devtools.panels.create()
+
開発ツールを作成する
+
+ +

イベント

+ +
+
devtools.panels.onThemeChanged
+
開発ツールテーマが変更された時に発火する
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.panels", 2)}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.panels API に基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.html b/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.html new file mode 100644 index 0000000000..daf99a07a2 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/downloads/download/index.html @@ -0,0 +1,127 @@ +--- +title: downloads.download() +slug: Mozilla/Add-ons/WebExtensions/API/downloads/download +translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/download +--- +
{{AddonSidebar()}}
+ +

{{WebExtAPIRef("downloads")}} API の download() 関数ではURLとそのほかのオプションの設定を行うことでファイルのダウンロードをすることができます。

+ + + +

この関数は非同期に実行され、Promiseを返します。

+ +

構文

+ +
var downloading = browser.downloads.download(
+  options                   // object
+)
+
+ +

パラメータ

+ +
+
options
+
このobjectではダウンロードしたいファイルやその他のダウンロードに関する設定を指定します。指定できるプロパティは以下です。
+
+
+
body{{optional_inline}}
+
リクエストのbodyをstringで指定します。
+
conflictAction{{optional_inline}}
+
A string representing the action you want taken if there is a filename conflict, as defined in the {{WebExtAPIRef('downloads.FilenameConflictAction')}} type (defaults to "uniquify" when it is not specified).
+
filename{{optional_inline}}
+
A string representing a file path relative to the default downloads directory — this provides the location where you want the file to be saved, and what filename you want to use. Absolute paths, empty paths, and paths containing back-references (../) will cause an error. If omitted, this value will default to the filename already given to the download file, and a location immediately inside the downloads directory.
+
headers{{optional_inline}}
+
An array of objects representing extra HTTP headers to send with the request if the URL uses the HTTP[s] protocol. Each header is represented as a dictionary object containing the keys name and either value or binaryValue, restricted to those allowed by XMLHttpRequest.
+
incognito{{optional_inline}}
+
A boolean: if present and set to true, then associate this download with a private browsing session. This means that it will only appear in the download manager for any private windows that are currently open.
+
method{{optional_inline}}
+
HTTP[S]を使用したURLを指定した際、HTTPメソッドをstringで指定します。GETもしくはPOSTを設定できます。
+
saveAs{{optional_inline}}
+
+

A boolean that specifies whether to provide a file chooser dialog to allow the user to select a filename (true), or not (false).

+ +

If this option is omitted, the browser will show the file chooser or not based on the general user preference for this behavior (in Firefox this preference is labeled "Always ask you where to save files" in about:preferences, or browser.download.useDownloadDir in about:config).

+
+
url
+
ダウンロードするURLをstringで指定します。
+
+
+
+ +

戻り値

+ +

Promiseが返却されます。ダウンロードが成功した場合、new {{WebExtAPIRef("downloads.DownloadItem")}}のidが格納されたpromiseを受け取ります。対して、promiseがrejectされた場合は、エラーメッセージを受け取ります。

+ +

ブラウザ実装状況

+ + + +

 

+ +

{{Compat("webextensions.api.downloads.download")}}

+ +

 

+ +

例

+ +

以下のダウンロードの例ではファイル名と保存場所を指定し、conflictActionにuniquifyを指定しています。

+ +
function onStartedDownload(id) {
+  console.log(`Started downloading: ${id}`);
+}
+
+function onFailed(error) {
+  console.log(`Download failed: ${error}`);
+}
+
+var downloadUrl = "https://example.org/image.png";
+
+var downloading = browser.downloads.download({
+  url : downloadUrl,
+  filename : 'my-image-again.png',
+  conflictAction : 'uniquify'
+});
+
+downloading.then(onStartedDownload, onFailed);
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

このAPIはChromiumの chrome.downloads APIを元にしています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/downloads/index.html b/files/ja/mozilla/add-ons/webextensions/api/downloads/index.html new file mode 100644 index 0000000000..98dcaef054 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/downloads/index.html @@ -0,0 +1,134 @@ +--- +title: downloads +slug: Mozilla/Add-ons/WebExtensions/API/downloads +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - downloads +translation_of: Mozilla/Add-ons/WebExtensions/API/downloads +--- +
{{AddonSidebar}}
+ +

拡張機能にブラウザーのダウンロードマネージャーとのやりとりを可能にします。このAPI モジュールを、ファイルマネージャーでのファイルのダウンロード、キャンセル、停止、ダウンロードの再開、ダウンロード済みのファイルの表示に使用できます。

+ +

このAPIを使うには manifest.json ファイルで指定する "downloads" API パーミッションが必要です。

+ +

型

+ +
+
{{WebExtAPIRef("downloads.FilenameConflictAction")}}
+
ダウンロードされたファイル名が既存ファイルと衝突する場合の動作オプション定義
+
{{WebExtAPIRef("downloads.InterruptReason")}}
+
ダウンロードが中断された理由の集合を定義
+
{{WebExtAPIRef("downloads.DangerType")}}
+
ダウンロード可能なファイルに関連した想定される危険性への警告の集合を定義
+
{{WebExtAPIRef("downloads.State")}}
+
現在のダウンロードが取りうるさまざまな状態を定義
+
{{WebExtAPIRef("downloads.DownloadItem")}}
+
ダウンロード済みのファイルを表現する
+
{{WebExtAPIRef("downloads.StringDelta")}}
+
2つの文字列の差異を表現する
+
{{WebExtAPIRef("downloads.DoubleDelta")}}
+
2つの倍精度実数の差異を表現する
+
{{WebExtAPIRef("downloads.BooleanDelta")}}
+
2つの真偽値の差異を表現する
+
{{WebExtAPIRef("downloads.DownloadTime")}}
+
ダウンロード完了にかかった時間を表現する
+
{{WebExtAPIRef("downloads.DownloadQuery")}}
+
ダウンロードマネージャーで特定のダウンロードを検索するのに使われるパラメーターを定義
+
+ +

関数

+ +
+
{{WebExtAPIRef("downloads.download()")}}
+
URL とオプション設定を与えて、ファイルをダウンロードします
+
{{WebExtAPIRef("downloads.search()")}}
+
ブラウザーのダウンロードマネージャーで使える {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} に問い合わせて、指定した検索条件にマッチするものを返します
+
{{WebExtAPIRef("downloads.pause()")}}
+
ダウンロードを停止します
+
{{WebExtAPIRef("downloads.resume()")}}
+
停止したダウンロードを再開します
+
{{WebExtAPIRef("downloads.cancel()")}}
+
ダウンロードをキャンセルします
+
{{WebExtAPIRef("downloads.getFileIcon()")}}
+
指定したダウンロードのアイコンを取得します
+
{{WebExtAPIRef("downloads.open()")}}
+
関連付けられたアプリケーションでダウンロード済みのファイルを開きます
+
{{WebExtAPIRef("downloads.show()")}}
+
プラットフォームのファイルマネージャーアプリケーションを開いて、ダウンロードフォルダー内のファイルを表示します
+
{{WebExtAPIRef("downloads.showDefaultFolder()")}}
+
プラットフォームのファイルマネージャーアプリケーションを開いて、デフォルトのダウンロードフォルダーを表示します
+
{{WebExtAPIRef("downloads.erase()")}}
+
ダウンロード済みのファイルをディスクから消去することなく、ブラウザーのダウンロード履歴からマッチした {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} を消去します
+
{{WebExtAPIRef("downloads.removeFile()")}}
+
ブラウザーのダウンロード履歴ではなく、ダウンロード済みのファイルをディスクから消去します
+
{{WebExtAPIRef("downloads.acceptDanger()")}}
+
危険なダウンロードを受け入れるかキャンセルするかを、ユーザーに確認します
+
{{WebExtAPIRef("downloads.drag()")}}
+
ダウンロード済みのファイルを他のアプリケーションにドラッグし始めます
+
{{WebExtAPIRef("downloads.setShelfEnabled()")}}
+
現在のブラウザープロファイルに関連するすぺてのウィンドウの下のグレーの棚を有効化/無効化します。この棚は少なくとも1つの拡張機能が無効化すると無効になります。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("downloads.onCreated")}}
+
ダウンロード開始時に {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} オブジェクトと共に発火します
+
{{WebExtAPIRef("downloads.onErased")}}
+
ダウンロードが履歴から消去された時に downloadId と共に発火します
+
{{WebExtAPIRef("downloads.onChanged")}}
+
bytesReceived を除くいかなる {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} のプロパティが変わった時、このイベントは downloadId や変更したプロパティを含むオブジェクトと共に発火します
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.downloads")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.downloads API に基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/events/index.html b/files/ja/mozilla/add-ons/webextensions/api/events/index.html new file mode 100644 index 0000000000..7b911a1f0a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/events/index.html @@ -0,0 +1,74 @@ +--- +title: events +slug: Mozilla/Add-ons/WebExtensions/API/events +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - events +translation_of: Mozilla/Add-ons/WebExtensions/API/events +--- +
{{AddonSidebar}}
+ +

イベントをディスパッチする API から使われる共通の型です。

+ +

型

+ +
+
{{WebExtAPIRef("events.Rule")}}
+
イベント処理用の宣言的ルールを記述します。
+
{{WebExtAPIRef("events.Event")}}
+
Chrome イベントにリスナーを追加、削除できるオブジェクト。
+
{{WebExtAPIRef("events.UrlFilter")}}
+
いろいろな条件で URL をフィルターする。所与の条件のいずれかがマッチした場合、フィルター全体がマッチする。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.events")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.events API に基づいています。また、このドキュメントは events.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/extension/index.html b/files/ja/mozilla/add-ons/webextensions/api/extension/index.html new file mode 100644 index 0000000000..49c768d793 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/extension/index.html @@ -0,0 +1,105 @@ +--- +title: extension +slug: Mozilla/Add-ons/WebExtensions/API/extension +tags: + - API + - Add-ons + - Extension + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/extension +--- +
{{AddonSidebar}}
+ +

拡張機能に関連するユーティリティ。拡張機能のリソースパッケージのURLを取得したり、拡張機能のページの Window オブジェクトを取得したり、いろいろな設定の値を取得したりします。注意として、このモジュールのメッセージ APIs は非推奨で、 runtime モジュールの同様な API が好まれます。

+ +

型

+ +
+
{{WebExtAPIRef("extension.ViewType")}}
+
拡張機能ビューの型
+
+ +

プロパティ

+ +
+
{{WebExtAPIRef("extension.lastError")}}
+
同期型の拡張機能APIがエラーに終わった場合のコールバックの寿命をセットします。エラーが起きなかったら lastError は undefined.になります。
+
{{WebExtAPIRef("extension.inIncognitoContext")}}
+
incognito タブ内でコンテンツスクリプトが実行されたり、 incognito プロセス内で拡張機能ページが実行されたら true になります。後者は 'split' incognito_behavior の場合だけです。
+
+ +

関数

+ +
+
{{WebExtAPIRef("extension.getURL()")}}
+
拡張機能がインストールされたディレクトリーの相対パスを完全修飾 URL に変換する
+
{{WebExtAPIRef("extension.getViews()")}}
+
今の拡張機能内で実行されているページの Window オブジェクトを返す
+
{{WebExtAPIRef("extension.getBackgroundPage()")}}
+
今の拡張機能内で実行されているバックグラウンドページの Window オブジェクトを返す。拡張機能がバックグラウンドページを持たない場合は null を返す
+
{{WebExtAPIRef("extension.isAllowedIncognitoAccess()")}}
+
拡張機能が Incognito-モード (ユーザーが制御する 'Incognito を許可' のチェックボックスで定義される) にアクセスする状態を取得する
+
{{WebExtAPIRef("extension.isAllowedFileSchemeAccess()")}}
+
拡張機能が 'file://' スキーム(ユーザーが制御する 'File URLs のアクセスを許可' のチェックボックスで定義される) にアクセスする状態を取得する
+
{{WebExtAPIRef("extension.setUpdateUrlData()")}}
+
拡張機能の更新URL内で使われる ap CGI パラメーターをセットする。この値はブラウザーのベンダーストアでホストされる拡張機能では無視される
+
+ +

イベント

+ +
+
{{WebExtAPIRef("extension.onRequest")}}
+
拡張機能のプロセスかコンテンツスクリプトのいずれかからリクエストが送られた時に発火します
+
{{WebExtAPIRef("extension.onRequestExternal")}}
+
その他の拡張機能からリクエストが送られた時に発火します
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.extension")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.extension API に基づいています。また、このドキュメントは extension.jsonにおける Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.html b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.html new file mode 100644 index 0000000000..b3f77ef0ec --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.html @@ -0,0 +1,75 @@ +--- +title: extensionTypes.ImageDetails +slug: Mozilla/Add-ons/WebExtensions/API/extensionTypes/ImageDetails +tags: + - API + - Add-ons + - Extensions + - ImageDetails + - Non-standard + - Reference + - Type + - WebExtensions + - extensionTypes +translation_of: Mozilla/Add-ons/WebExtensions/API/extensionTypes/ImageDetails +--- +
{{AddonSidebar()}}
+ +

画像のフォーマットと品質に関する詳細。

+ +

型

+ +

この型はオブジェクトです。以下のプロパティを持ちます。

+ +
+
format{{optional_inline}}
+
{{WebExtAPIRef('extensionTypes.ImageFormat')}} 型。出力される画像のフォーマット。デフォルトは "png"。
+
quality{{optional_inline}}
+
integer 型。フォーマットが "jpeg" の場合、出力される画像の品質はこの値により変化する。0 から 100 の間の数値であり、0 から 1 の間の数値に変換されて HTMLCanvasElement.toDataURL() の引数 encoderOptions として使われる。省略された場合は、92 が使われる。品質を下げると、出力される画像の視覚的な変化が大きくなり、画像の格納に必要なバイト数も小さくなる。PNG 画像の場合、この値は無視される。
+
+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.extensionTypes.ImageDetails")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.extensionTypes API に基づいています。このドキュメントは extension_types.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.html b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.html new file mode 100644 index 0000000000..3c6424f619 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/index.html @@ -0,0 +1,76 @@ +--- +title: extensionTypes +slug: Mozilla/Add-ons/WebExtensions/API/extensionTypes +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - extensionTypes +translation_of: Mozilla/Add-ons/WebExtensions/API/extensionTypes +--- +
{{AddonSidebar}}
+ +

その他の WebExtension API で使われる共通な型

+ +

型

+ +
+
{{WebExtAPIRef("extensionTypes.ImageFormat")}}
+
画像フォーマット
+
{{WebExtAPIRef("extensionTypes.ImageDetails")}}
+
画像のフォーマットと画質の詳細
+
{{WebExtAPIRef("extensionTypes.RunAt")}}
+
タブに JavaScript か CSS が挿入されてほんのすぐ
+
extensionTypes.CSSOrigin
+
tabs.insertCSS で挿入された CSS スタイルシートが "author" か "user" のスタイルシートのどちらであるかを示す
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.extensionTypes")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.extensionTypes API に基づいています。また、このドキュメントは extension_types.jsonにおける Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.html b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.html new file mode 100644 index 0000000000..eb04888c5f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.html @@ -0,0 +1,76 @@ +--- +title: extensionTypes.RunAt +slug: Mozilla/Add-ons/WebExtensions/API/extensionTypes/RunAt +tags: + - API + - Add-ons + - Extensions + - Non-standard + - Reference + - RunAt + - Type + - WebExtensions + - extensionTypes +translation_of: Mozilla/Add-ons/WebExtensions/API/extensionTypes/RunAt +--- +
{{AddonSidebar()}}
+ +

JavaScript や CSS がどの時点でタブに挿入されるか。

+ +

型

+ +

この型の値は文字列です。とりうる値は、"document_start", "document_end", "document_idle" です。

+ + + +

デフォルトの値は "document_idle" です。

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.extensionTypes.RunAt")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.extensionTypes API に基づいています。また、このドキュメントは extension_types.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/find/find/index.html b/files/ja/mozilla/add-ons/webextensions/api/find/find/index.html new file mode 100644 index 0000000000..e33d2cf4f9 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/find/find/index.html @@ -0,0 +1,298 @@ +--- +title: find.find() +slug: Mozilla/Add-ons/WebExtensions/API/find/find +translation_of: Mozilla/Add-ons/WebExtensions/API/find/find +--- +
{{AddonSidebar()}}
+ +

テキストによるタブ内の検索をします。

+ +

次のことができます。

+ + + +

デフォルトではマッチ件数ぐらいしか返ってきませんが、タブ内でのより多くの情報を得るため、次のオプションを指定することができます。

+ + + +

結果を内部的に保持しているため、ハイライト機能は次に上書き(find())されるまで次の関数で起動できます。

+ + + +

この関数は asynchronous/ 非同期 関数で Promise を返します。

+ +

Syntax

+ +
browser.find.find(
+  queryphrase,       // string
+  options            // optional object
+)
+
+ +

Parameters

+ +
+
queryphrase
+
string. 検索語。
+
options{{optional_inline}}
+
+

object. An object specifying additional options. It may take any of the following properties, all optional:

+ +
+
tabId
+
integer. ID of the tab to search. Defaults to the active tab.
+
caseSensitive
+
boolean. If true, the search is case-sensitive. Defaults to false.
+
entireWord
+
boolean. Match only entire words: so "Tok" will not be matched inside "Tokyo". Defaults to false.
+
includeRangeData
+
boolean. Include range data in the response, which describe where in the page DOM the match was found. Defaults to false.
+
includeRectData
+
boolean. Include rectangle data in the response, which describes where in the rendered page the match was found. Defaults to false.
+
+
+
+ +

Return value

+ +

A Promise that will be fulfilled with an object containing up to three properties:

+ +
+
count
+
integer. The number of results found.
+
rangeData{{optional_inline}}
+
+

array. If includeRangeData was given in the options parameter, then this property will be included. It is provided as an array of RangeData objects, one for each match. それぞれのRangeData はDOM ツリー構造をしています。検索語の周りを表示することなどにも使えます。

+ +

次の rectData, も同様に配列で rangeData[i] と rectData[i]は1対1で対応します。.

+ +

Each RangeData contains the following properties:

+ +
+
framePos
+
マッチしたframe番号(訳注： iframeごとで変わる番号). 0 は通常のページ部分で親です。 Note that the order of objects in the rangeData array will sequentially line up with the order of frame indexes: for example, framePos for the first sequence of rangeData objects will be 0, framePos for the next sequence will be 1, and so on.
+
startTextNodePos
+
テキスト Nodeの 開始側Index（訳注：直接この値をAPI一本で活用できないため、下記のサンプルを参照）
+
endTextNodePos
+
テキスト Nodeの 終端側Index.
+
startOffset
+
開始Node内の 初めの文字列の位置.
+
endOffset
+
終端Node内の 終わりの文字列の位置
+
+
+
rectData{{optional_inline}}
+
+

array. 呼び出し時にoptionsで includeRectData 引数を与えると結果を返します。 RectData objectsの配列です。それらはマッチしたワードを含む、client rectangles を返します。拡張機能でハイライトなどに使えるでしょう。.

+ +

Each RectData object はそれぞれ 1つのマッチに対して2つのプロパティを持ちます。

+ +
+
rectsAndTexts
+
1対1の関係となる２つの配列を持ちます: +
    +
  • rectList: ４つの integer をもつ配列: top, left, bottom, right. その位置情報はviewportにおける左上からの位置です。
    • +
  • textList: 上記rectList[i]に含まれた textList[i] (string)を持つ配列です。
    • +
+ +

例えば Webページ上で:

+ +

"You may"を探すと2つの矩形エリアで表現されます。:

+ +

RectData はこのようにマッチし、 rectsAndTexts.rectList と rectsAndTexts.textListは次のようになります。

+ +
    +
  • textList[0] = "You ",  rectList[0] はHTML上の境界を表す矩形エリアを含みます。
    • +
  • textList[1] = "may",  rectList[1]も"may"について同様です。
    • +
+
+
text
+
マッチしたテキスト全体、上の例では"You may"が丸ごと入ります。
+
+
+
+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.find.find", 10)}}

+ +

Examples

+ +

Basic examples

+ +

Search the active tab for "banana", log the number of matches, and highlight them:

+ +
function found(results) {
+  console.log(`There were: ${results.count} matches.`);
+  if (results.count > 0) {
+    browser.find.highlightResults();
+  }
+}
+
+browser.find.find("banana").then(found);
+ +

Search for "banana" across all tabs (note that this requires the "tabs" permission, because it accesses tab.url):

+ +
async function findInAllTabs(allTabs) {
+  for (let tab of allTabs) {
+    let results = await browser.find.find("banana", {tabId: tab.id});
+    console.log(`In page "${tab.url}": ${results.count} matches.`)
+  }
+}
+
+browser.tabs.query({}).then(findInAllTabs);
+ +

Using rangeData

+ +

In this example the extension uses rangeData to get the context in which the match was found. The context is the complete textContent of the node in which the match was found. If the match spanned nodes, the context is the concatenation of the textContent of all spanned nodes.

+ +

Note that for simplicity, this example doesn't handle pages that contain frames. To support this you'd need to split rangeData into groups, one per frame, and execute the script in each frame.

+ +

The background script:

+ +
// background.js
+
+async function getContexts(matches) {
+
+  // get the active tab ID
+  let activeTabArray = await browser.tabs.query({
+    active: true, currentWindow: true
+  });
+  let tabId = activeTabArray[0].id;
+
+  // execute the content script in the active tab
+  await browser.tabs.executeScript(tabId, {file: "get-context.js"});
+  // ask the content script to get the contexts for us
+  let contexts = await browser.tabs.sendMessage(tabId, {
+    ranges: matches.rangeData
+  });
+  for (let context of contexts) {
+    console.log(context);
+  }
+
+}
+
+browser.browserAction.onClicked.addListener((tab) => {
+  browser.find.find("example", {includeRangeData: true}).then(getContexts);
+});
+
+ +

The content script:

+ +
/**
+ * Get all the text nodes into a single array
+ */
+function getNodes() {
+  let walker = document.createTreeWalker(document, window.NodeFilter.SHOW_TEXT, null, false);
+  let nodes = [];
+  while(node = walker.nextNode()) {
+    nodes.push(node);
+  }
+
+  return nodes;
+}
+
+/**
+ * Gets all text nodes in the document, then for each match, return the
+ * complete text content of nodes that contained the match.
+ * If a match spanned more than one node, concatenate the textContent
+ * of each node.
+ */
+function getContexts(ranges) {
+
+  let contexts = [];
+  let nodes = getNodes();
+
+  for (let range of ranges) {
+    let context = nodes[range.startTextNodePos].textContent;
+    let pos = range.startTextNodePos;
+    while (pos < range.endTextNodePos) {
+      pos++;
+      context += nodes[pos].textContent;
+    }
+    contexts.push(context);
+  }
+  return contexts;
+}
+
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  sendResponse(getContexts(message.ranges));
+});
+
+ +

Using rectData

+ +

In this example the extension uses rectData to "redact" the matches, by adding black DIVs over the top of their bounding rectangles:

+ +

Note that in many ways this is a poor way to redact pages.

+ +

The background script:

+ +
// background.js
+
+async function redact(matches) {
+
+  // get the active tab ID
+  let activeTabArray = await browser.tabs.query({
+    active: true, currentWindow: true
+  });
+  let tabId = activeTabArray[0].id;
+
+  // execute the content script in the active tab
+  await browser.tabs.executeScript(tabId, {file: "redact.js"});
+  // ask the content script to redact matches for us
+  await browser.tabs.sendMessage(tabId, {rects: matches.rectData});
+}
+
+browser.browserAction.onClicked.addListener((tab) => {
+  browser.find.find("banana", {includeRectData: true}).then(redact);
+});
+
+ +

The content script:

+ +
// redact.js
+
+/**
+ * Add a black DIV where the rect is.
+ */
+function redactRect(rect) {
+  var redaction = document.createElement("div");
+  redaction.style.backgroundColor = "black";
+  redaction.style.position = "absolute";
+  redaction.style.top = `${rect.top}px`;
+  redaction.style.left = `${rect.left}px`;
+  redaction.style.width = `${rect.right-rect.left}px`;
+  redaction.style.height = `${rect.bottom-rect.top}px`;
+  document.body.appendChild(redaction);
+}
+
+/**
+ * Go through every rect, redacting them.
+ */
+function redactAll(rectData) {
+  for (match of rectData) {
+    for (rect of match.rectsAndTexts.rectList) {
+      redactRect(rect);
+    }
+  }
+}
+
+browser.runtime.onMessage.addListener((message) => {
+  redactAll(message.rects);
+});
+
+ +

{{WebExtExamples}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/find/index.html b/files/ja/mozilla/add-ons/webextensions/api/find/index.html new file mode 100644 index 0000000000..903eef3507 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/find/index.html @@ -0,0 +1,32 @@ +--- +title: find +slug: Mozilla/Add-ons/WebExtensions/API/find +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - find +translation_of: Mozilla/Add-ons/WebExtensions/API/find +--- +
{{AddonSidebar}}
+ +

ウェブページのテキストを検索し、マッチしたものをハイライトします。

+ +

この API を使うには "find" パーミッションが必要です。

+ +

関数

+ +
+
{{WebExtAPIRef("find.find()")}}
+
ウェブページのテキストを検索する
+
{{WebExtAPIRef("find.highlightResults()")}}
+
最後に検索にマッチした集合をハイライトする
+
{{WebExtAPIRef("find.removeHighlighting()")}}
+
あらゆるハイライトを削除する
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.find", 1, 1)}} {{WebExtExamples("h2")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/history/historyitem/index.html b/files/ja/mozilla/add-ons/webextensions/api/history/historyitem/index.html new file mode 100644 index 0000000000..d698e6101e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/history/historyitem/index.html @@ -0,0 +1,83 @@ +--- +title: history.HistoryItem +slug: Mozilla/Add-ons/WebExtensions/API/history/HistoryItem +tags: + - API + - Add-ons + - Extensions + - History + - HistoryItem + - Non-standard + - Reference + - Type + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/history/HistoryItem +--- +

{{AddonSidebar()}}

+ +

HistoryItem オブジェクトはブラウザー履歴でのページ情報を提供します。

+ +

型

+ +

これは下記のプロパティを持つオブジェクトです:

+ +
+
id
+
string。アイテムに固有のID。
+
url {{optional_inline}}
+
string。ページのURL。
+
title {{optional_inline}}
+
string。ページのタイトル。
+
lastVisitTime {{optional_inline}}
+
number。ページが最後に読み込まれた日付と時間で、epochからのミリ秒で表現される。
+
visitCount {{optional_inline}}
+
number。ユーザーがページを訪問した回数。
+
typedCount {{optional_inline}}
+
number。ユーザーがアドレスをタイプしてページに移動したきた回数。
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.history.HistoryItem")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.history API に基づいています。また、このドキュメントは history.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/history/index.html b/files/ja/mozilla/add-ons/webextensions/api/history/index.html new file mode 100644 index 0000000000..20f5a6e995 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/history/index.html @@ -0,0 +1,132 @@ +--- +title: history +slug: Mozilla/Add-ons/WebExtensions/API/history +tags: + - API + - Add-ons + - Extensions + - History + - Interface + - Non-standard + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/history +--- +
　{{AddonSidebar}}
+ +

ブラウザー履歴とやりとりする history API を使用します。

+ +
+

downloads は HistoryItem オブジェクトとして扱われるのに注意します。このため、ダウンロードのために history.onVisited も発火します。

+
+ +

ブラウザー履歴はユーザーが訪れたページの時間順の記録です。history API では次の事ができます:

+ + + +

しかしながら、ユーザーは１つのページを何度も訪問することがあるので、このAPI は「訪問数」の概念もあります。したがってこの API を次のようにも使えます:

+ + + +

このAPIを使うには manifest.json ファイルで指定する "history" パーミッションが必要です。

+ +

型

+ +
+
{{WebExtAPIRef("history.TransitionType")}}
+
ブラウザーがあるページにどのように移動したのかを記述
+
{{WebExtAPIRef("history.HistoryItem")}}
+
+

ブラウザー履歴のあるページに関する情報を提供

+
+
{{WebExtAPIRef("history.VisitItem")}}
+
+

ページへの単一の訪問を記述

+
+
+ +

関数

+ +
+
{{WebExtAPIRef("history.search()")}}
+
ブラウザー履歴を検索して、所与の条件にマッチする history.HistoryItem オブジェクトを得る
+
{{WebExtAPIRef("history.getVisits()")}}
+
所定のページへの訪問についての情報を取得する
+
{{WebExtAPIRef("history.addUrl()")}}
+
ブラウザー履歴に所定のページへの訪問のレコードを追加する
+
{{WebExtAPIRef("history.deleteUrl()")}}
+
ブラウザー履歴から 所定のURLへのすべての訪問を削除する
+
{{WebExtAPIRef("history.deleteRange()")}}
+
所定の時間範囲でユーザーが訪問したすべてのページを削除する
+
{{WebExtAPIRef("history.deleteAll()")}}
+
ブラウザー履歴からすべての訪問を削除する
+
+ +

イベント

+ +
+
{{WebExtAPIRef("history.onTitleChanged")}}
+
+
ユーザーがあるページに訪問してタイトルが記録された時に発火します
+
+
{{WebExtAPIRef("history.onVisited")}}
+
ユーザーがあるページに {{WebExtAPIRef("history.HistoryItem")}} を提供しつつそのページを訪問した時に発火します
+
{{WebExtAPIRef("history.onVisitRemoved")}}
+
+

ある URL がブラウザー履歴から完全に削除された時に発火します

+
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.history")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.history API に基づいています。また、このドキュメントは history.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.html b/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.html new file mode 100644 index 0000000000..f34d266ad8 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.html @@ -0,0 +1,115 @@ +--- +title: i18n.detectLanguage() +slug: Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - detectLanguage + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage +--- +
{{AddonSidebar()}}
+ +

提供されたテキストの言語を Compact Language Detector (CLD) を利用して検出します。

+ +

これは、Promise を返す非同期関数です。

+ +

構文

+ +
var detectingLanguages = browser.i18n.detectLanguage(
+  text                  // string
+)
+
+ +

引数

+ +
+
text
+
文字列。翻訳されるユーザー入力の文字列です。
+
+ +

戻り値

+ +

結果オブジェクトで解決される Promise。結果オブジェクトは 2 個のプロパティを持ちます:

+ +
+
isReliable
+
真偽値。検出された言語が確かかどうかを示します。
+
languages
+
オブジェクトの 配列。配列の各項目はさらに 2 個のプロパティを持ちます:
+
+
+
language
+
{{WebExtAPIRef('i18n.LanguageCode')}}。検出された言語です。
+
percentage
+
整数値。検出された言語で入力された文字列の割り合い。
+
+
+
+ +

ブラウザーの実装状況

+ + + +

{{Compat("webextensions.api.i18n.detectLanguage")}}

+ +

例

+ +
function onLanguageDetected(langInfo) {
+  for (lang of  langInfo.languages) {
+    console.log("Language is: " + lang.language);
+    console.log("Percentage is: " + lang.percentage);
+  }
+}
+
+var text = "L'homme est né libre, et partout il est dans les fers."
+
+var detecting = browser.i18n.detectLanguage(text);
+detecting.then(onLanguageDetected);
+
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は、Chromium の chrome.i18n API を基にしています。このドキュメンテーションは、Chromium コード内の i18n.json に由来しています。

+ +

Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.html b/files/ja/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.html new file mode 100644 index 0000000000..636e86d94d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.html @@ -0,0 +1,92 @@ +--- +title: i18n.getAcceptLanguages() +slug: Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - getAcceptLanguages + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages +--- +
{{AddonSidebar()}}
+ +

ブラウザーの accept-languages を取得します。これは、ブラウザーに使用されているロケールとは異なります。ロケールを取得するには、{{WebExtAPIRef('i18n.getUILanguage')}} を使用してください。

+ +

これは、Promise を返す非同期関数です。

+ +

構文

+ +
var gettingAcceptLanguages = browser.i18n.getAcceptLanguages()
+
+ +

引数

+ +

なし。

+ +

戻り値

+ +

{{WebExtAPIRef('i18n.LanguageCode')}} オブジェクトの 配列 で処理が完了した Promise。

+ +

ブラウザーの実装状況

+ + + +

{{Compat("webextensions.api.i18n.getAcceptLanguages")}}

+ +

例

+ +
function onGot(languages) {
+  console.log(languages);
+  //e.g. Array [ "en-US", "en" ]
+}
+
+var gettingAcceptLanguages = browser.i18n.getAcceptLanguages();
+gettingAcceptLanguages.then(onGot);
+
+ +

 

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は、Chromium の chrome.i18n API を基にしています。このドキュメンテーションは、Chromium コード内の i18n.json に由来しています。

+ +

Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/getmessage/index.html b/files/ja/mozilla/add-ons/webextensions/api/i18n/getmessage/index.html new file mode 100644 index 0000000000..c28d4a83ad --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/getmessage/index.html @@ -0,0 +1,119 @@ +--- +title: i18n.getMessage() +slug: Mozilla/Add-ons/WebExtensions/API/i18n/getMessage +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - getMessage + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/getMessage +--- +
{{AddonSidebar()}}
+ +

指定したメッセージのローカライズされた文字列を取得します。

+ +

構文

+ +
browser.i18n.getMessage(
+  messageName,  // 文字列
+  substitutions // 任意
+)
+
+ +

引数

+ +
+
messageName
+
文字列。messages.json で指定されたメッセージ名です。messages.json 内にメッセージを見つけられない場合は:
+
+
    +
  • Firefox は "" を返し、エラーログを出力します。
    • +
  • Chrome は "" を返し、エラーログを出力しません。
    • +
+
+
substitutions{{optional_inline}}
+
文字列 または 文字列 の 配列。単一の置換文字列、または置換文字列の配列です。
+
Chrome では、9 個より多くの置換文字列を与えると、getMessage() は undefined を返します。
+
+ +

戻り値

+ +

文字列。現在のロケール向けにローカライズされたメッセージ。

+ +

ブラウザーの実装状況

+ + + +

{{Compat("webextensions.api.i18n.getMessage")}}

+ +

例

+ +

target.url を置換文字列として渡し、"messageContent" のローカライズされた文字列を取得します:

+ +
var message = browser.i18n.getMessage("messageContent", target.url);
+console.log(message);
+
+ +

これは、_locales/en/messages.json ファイルに含まれた次の内容で動作します:

+ +
{
+  "messageContent": {
+    "message": "You clicked $URL$.",
+    "description": "Tells the user which link they clicked.",
+    "placeholders": {
+      "url" : {
+        "content" : "$1",
+        "example" : "https://developer.mozilla.org"
+      }
+    }
+  }
+}
+ +

target.url が "https://developer.mozilla.org" である場合、"en" ロケールでのメッセージの値は次のようになります:

+ +
"You clicked https://developer.mozilla.org."
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は、Chromium の chrome.i18n API を基にしています。このドキュメンテーションは、Chromium コード内の i18n.json に由来しています。

+ +

Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.html b/files/ja/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.html new file mode 100644 index 0000000000..51161c8496 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.html @@ -0,0 +1,84 @@ +--- +title: i18n.getUILanguage() +slug: Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - getUILanguage + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage +--- +
{{AddonSidebar()}}
+ +

ブラウザーの UI 言語を取得します。これは、優先されるユーザー言語を返す {{WebExtAPIRef('i18n.getAcceptLanguages')}} とは異なります。

+ +

構文

+ +
browser.i18n.getUILanguage()
+
+ +

引数

+ +

なし。

+ +

戻り値

+ +

文字列。{{WebExtAPIRef("i18n.LanguageCode")}} によるブラウザーの UI 言語コード。

+ +

ブラウザーの実装状況

+ + + +

{{Compat("webextensions.api.i18n.getUILanguage")}}

+ +

例

+ +
var uiLanguage = browser.i18n.getUILanguage();
+console.log(uiLanguage);
+
+//e.g. "ja"
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は、Chromium の chrome.i18n API を基にしています。このドキュメンテーションは、Chromium コード内の i18n.json に由来しています。

+ +

Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/index.html b/files/ja/mozilla/add-ons/webextensions/api/i18n/index.html new file mode 100644 index 0000000000..deba5c0bf5 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/index.html @@ -0,0 +1,94 @@ +--- +title: i18n +slug: Mozilla/Add-ons/WebExtensions/API/i18n +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n +--- +
{{AddonSidebar}}
+ +

拡張機能を国際化する関数です。これらの API は、拡張機能に同梱したロケールファイルからローカライズ文字列を取得したり、ブラウザーの現在の言語や、その Accept-Language ヘッダー を調べるために使用します。

+ +

拡張機能で i18n を使用するための詳細は、以下の記事を参照してください:

+ + + +

型

+ +
+
{{WebExtAPIRef("i18n.LanguageCode")}}
+
"en-US" や "fr" などの 言語タグ。
+
+ +

関数

+ +
+
{{WebExtAPIRef("i18n.getAcceptLanguages()")}}
+
ブラウザーの accept-languages を取得します。これは、ブラウザーに使用されているロケールとは異なります。ロケールを取得するには、{{WebExtAPIRef('i18n.getUILanguage')}} を使用してください。
+
{{WebExtAPIRef("i18n.getMessage()")}}
+
指定したメッセージのローカライズ文字列を取得します。
+
{{WebExtAPIRef("i18n.getUILanguage()")}}
+
ブラウザーの UI 言語を取得します。これは、優先されるユーザー言語を返す {{WebExtAPIRef('i18n.getAcceptLanguages')}} とは異なります。
+
{{WebExtAPIRef("i18n.detectLanguage()")}}
+
提供されたテキストの言語を Compact Language Detector を利用して検出します。
+
+ +
+
+ +

ブラウザーの実装状況

+ +

{{Compat("webextensions.api.i18n")}}

+ +

{{WebExtExamples("h2")}}

+ +
+
+ +
謝辞 + +

この API は、Chromium の chrome.i18n API を基にしています。このドキュメンテーションは、Chromium コード内の i18n.json に由来しています。

+ +

Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/languagecode/index.html b/files/ja/mozilla/add-ons/webextensions/api/i18n/languagecode/index.html new file mode 100644 index 0000000000..2ed7796e1f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/languagecode/index.html @@ -0,0 +1,68 @@ +--- +title: i18n.LanguageCode +slug: Mozilla/Add-ons/WebExtensions/API/i18n/LanguageCode +tags: + - API + - Add-ons + - Extensions + - LanguageCode + - Non-standard + - Reference + - Type + - WebExtensions + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/LanguageCode +--- +
{{AddonSidebar()}}
+ +

"en-US" や "fr" などの 言語タグ。

+ +

型

+ +

この型の値は文字列です。

+ +

ブラウザーの実装状況

+ + + +

{{Compat("webextensions.api.i18n.LanguageCode")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は、Chromium の chrome.i18n API を基にしています。このドキュメンテーションは、Chromium コード内の i18n.json に由来しています。

+ +

Microsoft Edge 互換性データは、Microsoft Corporation より供給され、Creative Commons Attribution 3.0 United States License の下で含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.html b/files/ja/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.html new file mode 100644 index 0000000000..adcde0288c --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.html @@ -0,0 +1,127 @@ +--- +title: ロケール固有のメッセージ参照 +slug: Mozilla/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference +tags: + - Internationalization + - Localization + - Reference + - String + - WebExtensions + - i18n + - message + - message.json + - placeholders +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference +--- +

国際化対応 (i18n) した拡張機能は、ロケール固有のメッセージを提供する少なくとも 1 個の messages.json というファイルを持っています。このページでは、messages.json の書式を説明します。

+ +
+

補足: 拡張機能を国際化する方法についての情報は、i18n ガイドを参照してください。

+
+ +

messages.json example

+ +

次のコードは、notify-link-clicks-i18n example 拡張機能から取られた messages.json ファイル の例示です。"name" と "message" のフィールドのみが必須です。

+ +
{
+  "extensionName": {
+    "message": "Notify link clicks i18n",
+    "description": "Name of the extension."
+  },
+
+  "extensionDescription": {
+    "message": "ユーザーがリンクをクリックしたときに通知を表示します。",
+    "description": "Description of the extension."
+  },
+
+  "notificationTitle": {
+    "message": "クリック通知",
+    "description": "Title of the click notification."
+  },
+
+  "notificationContent": {
+    "message": "$URL$ をクリックしました。",
+    "description": "Tells the user which link they clicked.",
+    "placeholders": {
+      "url" : {
+        "content" : "$1",
+        "example" : "https://developer.mozilla.org"
+      }
+    }
+  }
+}
+ +

ファイルの配置

+ +

messages.json ファイルは、サポートされたロケール名 (en, de, ja など) のディレクトリー内に置く必要があります。さらにこれらは、拡張機能のルートディレクトリ内の _locales と呼ばれるディレクトリー内に置く必要があります。

+ +

メンバーの詳細

+ +

このセクションは、messages.json 内に記述される各メンバーについて説明します。

+ +

name

+ +

各トップレベルのメンバーは、ローカライズするメッセージ文字列の name の後に名付けられます。例えば、上記の例の "extensionName" や "notificationContent" です。name は大文字と小文字が区別され、ローカライズされたメッセージテキストを受け取るためのキーとして振る舞います。

+ +

name には、次の文字が使用できます:

+ + + +

注記: @@ で始まる name を定義してはいけません。この名前は 事前定義されたメッセージ で予約されています。

+ +

message

+ +

"message" メンバーは、{{anch("placeholders")}} を含むことのできるローカライズされた文字列を含みます。次のように使用します:

+ + + +

他の注意すべき点:

+ + + +

description

+ +

{{optional_inline}}

+ +

"description" メンバーは、文字列に最適な訳語を作成する助けとなる情報を翻訳者に提供するために、メッセージ文字列の内容についての説明を含みます。

+ +

placeholders

+ +

{{optional_inline}}

+ +

"placeholders" メンバーは、メッセージ内で使用されるいくつかのプレースホルダー補助文字列を定義します。これらは、翻訳してほしくないハードコードされたアイテムや変数を参照するアイテムに利用できます。

+ +

各プレースホルダー補助文字列の定義は、それ自身がいくつかの値を持っています:

+ +
"url" : {
+  "content" : "$1",
+  "example" : "https://developer.mozilla.org"
+}
+ +

プレースホルダー名

+ +

プレースホルダー名は、補助文字列内の placeholder を表すために使用します ("url" は $url$ になります)。これは、大文字と小文字が区別され、メッセージ文字列と同じ文字が使用できます {{anch("name")}}。

+ +

content

+ +

"content" アイテムは、placeholder の内容を定義します。これは、"My placeholder" などハードコードされた文字列にすることができますが、{{WebExtAPIRef("i18n.getMessage()")}} 呼び出しから取得した値も含められます。詳しい情報は、JavaScript からメッセージ文字列を取得する を参照してください。

+ +

example

+ +

{{optional_inline}}

+ +

任意の "example" アイテムは、プレースホルダーがエンドユーザーにどのように表示されるかの例を示すことによって翻訳者を助けるためのものです。これにより、翻訳者がファイルをローカライズするときに最適な選択ができるようになるでしょう。

diff --git a/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.html b/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.html new file mode 100644 index 0000000000..1fa8642b11 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/identity/getredirecturl/index.html @@ -0,0 +1,55 @@ +--- +title: identity.getRedirectURL() +slug: Mozilla/Add-ons/WebExtensions/API/identity/getRedirectURL +tags: + - API + - Add-ons + - Extensions + - Identity + - Method + - Reference + - WebExtensions + - getRedirectURL +translation_of: Mozilla/Add-ons/WebExtensions/API/identity/getRedirectURL +--- +
{{AddonSidebar()}}
+ +

リダイレクト URL として利用可能な URL を生成します。

+ +

この URL は、アドオン ID から生成されるため、使用したい場合、browser_specific_settings キーを使用してアドオン ID を明示的に設定する必要があるでしょう (設定しない場合、アドオンを一時的にインストールするたびに、異なるリダイレクト URL を取得することになります)。

+ +

リダイレクトURL については、リダイレクトURL を取得するを参照してください。

+ +

構文

+ +
var redirectURL = browser.identity.getRedirectURL()
+
+ +

引数

+ +

なし

+ +

返り値

+ +

リダイレクト URL を含む文字列

+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.identity.getRedirectURL")}}

+ +

例

+ +

リダイレクト URL を取得する:

+ +
var redirectURL = browser.identity.getRedirectURL();
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

この API は Chromium の chrome.identity API に基づいています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/identity/index.html b/files/ja/mozilla/add-ons/webextensions/api/identity/index.html new file mode 100644 index 0000000000..29d946d813 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/identity/index.html @@ -0,0 +1,106 @@ +--- +title: identity +slug: Mozilla/Add-ons/WebExtensions/API/identity +tags: + - API + - Add-ons + - Extensions + - Identity + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/identity +--- +
{{AddonSidebar}}
+ +

identity API を使って OAuth2 の認証コードやアクセストークンを取得し、拡張機能が OAuth2 での認証 (Google や Facebook アカウントなど) をサポートするサービスからユーザーデータを取得できるようにします。

+ +

OAuth2 フローがどのように機能するかの詳細は、サービスプロバイダーごとに異なるため、特定のサービスプロバイダーにおいてこの API を使用するには、各サービスごとのドキュメントを参照する必要があります。例:

+ + + +

identity API は {{WebExtAPIRef("identity.launchWebAuthFlow()")}} 関数を提供します。この関数は、必要に応じて、サービスのユーザー認証を行い、また、拡張機能にデータへのアクセスを認可するかどうかをユーザーに確認します。処理が完了すると、プロバイダーによって、アクセストークンか認可コードのどちらかが取得されます。

+ +

そして、OAuth2 フローを実施して取得した検証済みアクセストークンを、HTTP リクエスト内で使用することで、拡張機能はユーザーから認可された範囲でデータにアクセスできるようになります。

+ +

この API を利用するためには、"identity" API のパーミッションが必要です。

+ +

セットアップ

+ +

拡張機能を公開する前に、いくつかの設定が必要です。

+ +

リダイレクトURL を取得する

+ +

リダイレクト URL は、アクセストークンまたは認可コードを拡張機能に配布するための {{WebExtAPIRef("identity.launchWebAuthFlow()")}} のエンドポイントを意味します。

+ +

{{WebExtAPIRef("identity.getRedirectURL()")}}を呼び出すことでリダイレクトURL を取得できます。この関数は、アドオン ID からリダイレクト URL を生成するため、使用したい場合、browser_specific_settings キーを使用してアドオン ID を明示的に設定する必要があるでしょう (設定しない場合、アドオンを一時的にインストールするたびに、異なるリダイレクト URL を取得することになります)。

+ +

identity.getRedirectURL() によって返されるリダイレクト URL の利用が必須というわけではありません。独自の URL を指定することもできます。サービスがリダイレクトするものであれば何でもかまいません。ただし、ドメインは自分で管理しているものでなければいけません。

+ +

リダイレクト URL は 2 つの場面で利用されます:

+ + + +

拡張機能を登録する

+ +

サービスプロバイダー経由で OAuth2 を使用する前に、プロバイダーに対して、拡張機能を OAuth2 クライアントとして登録する必要があります。

+ +

サービスプロバイダーごとにやり方が異なることがありますが、一般的には、プロバイダーの ウェブサイトにおいて、拡張機能を登録することを意味します。この登録手順の中で、自身のリダイレクトURLを登録し、プロバイダーからクライアント ID (場合によっては、シークレットも) を受け取ります。そして、この両方を {{WebExtAPIRef("identity.launchWebAuthFlow()")}} に渡す必要があります。

+ +

関数

+ +
+
{{WebExtAPIRef("identity.getRedirectURL()")}}
+
リダイレクト URL を取得します。
+
{{WebExtAPIRef("identity.launchWebAuthFlow()")}}
+
ウェブ認証フローを開始します。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.identity")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.identity API に基づいています。

+ +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従います。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/idle/index.html b/files/ja/mozilla/add-ons/webextensions/api/idle/index.html new file mode 100644 index 0000000000..e92112e732 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/idle/index.html @@ -0,0 +1,88 @@ +--- +title: idle +slug: Mozilla/Add-ons/WebExtensions/API/idle +tags: + - API + - Add-ons + - Extensions + - Idle + - Interface + - Non-standard + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/idle +--- +
{{AddonSidebar}}
+ +

ユーザーのシステムがアイドル状態、ロックされた状態、アクティブな状態であるのを発見します。

+ +

この API を使うには "idle" パーミッションが必要です。

+ +

型

+ +
+
{{WebExtAPIRef("idle.IdleState")}}
+
+

端末のアイドル状態を記す文字列

+
+
+ +

関数

+ +
+
{{WebExtAPIRef("idle.queryState()")}}
+
システムがロックされたら "locked" を、ユーザーが指定した時間の間に何も入力しない場合は "idle" を、その他では "active" を返す。
+
{{WebExtAPIRef("idle.setDetectionInterval()")}}
+
{{WebExtAPIRef("idle.onStateChanged")}} イベントでシステムがアイドル状態であると決定する間隔をセットします。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("idle.onStateChanged")}}
+
システム状態が変化したら発火します。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.idle")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.idle API. This documentation is derived from idle.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/index.html b/files/ja/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..8a375f01eb --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,55 @@ +--- +title: JavaScript API 群 +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +
{{AddonSidebar}}
+ +
+

WebExtension 用の JavaScript API は拡張機能のバックグラウンドスクリプトと、その他の拡張機能にバンドルした文書 (ブラウザーアクションやページアクションポップアップやサイドバーやオプションページや新規タブページを含む) で使用できます。いくつかの API は拡張機能のコンテンツスクリプトからもアクセスできます (コンテンツスクリプトガイドの表を見てください)。

+ +

もっと強力な API を使うには、拡張機能の manifest.json でパーミッションをリクエストする必要があります。

+ +

browser 名前空間内で API にアクセスできます:

+ +
function logTabs(tabs) {
+  console.log(tabs);
+}
+
+browser.tabs.query({currentWindow: true}, logTabs);
+
+ +
+

API の多くは非同期で、 {{JSxRef("Promise")}} を返します:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+let setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +
+

これは Google Chrome の拡張機能システムでは違っていて、browser の代わりに chrome 名前空間を使い、promise や非同期関数の代わりにコールバックを使っているのに注意してください。移植の助けとして、WebExtensions API の Firefox 実装は browser と promise と同様に chrome とコールバックもサポートします。Mozilla は browser と promise を使うコードが Chrome で変更なく動作する polyfill も書いています: https://github.com/mozilla/webextension-polyfill.

+ +

Firefox は chrome 名前空間の下でコールバックを使う API も実装しています。これにより Chrome 向けのコードをここに文書化された API を使って、Firefox で大部分変更なしに実行させることができます。

+ +

Microsoft Edge は browser 名前空間を使いますが、promise ベースの非同期 API はサポートされていません。Edge では当面、非同期 API はコールバックを使うのが必須です。

+ +

すべてのブラウザーがすべての API をサポートしているわけではありません: 詳しくは  JavaScript API のブラウザーサポートをご覧ください。

+ +

JavaScript API 一覧

+ +

下記の JavaScript API の完全な一覧をご覧ください:

+
+ +
{{LandingPageListSubpages}}
diff --git a/files/ja/mozilla/add-ons/webextensions/api/management/index.html b/files/ja/mozilla/add-ons/webextensions/api/management/index.html new file mode 100644 index 0000000000..06042d1093 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/management/index.html @@ -0,0 +1,112 @@ +--- +title: management +slug: Mozilla/Add-ons/WebExtensions/API/management +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - management +translation_of: Mozilla/Add-ons/WebExtensions/API/management +--- +
{{AddonSidebar}}
+ +

インストール済みのアドオンの管理情報を取得します。

+ +

management API で次のことができます

+ + + +

操作のほとんどは "management" API パーミッションを要求します。他のアドオンへのアクセスを提供しない操作はこのパーミッションを要求しません。

+ +

型

+ +
+
{{WebExtAPIRef("management.ExtensionInfo")}}
+
インストール済みアドオンの管理情報を持つオブジェクト
+
+ +

関数

+ +
+
{{WebExtAPIRef("management.getAll()")}}
+
すべてのインストール済みアドオンの管理情報を返します。
+
{{WebExtAPIRef("management.get()")}}
+
指定した ID のアドオンの管理情報を返します。
+
{{WebExtAPIRef("management.getSelf()")}}
+
この関数を呼び出したアドオン自身の管理情報を返します。
+
{{WebExtAPIRef("management.install()")}}
+
addons.mozilla.org で与えられた URL にある、特定のテーマをインストールします。
+
{{WebExtAPIRef("management.uninstall()")}}
+
指定した ID のアドオンをアンインストールします。
+
{{WebExtAPIRef("management.uninstallSelf()")}}
+
この関数を呼び出したアドオン自身をアンインストールします。
+
{{WebExtAPIRef("management.getPermissionWarningsById()")}}
+
指定した ID のアドオンのパーミッション警告一覧を取得します。
+
{{WebExtAPIRef("management.getPermissionWarningsByManifest()")}}
+
指定したマニフェストストリングに対して表示されるパーミッション警告一覧を取得します。
+
{{WebExtAPIRef("management.setEnabled()")}}
+
指定した ID のアドオンを有効化・無効化します。
+
+

イベント

+
+
{{WebExtAPIRef("management.onInstalled")}}
+
アドオンがインストールされた時に発火します。
+
{{WebExtAPIRef("management.onUninstalled")}}
+
アドオンがアンインストールされた時に発火します。
+
{{WebExtAPIRef("management.onEnabled")}}
+
アドオンが有効化された時に発火します。
+
{{WebExtAPIRef("management.onDisabled")}}
+
アドオンが無効化された時に発火します。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.management")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

この API は Chromium の chrome.management API に基づいています。この文書は Chromium code の management.json から派生しています。

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/menus/index.html b/files/ja/mozilla/add-ons/webextensions/api/menus/index.html new file mode 100644 index 0000000000..5cb7281ea6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/menus/index.html @@ -0,0 +1,197 @@ +--- +title: menus +slug: Mozilla/Add-ons/WebExtensions/API/menus +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - contextMenus + - menus +translation_of: Mozilla/Add-ons/WebExtensions/API/menus +--- +
{{AddonSidebar}}
+ +

ブラウザーのメニューシステムに項目を追加します。

+ +

この API は、Chromeのエクステンションでコンテキストメニューに項目を追加できる機能である"contextMenus" APIをモデルにしています。この browser.menus API はChromeのAPIにいくつかの機能を追加しています。

+ +

Firefox 55 より前ではこの API は contextMenus という名前でした。その名称は一応エイリアスにしています。そのため contextMenus という名称を使ってFirefoxや他のブラウザでも動くコードを書くことできます。

+ +

このAPIを使用するためには menus  permission 必要です。 menus の代わりにエイリアスの contextMenus を使用することができますが、もし使用するのであればbrowser.contextMenus でAPIにアクセスしなければなりません。.

+ +

この API はmenus.getTargetElement()以外はコンテンツスクリプトからは使用できません。バックグラウンドページからは使えます。

+ +

メニューアイテムをつくる

+ +

To create a menu item call the {{WebExtAPIRef("menus.create()")}} method. You pass this method an object containing options for the item, including the item ID, item type, and the contexts in which it should be shown.

+ +

Listen for clicks on your menu item by adding a listener to the {{WebExtAPIRef("menus.onClicked")}} event. This listener will be passed a {{WebExtAPIRef("menus.OnClickData")}} object containing the event's details.

+ +

You can create four different types of menu item, based on the value of the type property you supply in the options to create():

+ + + +

If you have created more than one context menu item or more than one tools menu item, then the items will be placed in a submenu. The submenu's parent will be labeled with the name of the extension. For example, here's an extension called "Menu demo" that's added two context menu items:

+ +

+ +

アイコン

+ +

If you've specified icons for your extension using the "icons" manifest key, your menu item will display the specified icon next to its label. The browser will try to choose a 16x16 pixel icon for a normal display or a 32x32 pixel icon for a high-density display:

+ +

+ +

Only for items in a submenu, you can specify custom icons by passing the icons option to {{WebExtAPIRef("menus.create()")}}:

+ +

+ +

例

+ +

Here's a context menu containing 4 items: a normal item, two radio items with separators on each side, and a checkbox. The radio items are given custom icons.

+ +

You could create a submenu like this using code like:

+ +
browser.menus.create({
+  id: "remove-me",
+  title: browser.i18n.getMessage("menuItemRemoveMe"),
+  contexts: ["all"]
+}, onCreated);
+
+browser.menus.create({
+  id: "separator-1",
+  type: "separator",
+  contexts: ["all"]
+}, onCreated);
+
+browser.menus.create({
+  id: "greenify",
+  type: "radio",
+  title: browser.i18n.getMessage("menuItemGreenify"),
+  contexts: ["all"],
+  checked: true,
+  icons: {
+    "16": "icons/paint-green-16.png",
+    "32": "icons/paint-green-32.png"
+  }
+}, onCreated);
+
+browser.menus.create({
+  id: "bluify",
+  type: "radio",
+  title: browser.i18n.getMessage("menuItemBluify"),
+  contexts: ["all"],
+  checked: false,
+  icons: {
+    "16": "icons/paint-blue-16.png",
+    "32": "icons/paint-blue-32.png"
+  }
+}, onCreated);
+
+browser.menus.create({
+  id: "separator-2",
+  type: "separator",
+  contexts: ["all"]
+}, onCreated);
+
+var checkedState = true;
+
+browser.menus.create({
+  id: "check-uncheck",
+  type: "checkbox",
+  title: browser.i18n.getMessage("menuItemUncheckMe"),
+  contexts: ["all"],
+  checked: checkedState
+}, onCreated);
+ +

型

+ +
+
{{WebExtAPIRef("menus.ContextType")}}
+
The different contexts a menu can appear in.
+
{{WebExtAPIRef("menus.ItemType")}}
+
The type of menu item: "normal", "checkbox", "radio", "separator".
+
{{WebExtAPIRef("menus.OnClickData")}}
+
Information sent when a menu item is clicked.
+
+ +

プロパティ

+ +
+
{{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}
+
The maximum number of top level extension items that can be added to a menu item whose ContextType is "browser_action" or "page_action".
+
+ +

関数

+ +
+
{{WebExtAPIRef("menus.create()")}}
+
新しいメニューアイテムをつくります。
+
{{WebExtAPIRef("menus.update()")}}
+
以前に作られたメニューアイテムを更新します。
+
{{WebExtAPIRef("menus.remove()")}}
+
メニューアイテムを削除します。
+
{{WebExtAPIRef("menus.removeAll()")}}
+
この拡張機能によって追加されたすべてのメニューアイテムを削除します。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("menus.onClicked")}}
+
メニューアイテムがクリックされたときに発火。
+
{{WebExtAPIRef("menus.onHidden")}}
+
ブラウザがメニューを隠したときに発火。
+
{{WebExtAPIRef("menus.onShown")}}
+
ブラウザがメニューを見せたときに発火。
+
+ +

ブラウザ実装状況

+ +

{{ Compat("webextensions.api.menus", 1, "true") }}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/menus/onclicked/index.html b/files/ja/mozilla/add-ons/webextensions/api/menus/onclicked/index.html new file mode 100644 index 0000000000..3e3fdff8eb --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/menus/onclicked/index.html @@ -0,0 +1,108 @@ +--- +title: menus.onClicked +slug: Mozilla/Add-ons/WebExtensions/API/menus/onClicked +translation_of: Mozilla/Add-ons/WebExtensions/API/menus/onClicked +--- +
{{AddonSidebar()}}
+ +

メニューアイテムがクリックされたときに発火します。

+ +

他のブラウザとの互換性のためにFirefoxはこのイベントを名前空間contextMenusとmenuを経由して利用可能にしています。

+ +

書式

+ +
browser.menus.onClicked.addListener(listener)
+browser.menus.onClicked.removeListener(listener)
+browser.menus.onClicked.hasListener(listener)
+
+ +

イベントは3つの関数を持ちます:

+ +
+
addListener(callback)
+
このイベントのリスナーを追加します。
+
removeListener(listener)
+
リスニングを停止します。引数listenerは削除するリスナーです。
+
hasListener(listener)
+
listenerが登録されているかどうかを調べます。trueが返ればリスニング中、そうでなければfalseが返ります。
+
+ +

addListenerの書式

+ +

パラメータ

+ +
+
callback
+
+

イベントが起こったときに呼ばれる関数です。以下の引数を渡されます:

+ +
+
info
+
{{WebExtAPIRef('menus.OnClickData')}}. Information about the item clicked and the context where the click happened.
+
+ +
+
tab
+
{{WebExtAPIRef('tabs.Tab')}}. The details of the tab where the click took place. If the click did not take place in or on a tab, this parameter will be missing.
+
+
+
+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.menus.onClicked", 10)}}

+ +

例

+ +

この例はメニューアイテムのクリックをリッスンし、アイテムのIDとタブのIDをログします:

+ +
browser.menus.create({
+  id: "click-me",
+  title: "Click me!",
+  contexts: ["all"]
+});
+
+browser.menus.onClicked.addListener((info, tab) => {
+  console.log("Item " + info.menuItemId + " clicked " +
+              "in tab " + tab.id);
+});
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/notifications/create/index.html b/files/ja/mozilla/add-ons/webextensions/api/notifications/create/index.html new file mode 100644 index 0000000000..32a0986940 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/notifications/create/index.html @@ -0,0 +1,139 @@ +--- +title: notifications.create() +slug: Mozilla/Add-ons/WebExtensions/API/notifications/create +translation_of: Mozilla/Add-ons/WebExtensions/API/notifications/create +--- +
{{AddonSidebar()}}
+ +

通知を生成、表示します。

+ +

Pass a {{WebExtAPIRef("notifications.NotificationOptions")}} to define the notification's content and behavior.

+ +

You can optionally provide an ID for the notification. If you omit the ID, an ID will be generated. You can use the ID to {{WebExtAPIRef("notifications.update()", "update")}} or {{WebExtAPIRef("notifications.clear()", "clear")}} the notification.

+ +

This is an asynchronous function that returns a Promise.

+ +
+

If you call notifications.create() more than once in rapid succession, Firefox may end up not displaying any notification at all.

+
+ +

書式

+ +
var creating = browser.notifications.create(
+  id,                   // optional string
+  options               // NotificationOptions
+)
+
+ +

パラメータ

+ +
+
id{{optional_inline}}
+
string. This is used to refer to this notification in {{WebExtAPIRef("notifications.update()")}}, {{WebExtAPIRef("notifications.clear()")}}, and event listeners. If you omit this argument or pass an empty string, then a new ID will be generated for this notification. If the ID you provide matches the ID of an existing notification from this extension, then the other notification will be cleared.
+
options
+
{{WebExtAPIRef('notifications.NotificationOptions')}}. Defines the notification's content and behavior.
+
+ +

返り値

+ +

A Promise that will be fulfilled when the notification is created and the display process has been started, which is before the notification is actually displayed to the user. It is fulfilled with a string representing the notification's ID.

+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.notifications.create")}}

+ +

例

+ +

Create and display a basic notification periodically, using an {{WebExtAPIRef("alarms", "alarm")}}. Clicking the browser action dismisses the notification.

+ +

Note that you'll need the "alarms" permission to create alarms (as well as the "notifications" permission to create notifications).

+ +
var cakeNotification = "cake-notification"
+
+/*
+
+CAKE_INTERVAL is set to 6 seconds in this example.
+Such a short period is chosen to make the extension's behavior
+more obvious, but this is not recommended in real life.
+Note that in Chrome, alarms cannot be set for less
+than a minute.
+
+*/
+var CAKE_INTERVAL = 0.1;
+
+browser.alarms.create("", {periodInMinutes: CAKE_INTERVAL});
+
+browser.alarms.onAlarm.addListener(function(alarm) {
+  browser.notifications.create(cakeNotification, {
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("icons/cake-96.png"),
+    "title": "Time for cake!",
+    "message": "Something something cake"
+  });
+});
+
+browser.browserAction.onClicked.addListener(()=> {
+  var clearing = browser.notifications.clear(cakeNotification);
+  clearing.then(() => {
+    console.log("cleared");
+  });
+});
+ +

Display a similar notification, but add buttons naming cakes, and log the selected cake when a button is clicked:

+ +
var cakeNotification = "cake-notification"
+
+/*
+
+CAKE_INTERVAL is set to 6 seconds in this example.
+Such a short period is chosen to make the extension's behavior
+more obvious, but this is not recommended in real life.
+Note that in Chrome, alarms cannot be set for less
+than a minute.
+
+*/
+var CAKE_INTERVAL = 0.1;
+
+var buttons = [
+  {
+    "title": "Chocolate"
+  }, {
+    "title": "Battenberg"
+  }
+];
+
+browser.alarms.create("", {periodInMinutes: CAKE_INTERVAL});
+
+browser.alarms.onAlarm.addListener(function(alarm) {
+  browser.notifications.create(cakeNotification, {
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("icons/cake-96.png"),
+    "title": "Time for cake!",
+    "message": "Something something cake",
+    "buttons": buttons
+  });
+});
+
+browser.browserAction.onClicked.addListener(()=> {
+  var clearing = browser.notifications.clear(cakeNotification);
+  clearing.then(() => {
+    console.log("cleared");
+  });
+});
+
+browser.notifications.onButtonClicked.addListener((id, index) => {
+  browser.notifications.clear(id);
+  console.log("You chose: " + buttons[index].title);
+});
+
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.notifications API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/notifications/index.html b/files/ja/mozilla/add-ons/webextensions/api/notifications/index.html new file mode 100644 index 0000000000..16b2c2c8fa --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/notifications/index.html @@ -0,0 +1,66 @@ +--- +title: notifications +slug: Mozilla/Add-ons/WebExtensions/API/notifications +tags: + - API + - Add-ons + - Extensions + - Notifications + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/notifications +--- +
{{AddonSidebar}}
+ +

OS の通知メカニズムを使って、ユーザーへの通知を表示します。この API は OS の通知メカニズムを使うため、OS とユーザー設定によって通知の現れ方やふるまいは変わってきます。

+ +

この API を使うには "notifications" パーミッションが必要です。

+ +

すべてのデスクトップOSで通知は同じ見た目です。次のようなものです:

+ +

+ +

型

+ +
+
{{WebExtAPIRef("notifications.NotificationOptions")}}
+
通知の中身を定義します。
+
{{WebExtAPIRef("notifications.TemplateType")}}
+
通知の種類。例えば、通知に画像を含められるかなどを定義します。
+
+ +

関数

+ +
+
{{WebExtAPIRef("notifications.clear()")}}
+
IDに基づいた特定の通知をクリアします。
+
{{WebExtAPIRef("notifications.create()")}}
+
新規の通知を作成、表示します。
+
{{WebExtAPIRef("notifications.getAll()")}}
+
すべての通知を取得します。
+
{{WebExtAPIRef("notifications.update()")}}
+
通知を更新します。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("notifications.onButtonClicked")}}
+
ユーザーが通知内のボタンをクリックしたときに発火します。
+
{{WebExtAPIRef("notifications.onClicked")}}
+
ユーザーが通知内のボタン以外をクリックしたときに発火します。
+
{{WebExtAPIRef("notifications.onClosed")}}
+
通知が閉じたとき、システムかユーザーいずれかがやめた場合にも、発火します。
+
{{WebExtAPIRef("notifications.onShown")}}
+
通知が表示されるとすぐに発火します。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.notifications")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.notifications API.

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/omnibox/index.html b/files/ja/mozilla/add-ons/webextensions/api/omnibox/index.html new file mode 100644 index 0000000000..47218f7f51 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/omnibox/index.html @@ -0,0 +1,70 @@ +--- +title: omnibox +slug: Mozilla/Add-ons/WebExtensions/API/omnibox +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - omnibox +translation_of: Mozilla/Add-ons/WebExtensions/API/omnibox +--- +
{{AddonSidebar}}
+ +

拡張機能に、ユーザーがアドレスバーに入力した時のカスタマイズされた振る舞いを有効にします。

+ +

ユーザーがブラウザーのアドレスバーにフォーカスした時、ブラウザーは、タイプした内容に応じたサジェストページを含んだドロップダウンリストを表示します。これはユーザーにとって、例えば履歴やブックマークからのページにすぐにアクセスできる方法を与えます。

+ +

omnibox API は、ユーザーが拡張機能で定義されたキーワードを入力した時に、ドロップダウンに表示されるサジェストを拡張機能がカスタマイズする方法を提供します。これは下記のように動作します:

+ +
    +
  1. まず、拡張機能は manifest.json ファイルに "omnibox" キーを入れないといけません、ここでキーワードを定義します。
    2. +
  2. ユーザーがアドレスバーにフォーカスしてキーワードに続いてスペースをタイプした時、拡張機能は {{WebExtAPIRef("omnibox.onInputStarted")}} イベントを受け取ります。
    3. +
  3. オプションとして、拡張機能は {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}} を呼んでアドレスバーのドロップダウンに最初に表示されるサジェストを定義します。
    4. +
  4. ユーザーがこの後にも文字をタイプし続けると、拡張機能は {{WebExtAPIRef("omnibox.onInputChanged")}} イベントを受け取ります。イベントリスナーはユーザーがタイプした現在の値を受けて、アドレスバーのドロップダウンにサジェストを生成できます。拡張機能が {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}} を使ったデフォルトのサジェストをセットした場合、これがドロップダウンの最初に出てきます。
    5. +
  5. ユーザーがサジェストを受け入れたら、拡張機能は {{WebExtAPIRef("omnibox.onInputEntered")}} イベントを受け取ります。イベントリスナーは受け入れられたサジェストを受け取ります。
    6. +
  6. ユーザーがドロップダウンを止めたら、拡張機能は {{WebExtAPIRef("omnibox.onInputCancelled")}} イベントを受け取ります。
    7. +
+ +

型

+ +
+
{{WebExtAPIRef("omnibox.OnInputEnteredDisposition")}}
+
Describes the recommended method to handle the selected suggestion: open in the current tab, open in a new foreground tab, or open in a new background tab.
+
{{WebExtAPIRef("omnibox.SuggestResult")}}
+
Object representing a suggestion to add to the address bar drop-down.
+
+ +

関数

+ +
+
{{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}
+
Defines the first suggestion that appears in the drop-down when the user enters the keyword for your extension, followed by a space.
+
+ +

イベント

+ +
+
{{WebExtAPIRef("omnibox.onInputStarted")}}
+
Fired when a the user focuses the address bar and types your extension's omnibox keyword, followed by a space.
+
{{WebExtAPIRef("omnibox.onInputChanged")}}
+
Fired whenever the user's input changes, after they have focused the address bar and typed your extension's omnibox keyword, followed by a space.
+
{{WebExtAPIRef("omnibox.onInputEntered")}}
+
Fired when the user accepts one of your extension's suggestions.
+
{{WebExtAPIRef("omnibox.onInputCancelled")}}
+
Fired when the user dismisses the address bar drop-down, after they have focused the address bar and typed your extension's omnibox keyword.
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.omnibox")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.omnibox API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/pageaction/index.html b/files/ja/mozilla/add-ons/webextensions/api/pageaction/index.html new file mode 100644 index 0000000000..9aa608ef46 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/pageaction/index.html @@ -0,0 +1,106 @@ +--- +title: pageAction +slug: Mozilla/Add-ons/WebExtensions/API/pageAction +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - pageAction +translation_of: Mozilla/Add-ons/WebExtensions/API/pageAction +--- +
{{AddonSidebar}}
+ +

ページアクション は、ブラウザーのアドレスバーの中のクリックできるアイコンです。

+ +

+ +

You can listen for clicks on the icon, or specify a popup that will open when the icon is clicked.

+ +

If you specify a popup, you can define its contents and behavior using HTML, CSS, and JavaScript, just like a normal web page. JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts.

+ +

You can define most of a page action's properties declaratively using the page_action key in your manifest.json, but can also redefine them programmatically using this API.

+ +

Page actions are for actions that are only relevant to particular pages. If your icon should always be available, use a browser action instead.

+ +

型

+ +
+
{{WebExtAPIRef("pageAction.ImageDataType")}}
+
Pixel data for an image.
+
+ +

関数

+ +
+
{{WebExtAPIRef("pageAction.show()")}}
+
Shows the page action for a given tab.
+
{{WebExtAPIRef("pageAction.hide()")}}
+
Hides the page action for a given tab.
+
{{WebExtAPIRef("pageAction.setTitle()")}}
+
Sets the page action's title. This is displayed in a tooltip over the page action.
+
{{WebExtAPIRef("pageAction.getTitle()")}}
+
Gets the page action's title.
+
{{WebExtAPIRef("pageAction.setIcon()")}}
+
Sets the page action's icon.
+
{{WebExtAPIRef("pageAction.setPopup()")}}
+
Sets the URL for the page action's popup.
+
{{WebExtAPIRef("pageAction.getPopup()")}}
+
Gets the URL for the page action's popup.
+
{{WebExtAPIRef("pageAction.openPopup()")}}
+
Opens the page action's popup.
+
+ +

イベント

+ +
+
{{WebExtAPIRef("pageAction.onClicked")}}
+
Fired when a page action icon is clicked. This event will not fire if the page action has a popup.
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.pageAction")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.pageAction API. This documentation is derived from page_action.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/pageaction/onclicked/index.html b/files/ja/mozilla/add-ons/webextensions/api/pageaction/onclicked/index.html new file mode 100644 index 0000000000..aa25bd76aa --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/pageaction/onclicked/index.html @@ -0,0 +1,104 @@ +--- +title: pageAction.onClicked +slug: Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked +translation_of: Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked +--- +
{{AddonSidebar()}}
+ +

ページアクションのアイコンがクリックされたときに発火します。ページアクションがポップアップを持っているならこのイベントは発火しません。

+ +

右クリックのアクションを定義するには、{{WebExtAPIRef('contextMenus')}} APIを"page_action" {{WebExtAPIRef('contextMenus/ContextType', 'context type', '', 'nocode')}}とともに使ってください。

+ +

書式

+ +
browser.pageAction.onClicked.addListener(listener)
+browser.pageAction.onClicked.removeListener(listener)
+browser.pageAction.onClicked.hasListener(listener)
+
+ +

イベントは3つの関数を持ちます:

+ +
+
addListener(callback)
+
このイベントにリスナーを追加します。Adds a listener to this event.
+
removeListener(listener)
+
このイベントのリスニングを停止します。引数listenerは削除するリスナーです。
+
hasListener(listener)
+
listenerがイベントに登録されているかを調べます。リスニング中であればtrueを、そうれなければfalseを返します。
+
+ +

addListenerの書式

+ +

パラメータ

+ +
+
callback
+
+

イベント発生時に呼び出される関数です。関数は次の引数を渡されます:

+ +
+
tab
+
ページアクションがクリックされたタブの{{WebExtAPIRef('tabs.Tab')}}オブジェクト。
+
+
+
+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.pageAction.onClicked")}}

+ +

例

+ +

ユーザがページアクションをクリックしたとき、それを隠し、アクティブタブを"http://chilloutandwatchsomecatgifs.com/"に誘導します:

+ +
var CATGIFS = "http://chilloutandwatchsomecatgifs.com/";
+
+browser.pageAction.onClicked.addListener((tab) => {
+  browser.pageAction.hide(tab.id);
+  browser.tabs.update({url: CATGIFS});
+});
+
+browser.pageAction.onClicked.addListener(function () {
+});
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.pageAction API. This documentation is derived from page_action.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/permissions/index.html b/files/ja/mozilla/add-ons/webextensions/api/permissions/index.html new file mode 100644 index 0000000000..852809a01b --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/permissions/index.html @@ -0,0 +1,89 @@ +--- +title: permissions +slug: Mozilla/Add-ons/WebExtensions/API/permissions +tags: + - API + - Add-ons + - Extensions + - Permissions + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/permissions +--- +
{{AddonSidebar}}
+ +
拡張機能のインストール後、実行時に特別なパーミッションの要求を可能にする。
+ +
+ +

拡張機能は強力な WebExtension API の多くにアクセスするパーミッション(アクセス権)を必要とします。manifest.json の permissions に必要なパーミッション記述することで、インストール時にユーザーに対しパーミッションを要求できます。インストール時にパーミッションを要求する主なメリットは次の通りです:

+ + + +

インストールした拡張機能のアクセス権の認証の見た目は、ユーザーにとってシンプルなGUIとは言えません。ユーザーは about:debuggingのページを使用して、"このFirefox"ボタンから"拡張機能"のセクションに行き、参照するアドオンの"マニフェスト URL"のリンクを使用しなければなりません。 このURLは拡張機能で使用されている生のjsonファイルへのリンクです。拡張機能のjsonファイルは"permissions"ブロックを含み、これを確認することによってアドオンが使用しているアクセス権を確認することができます。

+ +

拡張機能は実行時に、permissions APIによって追加のパーミッションを求めることができます.These permissions need to be listed in the optional_permissions manifest.json key. Note that some permissions are not allowed in optional_permissions. The main advantages of this are:

+ + + +
To use the permissions API, decide which permissions your extension can request at runtime, and list them in optional_permissions. After this, you can request any permissions that were included in optional_permissions. Requests may only be made in the handler for a user action (for example, a click handler).
+ +
+ +

型

+ +
+
{{WebExtAPIRef("permissions.Permissions")}}
+
Represents a set of permissions.
+
+ +

メソッド

+ +
+
{{WebExtAPIRef("permissions.contains()")}}
+
Find out whether the extension has the given set of permissions.
+
{{WebExtAPIRef("permissions.getAll()")}}
+
Get all the permissions this extension currently has.
+
{{WebExtAPIRef("permissions.remove()")}}
+
Give up a set of permissions.
+
{{WebExtAPIRef("permissions.request()")}}
+
Ask for a set of permissions.
+
+ +

Event handlers

+ +
+
{{WebExtAPIRef("permissions.onAdded")}}
+
Fired when a new permission is granted.
+
{{WebExtAPIRef("permissions.onRemoved")}}
+
Fired when a permission is removed.
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.permissions")}}

+ +

その他

+ + + +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.permissions API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/pkcs11/index.html b/files/ja/mozilla/add-ons/webextensions/api/pkcs11/index.html new file mode 100644 index 0000000000..902ae2b460 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/pkcs11/index.html @@ -0,0 +1,40 @@ +--- +title: pkcs11 +slug: Mozilla/Add-ons/WebExtensions/API/pkcs11 +translation_of: Mozilla/Add-ons/WebExtensions/API/pkcs11 +--- +
{{AddonSidebar}}
+ +

pkcs11 API は拡張機能にセキュリティモジュール PKCS #11 の列挙を可能とし、キーの元と証明書としてブラウザーからアクセスできるようにします。

+ +

このAPI を使うには "pkcs11" パーミッションが必要です。

+ +

Provisioning PKCS #11 modules

+ +

There are two environmental prerequisites for using this API:

+ + + +

Most probably, the user or device administrator would install the PKCS #11 module, and its installer would install the native manifest file at the same time. Note, though, that the module and manifest can't be installed as part of the extension's own installation process.

+ +

For details about the manifest file's contents and location, see Native manifests.

+ +

関数

+ +
+
{{WebExtAPIRef("pkcs11.getModuleSlots()")}}
+
For each slot in a module, get its name and whether it contains a token.
+
{{WebExtAPIRef("pkcs11.installModule()")}}
+
Installs the named PKCS #11 module.
+
{{WebExtAPIRef("pkcs11.isModuleInstalled()")}}
+
Checks whether the named PKCS #11 module is installed.
+
{{WebExtAPIRef("pkcs11.uninstallModule()")}}
+
Uninstalls the named PKCS #11 module.
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.pkcs11", 1, 1)}} {{WebExtExamples("h2")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/privacy/index.html b/files/ja/mozilla/add-ons/webextensions/api/privacy/index.html new file mode 100644 index 0000000000..18b5ed50b5 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/privacy/index.html @@ -0,0 +1,70 @@ +--- +title: privacy +slug: Mozilla/Add-ons/WebExtensions/API/privacy +tags: + - API + - Add-ons + - Extensions + - Privacy + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/privacy +--- +
{{AddonSidebar}}
+ +

さまざまなプライバシー関連のブラウザー設定にアクセスや変更を行います。

+ +

privacy API を使うには、"privacy" API パーミッションが必要です。

+ +

プロパティ

+ +
+
{{WebExtAPIRef("privacy.network")}}
+
ネットワーク関連のプライバシー設定にアクセス、編集します。
+
{{WebExtAPIRef("privacy.services")}}
+
ブラウザーやサードパーティのプライバシー設定にアクセス、編集します。
+
{{WebExtAPIRef("privacy.websites")}}
+
ウェブサイトのふるまいに関連したプライバシー設定にアクセス、編集します。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.privacy", 10, 1)}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.privacy API.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/proxy/index.html b/files/ja/mozilla/add-ons/webextensions/api/proxy/index.html new file mode 100644 index 0000000000..8b76402361 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/proxy/index.html @@ -0,0 +1,150 @@ +--- +title: proxy +slug: Mozilla/Add-ons/WebExtensions/API/proxy +tags: + - API + - Add-ons + - Proxy + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/proxy +--- +
{{AddonSidebar}}
+ +

拡張された Proxy Auto-Configuration (PAC) file (これはウェブのリクエストをプロキシ化するポリシーを実装します) を実装するのにプロキシ API を使います。この実装は標準の PAC 設計といくつかそれていて、なぜなら PAC ファイルのデファクト仕様は 1995年頃の初期実装から変えられてないためです。仕様を維持している標準化団体はありません。

+ +

Google Chrome では 同じく"proxy"という拡張機能API が提供されていて、その機能はこの API と似ていて、拡張機能はプロキシポリシーを使うことができます。しかし、Chrome API の設計はこの API とまったく違います。Chrome の API では拡張機能は PAC ファイルを定義できて、明示的なプロキシルールも定義できます。このため拡張機能 PAC ファイルも使用できて、この API は PAC ファイルアプローチのみをサポートします。この API は Chrome proxy API と互換性がないため、この API は browser 名前空間のみで利用できます。

+ +

この API を使うには、"proxy" パーミッションが必要です。

+ +

PAC ファイルと通信する

+ +

PAC ファイルと拡張機能のバックグラウンドページ(やその他の権限つきページ、ポップアップページのようなもの)とでメッセージを交換できて、その手段は runtime.sendMessage() と runtime.onMessage。

+ +

PAC ファイルにメッセージを送るには、toProxyScript オプションをセットしなければなりません:

+ +
// background.js
+
+// Log any messages from the proxy.
+browser.runtime.onMessage.addListener((message, sender) => {
+  if (sender.url === browser.extension.getURL(proxyScriptURL)) {
+    console.log(message);
+  }
+});
+
+let messageToProxy = {
+  enabled: true,
+  foo: "A string",
+  bar: 1234
+};
+
+browser.runtime.sendMessage(messageToProxy, {toProxyScript: true});
+ +
// pac.js
+
+browser.runtime.onMessage.addListener((message) => {
+  if (message.enabled) {
+    browser.runtime.sendMessage("I'm enabled!");
+  }
+});
+ +

PAC ファイル仕様

+ +

The basic PAC file syntax is described in the PAC documentation, but the implementation used by the proxy API differs from standard PAC design in several ways, which are described in this section.

+ +

FindProxyForURL() return value

+ +

The standard FindProxyForURL() returns a string. In Firefox 55 and 56, the PAC file used with the proxy API also returns a string. In Firefox 55 only, you must pass an argument to the "DIRECT" return value, even though it doesn't need an argument.

+ +

From Firefox 57 onwards, FindProxyForURL() may still return a string, but may alternatively (and preferably) return an array of objects. Each object has the following properties:

+ +
+
type
+
String. This must be one of: "http"|"https|"socks4"|"socks"|"direct". "socks" refers to the SOCKS5 protocol.
+
host
+
String. Hostname for the proxy to use.
+
port
+
String. Port for the proxy.
+
username {{optional_inline}}
+
String. Username for the proxy. This is usable with "socks". For HTTP proxy authorizations, use {{WebExtAPIRef("webRequest.onAuthRequired")}}.
+
password {{optional_inline}}
+
String. Password for the proxy. This is usable with "socks". For HTTP proxy authorizations, use {{WebExtAPIRef("webRequest.onAuthRequired")}}.
+
proxyDNS {{optional_inline}}
+
Boolean. If true, the proxy server is used to resolve certain DNS queries (only usable with "socks4" and "socks"). Defaults to false.
+
failoverTimeout {{optional_inline}}
+
Integer. Number of seconds before timing out and trying the next proxy in the array. Defaults to 1.
+
+ +

例えば、:

+ +
const proxySpecification = [
+  {
+    type: "socks",
+    host: "foo.com",
+    port: 1080,
+    proxyDNS: true,
+    failoverTimeout: 5
+  },
+  {
+    type: "socks",
+    host: "bar.com",
+    port: 1060,
+  }
+];
+ +

The first proxy in the array will be tried first. If it does not respond in failoverTimeout seconds, the next will be tried, until the end of the array is reached.

+ +

PAC ファイル環境

+ +

The global helper functions usually available for PAC files (isPlainHostName(), dnsDomainIs(), and so on) are not available.

+ +

Code running in the PAC file does not get access to:

+ + + +
//  pac.js
+
+// send the log message to the background script
+browser.runtime.sendMessage(`Proxy-blocker: blocked ${url}`);
+ +
// background-script.js
+
+function handleMessage(message, sender) {
+  // only handle messages from the proxy script
+  if (sender.url != browser.extension.getURL(proxyScriptURL)) {
+    return;
+  }
+  console.log(message);
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

関数

+ +
+
{{WebExtAPIRef("proxy.register()")}}
+
所与のプロキシスクリプトを登録する
+
{{WebExtAPIRef("proxy.unregister()")}}
+
プロキシスクリプトの登録を取り消す。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("proxy.onProxyError")}}
+
プロキシスクリプト実行している際にシステムがエラーに遭遇した時に発火します。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.proxy")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/index.html b/files/ja/mozilla/add-ons/webextensions/api/runtime/index.html new file mode 100644 index 0000000000..f064c9b4a9 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/index.html @@ -0,0 +1,167 @@ +--- +title: runtime +slug: Mozilla/Add-ons/WebExtensions/API/runtime +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime +--- +
{{AddonSidebar}}
+ +

このモジュールは拡張機能と、それを実行する環境についての情報を提供します。

+ +

またメッセージ API も提供し、それでは次のことができます:

+ + + +

型

+ +
+
{{WebExtAPIRef("runtime.Port")}}
+
Represents one end of a connection between two specific contexts, which can be used to exchange messages.
+
{{WebExtAPIRef("runtime.MessageSender")}}
+
+

Contains information about the sender of a message or connection request.

+
+
{{WebExtAPIRef("runtime.PlatformOs")}}
+
Identifies the browser's operating system.
+
{{WebExtAPIRef("runtime.PlatformArch")}}
+
Identifies the browser's processor architecture.
+
{{WebExtAPIRef("runtime.PlatformInfo")}}
+
Contains information about the platform the browser is running on.
+
{{WebExtAPIRef("runtime.RequestUpdateCheckStatus")}}
+
Result of a call to {{WebExtAPIRef("runtime.requestUpdateCheck()")}}.
+
{{WebExtAPIRef("runtime.OnInstalledReason")}}
+
The reason that the {{WebExtAPIRef("runtime.onInstalled")}} event is being dispatched.
+
{{WebExtAPIRef("runtime.OnRestartRequiredReason")}}
+
The reason that the {{WebExtAPIRef("runtime.onRestartRequired")}} event is being dispatched.
+
+ +

プロパティ

+ +
+
{{WebExtAPIRef("runtime.lastError")}}
+
This value is set when an asynchronous function has an error condition that it needs to report to its caller.
+
{{WebExtAPIRef("runtime.id")}}
+
The ID of the extension.
+
+ +

関数

+ +
+
{{WebExtAPIRef("runtime.getBackgroundPage()")}}
+
Retrieves the Window object for the background page running inside the current extension.
+
{{WebExtAPIRef("runtime.openOptionsPage()")}}
+
+

Opens your extension's options page.

+
+
{{WebExtAPIRef("runtime.getManifest()")}}
+
Gets the complete manifest.json file, serialized as an object.
+
{{WebExtAPIRef("runtime.getURL()")}}
+
Given a relative path from the manifest.json to a resource packaged with the extension, returns a fully-qualified URL.
+
{{WebExtAPIRef("runtime.setUninstallURL()")}}
+
Sets a URL to be visited when the extension is uninstalled.
+
{{WebExtAPIRef("runtime.reload()")}}
+
Reloads the extension.
+
{{WebExtAPIRef("runtime.requestUpdateCheck()")}}
+
Checks for updates to this extension.
+
{{WebExtAPIRef("runtime.connect()")}}
+
Establishes a connection from a content script to the main extension process, or from one extension to a different extension.
+
{{WebExtAPIRef("runtime.connectNative()")}}
+
+
Connects the extension to a native application on the user's computer.
+
+
{{WebExtAPIRef("runtime.sendMessage()")}}
+
Sends a single message to event listeners within your extension or a different extension. Similar to {{WebExtAPIRef('runtime.connect')}} but only sends a single message, with an optional response.
+
{{WebExtAPIRef("runtime.sendNativeMessage()")}}
+
Sends a single message from an extension to a native application.
+
{{WebExtAPIRef("runtime.getPlatformInfo()")}}
+
Returns information about the current platform.
+
{{WebExtAPIRef("runtime.getBrowserInfo()")}}
+
Returns information about the browser in which this extension is installed.
+
{{WebExtAPIRef("runtime.getPackageDirectoryEntry()")}}
+
Returns a DirectoryEntry for the package directory.
+
+ +

イベント

+ +
+
{{WebExtAPIRef("runtime.onStartup")}}
+
Fired when a profile that has this extension installed first starts up. This event is not fired when an incognito profile is started.
+
{{WebExtAPIRef("runtime.onInstalled")}}
+
Fired when the extension is first installed, when the extension is updated to a new version, and when the browser is updated to a new version.
+
{{WebExtAPIRef("runtime.onSuspend")}}
+
Sent to the event page just before the extension is unloaded. This gives the extension an opportunity to do some cleanup.
+
{{WebExtAPIRef("runtime.onSuspendCanceled")}}
+
Sent after {{WebExtAPIRef("runtime.onSuspend")}} to indicate that the extension won't be unloaded after all.
+
{{WebExtAPIRef("runtime.onUpdateAvailable")}}
+
Fired when an update is available, but isn't installed immediately because the extension is currently running.
+
{{WebExtAPIRef("runtime.onBrowserUpdateAvailable")}}
+
Fired when an update for the browser is available, but isn't installed immediately because a browser restart is required.
+
{{WebExtAPIRef("runtime.onConnect")}}
+
Fired when a connection is made with either an extension process or a content script.
+
{{WebExtAPIRef("runtime.onConnectExternal")}}
+
Fired when a connection is made with another extension.
+
{{WebExtAPIRef("runtime.onMessage")}}
+
Fired when a message is sent from either an extension process or a content script.
+
{{WebExtAPIRef("runtime.onMessageExternal")}}
+
Fired when a message is sent from another extension. Cannot be used in a content script.
+
{{WebExtAPIRef("runtime.onRestartRequired")}}
+
Fired when the device needs to be restarted.
+
+ +

ブラウザ実装状況

+ +
+

{{Compat("webextensions.api.runtime")}}

+
+ +
{{WebExtExamples("h2")}}
+ +
Acknowledgements + +

This API is based on Chromium's chrome.runtime API. This documentation is derived from runtime.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/messagesender/index.html b/files/ja/mozilla/add-ons/webextensions/api/runtime/messagesender/index.html new file mode 100644 index 0000000000..7c508a5376 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/messagesender/index.html @@ -0,0 +1,86 @@ +--- +title: runtime.MessageSender +slug: Mozilla/Add-ons/WebExtensions/API/runtime/MessageSender +tags: + - API + - Add-ons + - Extensions + - MessageSender + - Non-standard + - Reference + - Type + - WebExtensions + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/MessageSender +--- +
{{AddonSidebar()}}
+ +

メッセージや接続要求の送信元に関する情報を持つオブジェクトです。このオブジェクトは、{{WebExtAPIRef("runtime.onMessage()")}} リスナーに渡されます。

+ +

また、このオブジェクトは {{WebExtAPIRef("runtime.Port")}} のプロパティでもありますが、{{WebExtAPIRef("runtime.onConnect()")}} または {{WebExtAPIRef("runtime.onConnectExternal()")}} リスナーに渡された Port インスタンスにしか存在しません。

+ +

型

+ +

この型はオブジェクトです。以下のプロパティを持ちます。

+ +
+
tab{{optional_inline}}
+
{{WebExtAPIRef('tabs.Tab')}} 型。接続を開いた {{WebExtAPIRef('tabs.Tab')}} です。このプロパティが存在するのは、タブ (コンテンツスクリプトを含む) から接続が開かれたときだけです。
+
frameId{{optional_inline}}
+
integer 型。接続を開いたフレームです。0 は最上位のフレームを、正の数値は子フレームを表します。このプロパティが存在するのは、tab が設定されるときだけです。
+
id{{optional_inline}}
+
string 型。メッセージが拡張機能から送信された場合は、その拡張機能の ID が設定されます。送信側の manifest.json で applications キーを使って明示的に ID が設定されている場合は、id にはその値が使われます。そうでない場合は、送信側の自動生成された ID が使われます。
+
バージョン 54 より前の Firefox では、この値には拡張機能の内部 ID が使われることに注意してください (つまり、拡張機能の URL に含まれる UUID です)。
+
url{{optional_inline}}
+
string 型。メッセージを送信したスクリプトを持つページやフレームの URL です。
+
送信側が拡張機能のページ (例えば、バックグラウンド ページ、オプションページ、 ブラウザーアクション や ページアクション のポップアップ) に含まれるスクリプトである場合、URL は "moz-extension://<拡張機能の内部 ID>/path/to/page.html" という形式が使われます。送信側がバックグラウンドスクリプトであって、バックグラウンド ページを使っていない場合、URL は "moz-extension://<拡張機能の内部 ID>/_generated_background_page.html" という形式が使われます。
+
送信側がウェブページ内のスクリプト (ページに含まれる通常のスクリプトだけでなく、コンテンツスクリプトも含みます) である場合、url はそのウェブページの URL が使われます。スクリプトがフレーム内で動作している場合、url はそのフレームの URL です。
+
tlsChannelId{{optional_inline}}
+
string 型。接続を開いたページまたはフレームの TLS チャンネルの ID です。拡張機能によって要求され、可能である場合にのみ設定されます。
+
+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.runtime.MessageSender")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.runtime API に基づいています。このドキュメントは runtime.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html b/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html new file mode 100644 index 0000000000..29b0f557bb --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html @@ -0,0 +1,317 @@ +--- +title: runtime.onMessage +slug: Mozilla/Add-ons/WebExtensions/API/runtime/onMessage +tags: + - API + - Add-ons + - Event + - Extensions + - Non-standard + - Reference + - WebExtensions + - onmessage + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/onMessage +--- +
{{AddonSidebar()}}
+ +
このイベントを使って、拡張機能の別の部品からのメッセージを受け取ることができます。例えば、次のような場面で使います。
+ +
+ + + +

onMessage リスナーに受信させるメッセージを送るには、{{WebExtAPIRef("runtime.sendMessage()")}}、または (コンテンツスクリプトにメッセージを送るときは) {{WebExtAPIRef("tabs.sendMessage()")}} を使います。

+ +
+

同じ種類のメッセージに対する onMessage リスナーを複数作ることは避けてください。複数のリスナーが実行される順番は保証されていないからです。特定のリスナーへのメッセージ伝送を保証したいときは、コネクションベースのメッセージ を使ってください。

+
+ +

メッセージ本体の他に、リスナーは次のものを受け取ります。

+ + + +

メッセージに対して同期的に返信するには、sendResponse 関数をリスナーの中で実行します。例を参照してください。

+ +

非同期的に返信するには、二つの方法があります。

+ + + +
+

Promise を返すほうがより望ましい方法です。sendResponse は W3C 仕様から削除される予定です。 人気のある webextension-polyfill ライブラリーは、すでに sendResponse 関数を実装から削除しました。

+
+ +
+

また、コネクションベースのメッセージを使うこともできます。

+
+ +

構文

+ +
browser.runtime.onMessage.addListener(listener)
+browser.runtime.onMessage.removeListener(listener)
+browser.runtime.onMessage.hasListener(listener)
+
+ +

イベントには 3 つの関数があります。

+ +
+
addListener(callback)
+
リスナーをこのイベントに追加する。
+
removeListener(listener)
+
このイベントの受け取りを中止する。listener 引数は削除するリスナーです。
+
hasListener(listener)
+
listener がこのイベントに登録されているかどうかを確認する。登録されている場合は true を、そうでない場合は false を返す。
+
+ +

addListener の構文

+ +

引数

+ +
+
function
+
+

このイベントが発生したときに実行されるリスナー関数。関数には次の引数が渡される。

+ +
+
message
+
object 型。メッセージ本体。これは JSON 化できるオブジェクトです。
+
+ +
+
sender
+
{{WebExtAPIRef('runtime.MessageSender')}} オブジェクト。メッセージの送信側を表します。
+
+ +
+
sendResponse
+
+

メッセージに対する返信を送るために、最大で一回実行できる関数。この関数は引数を一つ受け取り、それは JSON 化できるオブジェクトのはずです。その引数はメッセージ送信側に返送されます。

+ +

同じドキュメント中に onMessage リスナーが一つ以上ある場合、返信を返すことができるのは一つだけです。

+ +

同期的に返信するには、リスナー関数が復帰する前に sendResponse を実行します。非同期的に返信するには、次のどちらかを実行します。

+ +
    +
  • sendResponse に対する参照を保持したままリスナー関数から true を返す。そうすると、リスナー関数から復帰した後でも sendResponse を実行できます。
    • +
  • リスナー関数から Promise を返して、返信の準備ができたときにその Promise を解決する。こちらがより好ましい方法です。
    • +
+
+
+ +

リスナー関数は、Boolean か Promise のいずれかを返します。

+ +
+

addListener を次のような async 関数を使って実行しないでください。

+ + 
browser.runtime.onMessage.addListener(async (data, sender) => {
+  if (data.type === 'handle_me') return 'done';
+});
+
+ +

このようなリスナーは全ての受け取ったメッセージを消費するため、実際には他のリスナーがメッセージを受信したり処理することを妨げてしまいます。

+ +

非同期的な実装を使いたい場合は、次のように Promise を使ってください。

+ + 
browser.runtime.onMessage.addListener((data, sender) => {
+  if (data.type === 'handle_me') return Promise.resolve('done');
+});
+
+
+
+
+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.runtime.onMessage")}}

+ +

使用例

+ +

単純な使用例

+ +

次のコンテンツスクリプトは、ウェブページ上のクリックイベントを待ち受けます。リンクがクリックされた場合、対象の URL をバックグラウンドページにメッセージ送信します。

+ +
// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}
+
+ +

バックグラウンドスクリプトはこのメッセージが送信されるまで待ち、notifications API を使って通知を表示します。

+ +
// background-script.js
+
+browser.runtime.onMessage.addListener(notify);
+
+function notify(message) {
+  browser.notifications.create({
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("link.png"),
+    "title": "リンクをクリックしました!",
+    "message": message.url
+  });
+}
+ +

同期的に返信する

+ +

次のコンテンツスクリプトは、ユーザーがページ上をクリックしたとき、バックグラウンドスクリプトにメッセージを送信します。また、バックグラウンドスクリプトから送信された応答があればログ出力します。

+ +
// content-script.js
+
+function handleResponse(message) {
+  console.log(`バックグラウンドスクリプトが応答しました: ${message.response}`);
+}
+
+function handleError(error) {
+  console.log(`Error: ${error}`);
+}
+
+function sendMessage(e) {
+  var sending = browser.runtime.sendMessage({content: "コンテンツスクリプトからのメッセージです"});
+  sending.then(handleResponse, handleError);
+}
+
+window.addEventListener("click", sendMessage);
+ +

これが対応するバックグラウンドスクリプトで、リスナー内部から同期的に応答を返します。

+ +
// background-script.js
+
+function handleMessage(request, sender, sendResponse) {
+  console.log(`コンテンツスクリプトがメッセージを送信しました: ${request.content}`);
+  sendResponse({response: "バックグラウンドスクリプトからの応答です"});
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

これは同期的に応答を返す別の方法で、Promise.resolve() を使うものです。

+ +
// background-script.js
+
+function handleMessage(request, sender, sendResponse) {
+  console.log(`コンテンツスクリプトがメッセージを送信しました: ${request.content}`);
+  return Promise.resolve({response: "バックグラウンドスクリプトからの応答です"});
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

非同期的な返信を sendResponse により行う

+ +

次は直前の例のバックグラウンドスクリプトの別バージョンです。これは、リスナーが復帰した後、非同期的に返信を送ります。リスナーの中の return true; に注目してください。このようにすることで、リスナーが復帰した後に sendResponse 引数を使う意図があることをブラウザーに伝えています。

+ +
// background-script.js
+
+function handleMessage(request, sender, sendResponse) {
+  console.log(`コンテンツスクリプトがメッセージを送信しました: ${request.content}`);
+  setTimeout(() => {
+    sendResponse({response: "非同期的なバックグラウンドスクリプトからの応答です"});
+  }, 1000);
+  return true;
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+
+ +

非同期的な返信を Promise により行う

+ +

次のコンテンツスクリプトは、まずページ上の <a> リンクを取得し、そしてそのリンクの場所がブックマークされているかどうかを尋ねるメッセージを送信します。このスクリプトは、その場所がブックマークされている場合は true を、そうでない場合は false というような、Boolean 型の応答が返ってくることを想定しています。

+ +
// content-script.js
+
+const firstLink = document.querySelector("a");
+
+function handleResponse(isBookmarked) {
+  if (isBookmarked) {
+    firstLink.classList.add("bookmarked");
+  }
+}
+
+browser.runtime.sendMessage({
+  url: firstLink.href
+}).then(handleResponse);
+ +

これが対応するバックグラウンドスクリプトです。{{WebExtAPIRef("bookmarks.search()")}} を使うことで、リンクがブックマークされているかを確認する Promise を返します。

+ +
// background-script.js
+
+function isBookmarked(message, sender, response) {
+  return browser.bookmarks.search({
+    url: message.url
+  }).then(function(results) {
+    return results.length > 0;
+  });
+}
+
+browser.runtime.onMessage.addListener(isBookmarked);
+ +

非同期的なハンドラーが Promise を返さない場合、明示的に Promise を作ることができます。これは少し不自然な例ですが、Window.setTimeout() を使って 1 秒の遅延を発生させた後に応答を返します。

+ +
// background-script.js
+
+function handleMessage(request, sender, sendResponse) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({response: "非同期的なバックグラウンドスクリプトからの応答です"});
+    }, 1000);
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.runtime API. このドキュメントは runtime.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.html b/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.html new file mode 100644 index 0000000000..5436951fd6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.html @@ -0,0 +1,96 @@ +--- +title: runtime.openOptionsPage() +slug: Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - openOptionsPage + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage +--- +
{{AddonSidebar()}}
+ +
拡張機能にオプションページが定義されている場合、このメソッドはそれを開きます。
+ +
 
+ +

これは Promise を返す非同期関数です。

+ +

構文

+ +
var openingPage = browser.runtime.openOptionsPage()
+
+ +

パラメータ

+ +

なし。

+ +

返り値

+ +

オプションページの作成が成功した時は、引数のない Promise で、操作が失敗した場合はエラーメッセージつきの rejected が返ります。

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.runtime.openOptionsPage")}}

+ +

例

+ +

ユーザーがブラウザーアクションのアイコンをクリックした時にオプションページを返します:

+ +
function onOpened() {
+  console.log(`Options page opened`);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var opening = browser.runtime.openOptionsPage();
+opening.then(onOpened, onError);
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.runtime API. This documentation is derived from runtime.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.html b/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.html new file mode 100644 index 0000000000..522d9240b9 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.html @@ -0,0 +1,167 @@ +--- +title: runtime.sendMessage() +slug: Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - runtime + - sendMessage +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage +--- +
{{AddonSidebar()}}
+ +

単一のメッセージを、自分や別の拡張機能が持つイベントリスナーに送信します。

+ +

自分自身の拡張機能に送信する場合は、引数 extensionId を省略してください。自らの拡張機能に含まれる全てのページで {{WebExtAPIRef('runtime.onMessage')}} イベントが起動されます。ただし、runtime.sendMessage を実行したフレームは除きます。

+ +

別の拡張機能に送信する場合は、引数 extensionId に拡張機能の ID を設定してください。その拡張機能で {{WebExtAPIRef('runtime.onMessageExternal')}} イベントが起動されます。

+ +

このメソッドを使ってコンテンツスクリプトにメッセージを送信することはできません。コンテンツスクリプトにメッセージを送信するには、{{WebExtAPIRef('tabs.sendMessage')}} を使ってください。

+ + + +

これは、Promise を返す非同期関数です。

+ +
+

コネクションベースのメッセージを使うこともできます。

+
+ +

構文

+ +
var sending = browser.runtime.sendMessage(
+  extensionId,             // optional string
+  message,                 // any
+  options                  // optional object
+)
+
+ +

引数

+ +
+
extensionId{{optional_inline}}
+
string 型。 メッセージを送信する拡張機能の ID。別の拡張機能にメッセージを送信する場合は、この引数を含めてください。受信させることを意図している拡張機能が manifest.json の applications キーを使って明示的に ID を設定されている場合は、その値を extensionId に指定する必要があります。そうでない場合、受信側の拡張機能のために生成された ID を指定する必要があります。
+
もし extensionId が省略された場合、メッセージは自分自身の拡張機能に送信されます。
+
message
+
any 型。シリアライズされたクローンに構造化できるオブジェクト。
+
options{{optional_inline}}
+
object 型。 +
+
includeTlsChannelId{{optional_inline}}
+
boolean 型。接続イベントを待つプロセスのための {{WebExtAPIRef('runtime.onMessageExternal')}} に TLS チャンネル ID が渡されるかどうか。
+
toProxyScript{{optional_inline}}
+
boolean 型。 メッセージが {{WebExtAPIRef("proxy")}} API を使って読み込まれる PAC ファイル向けである場合、true を指定しなければならない。
+
+
+
+ +

引数に指定される値によっては、この API はあいまいです。以降のルールが使われます。

+ + + +

Firefox 55 より前では、引数が二つの場合のルールが異なることに注意してください。古いルールでは、最初の引数が文字列である場合、それを extensionId と扱い、二番目の引数をメッセージとして使います。これは、sendMessage() を ("my-message", {}) のような引数を使って実行する場合、空のメッセージを "my-message" によって識別される拡張機能に送信してしまうということです。新しいルールのもとでは、このような引数を使うと、"my-message" というメッセージを空のオプションオブジェクトを使って内部的に送信します。

+ +

戻り値

+ +

Promise 型。受信側が応答を送信する場合、その応答を JSON オブジェクトとして使って fulfilled 状態にされます。それ以外の場合、値を持たない fulfilled 状態になります。拡張機能との接続中にエラーが発生した場合、Promise はエラーメッセージを持つ rejected 状態になります。

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.runtime.sendMessage")}}

+ +

使用例

+ +

これは、ユーザーがコンテンツのウィンドウをクリックしたときにバックグラウンド スクリプトにメッセージを送信するコンテンツスクリプトです。送信されるメッセージは {greeting: "Greeting from the content script"} で、送信側は応答を受信をすることになっており、それを handleResponse 関数で扱います。

+ +
// content-script.js
+
+function handleResponse(message) {
+  console.log(`Message from the background script:  ${message.response}`);
+}
+
+function handleError(error) {
+  console.log(`Error: ${error}`);
+}
+
+function notifyBackgroundPage(e) {
+  var sending = browser.runtime.sendMessage({
+    greeting: "Greeting from the content script"
+  });
+  sending.then(handleResponse, handleError);
+}
+
+window.addEventListener("click", notifyBackgroundPage);
+ +

対応するバックグラウンド スクリプトは次のようなものです。

+ +
// background-script.js
+
+function handleMessage(request, sender, sendResponse) {
+  console.log("Message from the content script: " +
+    request.greeting);
+  sendResponse({response: "Response from background script"});
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.runtime API に基づいています。このドキュメントは runtime.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/sessions/index.html b/files/ja/mozilla/add-ons/webextensions/api/sessions/index.html new file mode 100644 index 0000000000..870cf96426 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/sessions/index.html @@ -0,0 +1,134 @@ +--- +title: sessions +slug: Mozilla/Add-ons/WebExtensions/API/sessions +tags: + - API + - Add-ons + - Extensions + - Non-standard + - Reference + - WebExtensions + - sessions +translation_of: Mozilla/Add-ons/WebExtensions/API/sessions +--- +
{{AddonSidebar}}
+ +

セッション API を使ってブラウザーが動作している間に閉じたタブやウィンドウを一覧、復帰します。

+ +

{{WebExtAPIRef("sessions.getRecentlyClosed()")}} 関数は {{WebExtAPIRef("tabs.Tab")}} 配列と{{WebExtAPIRef("windows.Window")}} オブジェクトを返し、これはブラウザーが動作している間に閉じられたタブやウィンドウを {{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}} で定義される上限まで表します。

+ +

ウィンドウやタブの復帰は {{WebExtAPIRef("sessions.restore()")}} 関数を使ってできます。復帰はタブを再オープンするだけではありません: タブの移動履歴を復帰して戻る/進むのボタンが動くようにもします。

+ +

この API は拡張機能にタブやウィンドウに関連する追加状態の保存させる関数グループも提供します。それで、タブやウィンドウが閉じられて順次復帰された場合、拡張機能は状態を取得できます。例えば、タブをグループ化する拡張機能は、これを使ってタブがどのグループにいるのかを記憶し、ユーザーがタブを復帰した時に正しいグループに復帰できるようになります。

+ +

セッション API を使うには "sessions" API パーミッションが必要です。

+ +

型

+ +
+
{{WebExtAPIRef("sessions.Filter")}}
+
{{WebExtAPIRef("sessions.getRecentlyClosed()")}}の呼び出しで返される{{WebExtAPIRef("sessions.Session", "Session")}} オブジェクトの数を制限します。
+
{{WebExtAPIRef("sessions.Session")}}
+
+

現在のブラウジングセッションでユーザーが閉じたタブやウィンドウを表します。

+
+
+ +

プロパティ

+ +
+
{{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}}
+
sessions.getRecentlyClosed()の呼び出しで返される最大のセッション数。
+
+ +

関数

+ +
+
{{WebExtAPIRef("sessions.forgetClosedTab()")}}
+
ブラウザーの最近閉じたタブリストから閉じたタブを削除します。
+
{{WebExtAPIRef("sessions.forgetClosedWindow()")}}
+
ブラウザーの最近閉じたウィンドウリストから閉じたウィンドウを削除します。
+
{{WebExtAPIRef("sessions.getRecentlyClosed()")}}
+
{{WebExtAPIRef("sessions.Session", "Session")}} オブジェクトを返します、これは現在のブラウジングセッション(つまり: ブラウザーが起動した以降の)で閉じたウィンドウとタブを表しています。
+
{{WebExtAPIRef("sessions.restore()")}}
+
+

閉じたタブやウィンドウを復元します。

+
+
{{WebExtAPIRef("sessions.setTabValue()")}}
+
+

あるタブに関連するキー/バリューペアを保存します。

+
+
{{WebExtAPIRef("sessions.getTabValue()")}}
+
+

あるタブのキーに対応するバリューを取得します。

+
+
{{WebExtAPIRef("sessions.removeTabValue()")}}
+
+

あるタブに関連するキー/バリューペアを削除します。

+
+
{{WebExtAPIRef("sessions.setWindowValue()")}}
+
+

あるウィンドウに関連するキー/バリューペアを保存します。

+
+
{{WebExtAPIRef("sessions.getWindowValue()")}}
+
+

あるウィンドウに関連するキー/バリューペアを保存します。

+
+
{{WebExtAPIRef("sessions.removeWindowValue()")}}
+
+

あるウィンドウに関連するキー/バリューペアを削除します。

+
+
+ +

イベント

+ +
+
{{WebExtAPIRef("sessions.onChanged")}}
+
+

タブかウィンドウが閉じられたときに発火します。

+
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.sessions")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.sessions API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/sidebaraction/index.html b/files/ja/mozilla/add-ons/webextensions/api/sidebaraction/index.html new file mode 100644 index 0000000000..90c3d8ec73 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/sidebaraction/index.html @@ -0,0 +1,98 @@ +--- +title: sidebarAction +slug: Mozilla/Add-ons/WebExtensions/API/sidebarAction +tags: + - API + - Extensions + - Non-standard + - Reference + - Sidebar + - WebExtensions + - sidebarAction +translation_of: Mozilla/Add-ons/WebExtensions/API/sidebarAction +--- +
{{AddonSidebar}}
+ +

拡張機能のサイドバーのプロパティを取得、設定します。

+ +

サイドバー はブラウザーウィンドウのウェブページの隣の、右側か左側にあるペインです。ブラウザーはユーザーが利用できるサイドバーを見て、表示するサイドバーを選択できる UI を提供します。manifest.json の sidebar_action キーを使って、拡張機能は自身のサイドバーを定義できます。ここで述べる sidebarAction API を使って、拡張機能はサイドバーのプロパティを設定、取得できます。

+ +

sidebarAction API は {{WebExtAPIRef("browserAction")}} API と緊密にモデリングされています。

+ +

sidebarAction API は Opera の sidebarAction API を元にしていますが、次のものはサポートされていません: setBadgeText(), getBadgeText(), setBadgeBackgroundColor(), getBadgeBackgroundColor(), onFocus, onBlur.

+ +

型

+ +
+
{{WebExtAPIRef("sidebarAction.ImageDataType")}}
+
画像のピクセルデータ。ImageData オブジェクト (例えば、{{htmlelement("canvas")}} 要素からのもの)でなければならない。
+
+ +

関数

+ +
+
{{WebExtAPIRef("sidebarAction.setPanel()")}}
+
サイドバーのバネルを設定します。
+
{{WebExtAPIRef("sidebarAction.getPanel()")}}
+
サイドバーのバネルを取得します。
+
{{WebExtAPIRef("sidebarAction.setTitle()")}}
+
サイドバーのタイトルを設定します。これはブラウザーがサイドバーを一覧するあらゆる UI、例えばメニューに表示されます。
+
{{WebExtAPIRef("sidebarAction.getTitle()")}}
+
サイドバーのタイトルを取得します。
+
{{WebExtAPIRef("sidebarAction.setIcon()")}}
+
サイドバーのアイコンを設定します。
+
{{WebExtAPIRef("sidebarAction.open()")}}
+
サイドバーを開きます。
+
{{WebExtAPIRef("sidebarAction.close()")}}
+
サイドバーを閉じます。
+
{{WebExtAPIRef("sidebarAction.isOpen()")}}
+
サイドバーが開いているか否かをチェックします。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.sidebarAction")}}

+ +

add-ons の例

+ + + +
Acknowledgements + +

This API is based on Opera's chrome.sidebarAction API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/index.html new file mode 100644 index 0000000000..6286012f61 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/index.html @@ -0,0 +1,109 @@ +--- +title: storage +slug: Mozilla/Add-ons/WebExtensions/API/storage +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - Storage + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/storage +--- +
{{AddonSidebar}}
+ +

拡張機能にデータの保存、取得と、保存項目の変更をリッスンできるようにします。

+ +

ストレージのシステムは Web Storage API に基づいていますが、いくつか相違点があります。とりわけ、以下の違いがあります。

+ + + +

この API を利用するためには"storage" permission を manifest.json に含める必要があります。

+ +

各々の拡張機能は独自のストレージ領域を持っています。またそれらは異なる型のストレージに分割することができます。

+ +

{{domxref("Window.localStorage")}}とこの API は似ていますが、拡張機能関連のデータを格納する際に拡張コード内で Window.localStorage を使わないことを推奨します。Firefox はプライバシー上の理由で、ブラウザー履歴やデータを消去などをする場合、localStorage API を利用して保存されたデータも消去します。しかし storage.local API を利用して保存されたデータはこれらの場合でも保持されます。

+ +
+

ストレージ領域内は暗号化されていないため、ユーザーの機密情報を保存すべきではありません。

+
+ +

型

+ +
+
{{WebExtAPIRef("storage.StorageArea")}}
+
ストレージ領域を表すオブジェクト
+
{{WebExtAPIRef("storage.StorageChange")}}
+
ストレージ領域の変更を表すオブジェクト
+
+ +

プロパティ

+ +

storage は 3 つのプロパティを持ち、異なる型の利用可能なストレージ領域を表しています。

+ +
+
{{WebExtAPIRef("storage.sync")}}
+
sync ストレージ領域を表します。sync ストレージ内のアイテムはブラウザーによって同期され、異なるデバイス間でも、ログインしているユーザーのブラウザーのすべてのインスタンスを跨いで利用できるようになります。
+
{{WebExtAPIRef("storage.local")}}
+
local ストレージ領域を表します。local ストレージ内のアイテムは拡張機能がインストールされているマシン内のみで扱えます。
+
{{WebExtAPIRef("storage.managed")}}
+
managed ストレージ領域を表します。managed ストレージ内のアイテムはドメイン管理者によってセットされ、拡張機能は読取権限のみを持ちます。そのため、この名前空間を変更しようとするとエラーになります。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("storage.onChanged")}}
+
ストレージ領域内のアイテムを 1 つ以上変更した場合に発火します。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.storage")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

この API は Chromium の chrome.storage API に基づいています。また、このドキュメントは storage.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.html new file mode 100644 index 0000000000..e69759effd --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/local/index.html @@ -0,0 +1,84 @@ +--- +title: storage.local +slug: Mozilla/Add-ons/WebExtensions/API/storage/local +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/local +--- +
{{AddonSidebar()}}
+ +

local ストレージ領域を指します。localストレージ内のアイテムはその拡張機能がインストールされたマシン内で利用できます。

+ +

ブラウザーは拡張機能がローカルストレージエリアに保存できるデータ量を制限します。

+ + + +

拡張機能をアンインストールすると、関連するローカルストレージは削除されます。

+ +

またFirefoxでは、"about:config"で"keepUuidOnUninstall"と"keepStorageOnUninstall"の設定をtrueにすることで、アンインストール時にデータが削除されることを防ぐことができます。 この機能は拡張機能開発のテストのために提供されています。拡張機能自身ではこれらの設定を変更できません。

+ +

このAPIは {{domxref("Window.localStorage")}}に似ていますが、拡張機能のコード内でWindow.localStorageを使用することは推奨されません。これはユーザがプライバシーのために履歴とデータを削除するなど、FirefoxはlocalStorage APIを用いて拡張機能が保存したデータを削除することがあるためです。

+ +

関数

+ +

localオブジェクトは{{WebExtAPIRef("storage.StorageArea")}} 型で定義された関数を実装しています。

+ +
+
{{WebExtAPIRef("storage.StorageArea.get()")}}
+
ストレージ領域から 1つ以上のアイテムを取得します。
+
{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}
+
1つ以上のストレージ領域内に格納されたアイテムが占めるストレージ空間をバイト単位で取得します。
+
{{WebExtAPIRef("storage.StorageArea.set()")}}
+
1つ以上のアイテムをストレージ領域に格納します。既にアイテムが存在していれば値は上書きされます。 値を格納したとき{{WebExtAPIRef("storage.onChanged")}}イベントが発火します。
+
{{WebExtAPIRef("storage.StorageArea.remove()")}}
+
ストレージ領域内の1つ以上のアイテムを削除します。
+
{{WebExtAPIRef("storage.StorageArea.clear()")}}
+
ストレージ領域内の全てのアイテムを削除します。
+
+ +

ブラウザ互換状況

+ + + +

{{Compat("webextensions.api.storage.local")}}

+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

このAPIはChromiumの chrome.storage APIに基づいています。また、このドキュメントは storage.jsonにおける Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.html new file mode 100644 index 0000000000..b8dc2aec62 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.html @@ -0,0 +1,62 @@ +--- +title: StorageArea.clear() +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/clear +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - Storage + - StorageArea + - WebExtensions + - remove +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/clear +--- +
{{AddonSidebar()}}
+ +

全てのアイテムをストレージ領域から削除します。

+ +

この関数は Promise を返す非同期関数です。

+ +

構文

+ +
var clearing = browser.storage.<storageType>.clear()
+
+ +

<storageType> は {{WebExtAPIRef("storage.sync")}} または {{WebExtAPIRef("storage.local")}} の書き込み可能なストレージタイプです。

+ +

引数

+ +

なし

+ +

返り値

+ +

成功時は引数の無い Promise を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。

+ +

ブラウザ互換性

+ +

{{Compat("webextensions.api.storage.StorageArea.clear")}}

+ +

例

+ +
function onCleared() {
+  console.log("OK");
+}
+
+function onError(e) {
+  console.log(e);
+}
+
+var clearStorage = browser.storage.local.clear();
+clearStorage.then(onCleared, onError);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.storage APIに基づいています。また、このドキュメントは storage.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html new file mode 100644 index 0000000000..d5ea70153c --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html @@ -0,0 +1,133 @@ +--- +title: StorageArea.get() +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - Storage + - StorageArea + - WebExtensions + - get +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get +--- +
{{AddonSidebar()}}
+ +

ストレージ領域から1つ以上のアイテムを取得します。

+ +

この関数は Promise を返す非同期関数です。

+ +

構文

+ +
let gettingItem = browser.storage.<storageType>.get(
+  keys    // null, string, object or array of strings
+)
+
+ +

<storageType> は storage.sync または storage.local の書き込み可能なストレージタイプです。

+ +

引数

+ +
+
keys
+
取得したいアイテムのキー(文字列・文字列の配列またはデフォルト値を指定するオブジェクト)を指定します。空文字列・オブジェクト・配列を指定すると空のオブジェクトが取得できます。 null か未定義の値を指定するとストレージ全体のアイテムが取得できます。
+
+ +

返り値

+ +

成功時は keys で指定されたストレージ領域内のアイテム全てを含む results オブジェクトを引数に持つ Promise を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。

+ +
+

52 より前の Firefox バージョンのコンテンツスクリプトで使用する場合、 browser.storage.local.get() で返される Promise は1つのオブジェクトを持つ配列を引数に持ちます。配列内のオブジェクトは上記に記述したようにストレージ領域内の keys を持っています。 The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as chrome.storage.local.get(), it correctly passes an Object to the callback function.

+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.storage.StorageArea.get")}}

+ +

例

+ +

あらかじめストレージ領域に2つのアイテムを格納しておきます。

+ +
// "kitten" と "monster" を格納
+browser.storage.local.set({
+  kitten:  {name:"Mog", eats:"mice"},
+  monster: {name:"Kraken", eats:"people"}
+});
+ +

次に promise で使う成功時と失敗時のハンドラを定義しておきます。

+ +
function onGot(item) {
+  console.log(item);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+ +

keys を指定せずに呼び出すと全て取得します。

+ +
let gettingItem = browser.storage.local.get();
+gettingItem.then(onGot, onError);
+
+// -> Object { kitten: Object, monster: Object }
+ +

空のキーを指定すると何も返しません。

+ +
// 空の配列を指定すると何も返らない
+let gettingItem = browser.storage.local.get([]);
+gettingItem.then(onGot, onError);
+
+// -> Object { }
+ +

オブジェクト名を指定すると、合致するものを返します。

+ +
let gettingItem = browser.storage.local.get("kitten");
+gettingItem.then(onGot, onError);
+
+// -> Object { kitten: Object }
+ +

オブジェクト名の配列を指定すると合致するものを全て返します。

+ +
let gettingItem = browser.storage.local.get(["kitten", "monster", "grapefruit"]);
+gettingItem.then(onGot, onError);
+
+// -> Object { kitten: Object, monster: Object }
+ +

オブジェクト名をキー、デフォルト値をvalueに指定したオブジェクトを指定する場合

+ +
let gettingItem = browser.storage.local.get({
+  kitten: "no kitten",
+  monster: "no monster",
+  grapefruit: {
+    name: "Grape Fruit",
+    eats: "Water"
+  }
+});
+
+// -> Object { kitten: Object, monster: Object, grapefruit: Object }
+
+ +

{{WebExtExamples}}

+ +

Chrome での例

+ +
chrome.storage.local.get("kitten", function(items){
+  console.log(items.kitten);  // -> {name:"Mog", eats:"mice"}
+});
+ +

Or with an arrow function

+ +
chrome.storage.local.get("kitten", items=>{
+  console.log(items.kitten); // -> {name:"Mog", eats:"mice"}
+});
+ +
謝辞 + +

この API は Chromium の chrome.storage APIに基づいています。また、このドキュメントは storage.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.html new file mode 100644 index 0000000000..ae2de4bb9e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/getbytesinuse/index.html @@ -0,0 +1,53 @@ +--- +title: StorageArea.getBytesInUse() +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/getBytesInUse +tags: + - API + - Add-ons + - Method + - Non-standard + - Reference + - Storage + - StorageArea + - WebExtensions + - getBytesInUse +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/getBytesInUse +--- +
{{AddonSidebar()}}
+ +

1つ以上のストレージ領域内に格納されたアイテムが占めるストレージ空間をバイト単位で取得します。

+ +

この関数は Promise を返す非同期関数です。

+ +

構文

+ +
var gettingSpace = browser.storage.<storageType>.getBytesInUse(
+  keys                      // null, string, or array of strings
+)
+
+ +

<storageType> は {{WebExtAPIRef("storage.sync")}} または {{WebExtAPIRef("storage.local")}} の書き込み可能なストレージタイプです。

+ +

引数

+ +
+
keys
+
ストレージ空間を取得したいアイテムのキー(文字列または文字列の配列)を指定します。 空の文字列か配列を渡すと 0 が返ります。 null を指定すると、ストレージ領域全体の使用中ストレージ空間を返します。
+
+ +

返り値

+ +

成功時は keys で指定されたオブジェクトが占めるストレージ空間を持つ整数 bytesUsed を引数に持つ Promise を返します。失敗した場合 Promise はエラーメッセージと共にリジェクトされます。

+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.storage.StorageArea.getBytesInUse")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.storage APIに基づいています。また、このドキュメントは storage.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/index.html new file mode 100644 index 0000000000..5a84d5280d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/index.html @@ -0,0 +1,73 @@ +--- +title: storage.StorageArea +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea +--- +
{{AddonSidebar()}}
+ +

StorageArea はストレージ領域を表すオブジェクトです。

+ +

型

+ +

StorageAreaはオブジェクト型です。

+ +

関数

+ +
+
{{WebExtAPIRef("storage.StorageArea.get()")}}
+
ストレージ領域から1つ以上のアイテムを取得します。
+
{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}
+
ストレージ領域に格納されている1つ以上のアイテムで使用されているストレージサイズ(バイト単位)を取得します。
+
{{WebExtAPIRef("storage.StorageArea.set()")}}
+
1つ以上のアイテムをストレージ領域に保存します。既にアイテムが存在する場合は値が上書きされます。
+
{{WebExtAPIRef("storage.StorageArea.remove()")}}
+
1つ以上のアイテムをストレージ領域から削除します。
+
{{WebExtAPIRef("storage.StorageArea.clear()")}}
+
全てのアイテムをストレージ領域から削除します。
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.storage.StorageArea")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

このAPIはChromium chrome.storage APIに模度づいています。また、このドキュメントは storage.json におけるChromiumのコードに基づいています。

+ +

Microsoft Edge での実装状況はMicrosoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States Licenseに従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.html new file mode 100644 index 0000000000..daba7224fb --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/remove/index.html @@ -0,0 +1,70 @@ +--- +title: StorageArea.remove() +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/remove +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - Storage + - StorageArea + - WebExtensions + - remove +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/remove +--- +
{{AddonSidebar()}}
+ +

1つ以上のアイテムをストレージ領域から削除します。

+ +

この関数は Promise を返す非同期関数です。

+ +

Syntax

+ +
let removingItem = browser.storage.<storageType>.remove(
+  keys             // string, or array of strings
+)
+
+ +

<storageType> は {{WebExtAPIRef("storage.sync")}} または {{WebExtAPIRef("storage.local")}} の書き込み可能なストレージタイプです。

+ +

引数

+ +
+
keys
+
削除したいアイテムのキー(文字列または文字列の配列)を指定します。
+
+ +

返り値

+ +

成功時は引数の無い Promise を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。

+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.storage.StorageArea.remove")}}

+ +

例

+ +

1つのアイテムを削除する例です。

+ +
function onRemoved() {
+  console.log("OK");
+}
+
+function onError(e) {
+  console.log(e);
+}
+
+let removeKitten = browser.storage.remove("kitten");
+removeKitten.then(onRemoved, onError);
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.storage APIに基づいています。また、このドキュメントは storage.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html new file mode 100644 index 0000000000..6860bc9c19 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html @@ -0,0 +1,105 @@ +--- +title: StorageArea.set() +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - Storage + - StorageArea + - WebExtensions + - set +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set +--- +
{{AddonSidebar()}}
+ +

1つ以上のアイテムをストレージ領域に保存または上書きします。

+ +

この API を使用して保存や上書きをする場合、{{WebExtAPIRef("storage.onChanged")}} イベントが発火します。

+ +

この関数は Promise を返す非同期関数です。

+ +

構文

+ +
let settingItem = browser.storage.<storageType>.set(
+  keys             // オブジェクト
+)
+
+ +

<storageType> は storage.sync または storage.local の書き込み可能なストレージタイプです。

+ +

Parameters

+ +
+
keys
+
+

保存したい1つ以上のキー/値ペアを持つオブジェクトを指定します。アイテムが既に存在する場合、値は上書きされます。

+ +

値は primitive 型 (整数型・ブール型・文字列) または配列 を指定でできます。

+ +

通常は他の型 (Function, Date, RegExp, Set, Map, ArrayBuffer  など)は格納できません。これらのサポートされていない型の中には空のオブジェクトとして復元されたり、 set() がエラーをスローする場合があります。この場合の挙動はブラウザに依存します。

+
+
+ +

返り値

+ +

成功時は引数の無い Promise を返します。 失敗した場合 promise はエラーメッセージと共にリジェクトされます。

+ +

ブラウザ実装状況

+ +

 

+ +

{{Compat("webextensions.api.storage.StorageArea.set")}}

+ +

 

+ +

例

+ +
function setItem() {
+  console.log("OK");
+}
+
+function gotKitten(item) {
+  console.log(`${item.kitten.name} has ${item.kitten.eyeCount} eyes`);
+}
+
+function gotMonster(item) {
+  console.log(`${item.monster.name} has ${item.monster.eyeCount} eyes`);
+}
+
+function onError(error) {
+  console.log(error)
+}
+
+// オブジェクトを2つ定義
+var monster = {
+  name: "Kraken",
+  tentacles: true,
+  eyeCount: 10
+}
+
+var kitten = {
+  name: "Moggy",
+  tentacles: false,
+  eyeCount: 2
+}
+
+// オブジェクト2つを格納
+browser.storage.local.set({kitten, monster})
+  .then(setItem, onError);
+
+browser.storage.local.get("kitten")
+  .then(gotKitten, onError);
+browser.storage.local.get("monster")
+  .then(gotMonster, onError);
+
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.storage APIに基づいています。また、このドキュメントは storage.json における Chromium のコードに基づいています。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/storagechange/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/storagechange/index.html new file mode 100644 index 0000000000..f7850012ad --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/storagechange/index.html @@ -0,0 +1,79 @@ +--- +title: storage.StorageChange +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageChange +tags: + - API + - Add-ons + - Extensions + - Non-standard + - Reference + - Storage + - StorageChange + - Type + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageChange +--- +
{{AddonSidebar()}}
+ +
StorageChange はストレージ領域の変更を表すオブジェクトです。
+ +
 
+ +

型

+ +

StorageChange オブジェクトは以下のプロパティを持ちます。

+ +
+
oldValue{{optional_inline}}
+
アイテムの変更前の値が存在すれば、この中に入ります。データ型は特定されておらず、何らかのデータ型が入ります。
+
newValue{{optional_inline}}
+
アイテムの変更後の値があれば、この中に入ります。データ型は特定されておらず、何らかのデータ型が入ります。
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.storage.StorageChange")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

 

+ +

この API は Chromium の chrome.storage APIに基づいています。また、このドキュメントは storage.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.html b/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.html new file mode 100644 index 0000000000..f9b796ebfb --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/storage/sync/index.html @@ -0,0 +1,87 @@ +--- +title: storage.sync +slug: Mozilla/Add-ons/WebExtensions/API/storage/sync +tags: + - API + - Add-ons + - Extensions + - Non-standard + - Property + - Reference + - Storage + - Sync + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/sync +--- +
{{AddonSidebar()}}
+ +

sync ストレージ領域を指します。 sync ストレージ内のアイテムはブラウザーによって同期され、ログイン(Firefox sync や Google アカウントなど)しているブラウザー・デバイスの全てのインスタンスで利用できます。

+ +

Firefox の場合、ユーザーは "about:preferences" の "Sync 設定" オプションの下にある "アドオン" ボックスにチェックを入れる必要があります。

+ +

storage.sync の実装はアドオン ID に依存していることに注意してください。もし storage.sync を使うのであれば、 browser_specific_settings manifest.json キーを使用して拡張機能に ID を設定する必要があります。

+ +

この API の主な利用例は拡張機能の設定を格納し、異なるプロファイル間で同期させることです。この API は最大100 KB までデータを格納できます。それ以上格納しようとするとエラーメッセージを返して失敗します。 この API は稼働時間やパフォーマンスを保証しません。

+ +

関数

+ +

sync オブジェクトは {{WebExtAPIRef("storage.StorageArea")}} 型で定義された関数を実装しています。

+ +
+
{{WebExtAPIRef("storage.StorageArea.get()", "storage.StorageArea.get()")}}
+
ストレージ領域から1つ以上のアイテムを取得します。
+
{{WebExtAPIRef("storage.StorageArea.getBytesInUse()", "storage.StorageArea.getBytesInUse()")}}
+
1つ以上のストレージ領域内に格納されたアイテムが占めるストレージ空間をバイト単位で取得します。
+
{{WebExtAPIRef("storage.StorageArea.set()", "storage.StorageArea.set()")}}
+
1つ以上のアイテムをストレージ領域に格納します。既にアイテムが存在していれば値は上書きされます。
+
{{WebExtAPIRef("storage.StorageArea.remove()", "storage.StorageArea.remove()")}}
+
ストレージ領域内の1つ以上のアイテムを削除します。
+
{{WebExtAPIRef("storage.StorageArea.clear()", "storage.StorageArea.clear()")}}
+
ストレージ領域内の全てのアイテムを削除します。
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.storage.sync")}}

+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

このAPIはChromiumの chrome.storage APIに基づいています。また、このドキュメントは storage.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.html new file mode 100644 index 0000000000..65a036c403 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.html @@ -0,0 +1,105 @@ +--- +title: tabs.captureVisibleTab() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/captureVisibleTab +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - captureVisibleTab + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/captureVisibleTab +--- +
{{AddonSidebar()}}
+ +

指定ウィンドウの選択タブの表示領域の画像をエンコードしたデータ URI を作成します。このメソッドを使うには <all_urls> パーミッション が必要です (Chrome の場合、activeTab パーミッション があり、ユーザーが許可の操作を行えば、このメソッドを使うことができます)。

+ +

これは、Promise を返す非同期関数です。

+ +

構文

+ +
var capturing = browser.tabs.captureVisibleTab(
+  windowId,               // optional integer
+  options                 // optional extensionTypes.ImageDetails
+)
+
+ +

引数

+ +
+
windowId{{optional_inline}}
+
integer 型。対象となるウィンドウ。デフォルトは現在のウィンドウ。
+
options{{optional_inline}}
+
{{WebExtAPIRef('extensionTypes.ImageDetails')}} 型。
+
+ +

戻り値

+ +

Promise であり、キャプチャーされたタブの表示領域の画像をエンコードしたデータ URL で fulfilled 状態にされる。このデータ URL は、HTML イメージ要素の 'src' 属性に設定することで、画像を表示できる。もし何らかのエラーが発生した場合、Promise はエラーメッセージによって rejected 状態にされる。

+ +

使用例

+ +

現在のウィンドウの選択されたタブの画像を、デフォルト設定でキャプチャーする。

+ +
function onCaptured(imageUri) {
+  console.log(imageUri);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+browser.browserAction.onClicked.addListener(function() {
+  var capturing = browser.tabs.captureVisibleTab();
+  capturing.then(onCaptured, onError);
+});
+
+ +

{{WebExtExamples}}

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.tabs.captureVisibleTab")}}

+ +
謝辞 + +

この API は Chromium の chrome.tabs API に基づいています。このドキュメントは tabs.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.html new file mode 100644 index 0000000000..247bc50464 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/create/index.html @@ -0,0 +1,131 @@ +--- +title: tabs.create() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/create +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/create +--- +
{{AddonSidebar()}}
+ +

新しいタブを作ります。

+ +

これはPromiseを返す非同期関数です.

+ +

構文

+ +
var creating = browser.tabs.create(
+  createProperties   // object
+)
+
+ +

パラメータ

+ +
+
createProperties
+
新しいタブについてのプロパティを与えるオブジェクト。これらのプロパティについて詳しくは{{WebExtAPIRef("tabs.Tab")}}を参照してください。
+
+
+
active{{optional_inline}}
+
タブをアクティブにするかどうかを真理値で指定します。ウィンドウがフォーカスされているかには影響されません({{WebExtAPIRef('windows.update')}}も参照)。デフォルト値はtrue.
+
cookieStoreId {{optional_inline}}
+
文字列 。タブのcookie store IDがcookieStoreIdのタブを作るときに使用します。このオプションは拡張機能が"cookies" permissionを持つときのみ使用できます。
+
index{{optional_inline}}
+
整数値。ウィンドウ中のタブの位置を指定します。数値はゼロからウィンドウ内のタブの数までです。
+
openerTabId{{optional_inline}}
+
整数値。開くタブのIDを指定します。指定した場合、開く側のタブは新しいタブと同じウィンドウにある必要があります。
+
openInReaderMode{{optional_inline}}
+
真理値。もしtrueであればリーダーモードで開かれます。 デフォルトはfalse。
+
pinned{{optional_inline}}
+
真理値。タブをピン留めするかを指定します。デフォルトはfalse。
+
selected{{optional_inline}}
+
真理値。ウィンドウ内で選択されるかどうかを指定します。デフォルトはtrue。 +
このプロパティは非推奨です。Firefoxではサポートされません。代わりにactiveを使用してください。
+
+
url{{optional_inline}}
+
文字列。はじめに開くURLを指定します。デフォルトは新しいタブ。
+
スキームを含む完全なURLを指定します。(例えば 'www.google.com' → 'http://www.google.com').
+
セキュリティの観点からFirefoxでは特権URLは使用できません。
+
+
    +
  • chrome: URL
    • +
  • javascript: URL
    • +
  • data: URL
    • +
  • file: URL(ファイルシステム上のファイルなど。拡張機能内にパッケージ化されたファイルは指定できます。下部を参照してください)
    • +
  • 特権 about: URL (例、 about:config, about:addons, about:debugging) 。ただし非特権 URL (about:blank) は使用できます。
    • +
  • 新しいタブ (about:newtab) はURLを指定しなければ開かれます。
    • +
+ +

拡張機能内のファイルをロードするためにはmanifest.jsonファイルからの絶対パスで指定します。（例: '/path/to/my-page.html'）。もし'/'を省略すると相対パスとして解釈されます。またブラウザによっては、また異なった絶対パスとして解釈されます。

+
+
windowId{{optional_inline}}
+
整数値。新しくタブを作るウィンドウを指定します。デフォルトは現在開いているウィンドウ。
+
+
+
+ +

返り値

+ +

新しく作ったタブに関する{{WebExtAPIRef('tabs.Tab')}}オブジェクトを引数に持つPromiseが返されます。URLが特権URLであるなどして、タブが作られなかった場合はpromiseはエラーメッセージとともにrejectされます。

+ +

ブラウザー互換状況

+ + + +

{{Compat("webextensions.api.tabs.create", 10)}}

+ +

例

+ +

"https://example.org" を新しいタブで開きます

+ +
function onCreated(tab) {
+  console.log(`Created new tab: ${tab.id}`)
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+browser.browserAction.onClicked.addListener(function() {
+  var creating = browser.tabs.create({
+    url:"https://example.org"
+  });
+  creating.then(onCreated, onError);
+});
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

このAPIはChromiumのchrome.tabs APIに基づいています。 このドキュメントは tabs.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.html new file mode 100644 index 0000000000..af56c60bce --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/duplicate/index.html @@ -0,0 +1,98 @@ +--- +title: tabs.duplicate() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/duplicate +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/duplicate +--- +
{{AddonSidebar()}}
+ +

ID で指定されたタブを複製します。

+ +

この関数は Promise を返す非同期関数です。

+ +

構文

+ +
var duplicating = browser.tabs.duplicate(
+  tabId              // integer
+)
+
+ +

パラメータ

+ +
+
tabId
+
integer. 複製するタブのIDを指定します。
+
+ +

戻り値

+ +

A Promise that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing details about the duplicated tab. The Tab object only contains url, title and favIconUrl if the extension has the "tabs" permission. If any error occurs the promise will be rejected with an error message.

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.tabs.duplicate")}}

+ +

例

+ +

１つ目のタブを複製し、新しく作られたタブのIDをログに残す例：

+ +
function onDuplicated(tabInfo) {
+  console.log(tabInfo.id);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+// Duplicate the first tab in the array
+function duplicateFirstTab(tabs) {console.log(tabs);
+  if (tabs.length > 0) {
+    var duplicating = browser.tabs.duplicate(tabs[0].id);
+    duplicating.then(onDuplicated, onError);
+  }
+}
+
+// Query for all open tabs
+var querying = browser.tabs.query({});
+querying.then(duplicateFirstTab, onError);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromiums の chrome.tabs APIに基づいています。 This documentation is derived from tabs.json in the Chromium code.

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.html new file mode 100644 index 0000000000..82e1ee1686 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/executescript/index.html @@ -0,0 +1,176 @@ +--- +title: tabs.executeScript() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/executeScript +tags: + - API + - Add-ons + - Extensions + - Method + - Non-standard + - Reference + - WebExtensions + - executeScript + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/executeScript +--- +
{{AddonSidebar()}}
+ +

JavaScript のコードをページに挿入します。

+ +

コードを挿入できるページの URL は、マッチパターン により指定できます。 つまり、URL の scheme 部は、"http", "https", "file", "ftp" のいずれかでなければなりません。そして、その URL に対する明示的な host パーミッション、または activeTab パーミッションが必要です。

+ +

また、自らの拡張機能パッケージに含まれるページに対してであれば、次の方法でコードを挿入することも可能です。

+ +
browser.tabs.create({url: "/my-page.html"}).then(() => {
+  browser.tabs.executeScript({
+    code: `console.log('location:', window.location.href);`
+  });
+});
+ +

この場合、特別なパーミッションは必要ありません。

+ +

ブラウザーの組込ページ、例えば about:debugging、about:addons、新規タブを開いた時のページなどには、コードを挿入することはできません。

+ +

挿入するスクリプトのことを、コンテンツスクリプトと呼びます。詳細は コンテンツスクリプト で学んでください。

+ +

これは、Promise を返す非同期関数です。

+ +

構文

+ +
var executing = browser.tabs.executeScript(
+  tabId,                 // optional integer
+  details                // object
+)
+
+ +

引数

+ +
+
tabId {{optional_inline}}
+
integer 型。 スクリプトを実行するタブの ID。省略時のデフォルトは、現在のウィンドウでアクティブなタブ。
+
details
+
実行するスクリプトに関するオブジェクト。次のプロパティを持ちます。
+
+
+
allFrames {{optional_inline}}
+
boolean 型。true である場合は、現在のページが持つ全てのフレームにコードが挿入されます。true であり、かつ frameId が設定されている場合はエラーが発生するため、frameId と allFrames は互いに排他的です。false である場合は、最上位のフレームにのみコードが挿入されます。デフォルトは false です。
+
code {{optional_inline}}
+
string 型。挿入されるコードを文字列として表現したもの。注意: このプロパティを使って信頼できないデータを JavaScript に挿入しないでください。セキュリティの問題につながります。
+
file {{optional_inline}}
+
string 型。挿入されるコードを持つファイルへのパス。Firefox では、拡張機能のルートから始まらない相対 URL は、現在のページの URL からの相対位置として解決されます。Chrome では、そのような URL は拡張機能のベース URL からの相対位置として解決されます。複数のブラウザーで動作させるには、拡張機能のルートから始まる相対 URL として指定します。例えば、"/path/to/script.js" のようにします。
+
frameId {{optional_inline}}
+
integer 型。コードが挿入されるフレーム。デフォルトは 0 (最上位のフレーム) です。
+
matchAboutBlank {{optional_inline}}
+
boolean 型。true である場合、コードはその親ドキュメントへのアクセスをもつときに、組込の "about:blank" や "about:srcdoc" フレームにも挿入されます。コードをトップレベルの about: フレームに挿入することはできません。デフォルトは false です。
+
runAt {{optional_inline}}
+
{{WebExtAPIRef('extensionTypes.RunAt')}} 型。コードがどの時点でタブに挿入されるかを指定します。デフォルトは "document_idle" です。
+
+
+
+ +

戻り値

+ +

オブジェクト配列を使って fulfilled 状態にされる Promise です。それぞれのオブジェクトは、フレームに挿入されたスクリプトの結果を表します。

+ +

スクリプトの結果とは最後に評価された文のことです。これは、Webコンソールで実行されたスクリプトの出力 (結果であって、console.log() の出力のことではありません) に似ています。例えば、次のようなスクリプトを挿入したとします。

+ +
var foo='my result';foo;
+ +

この場合、結果配列には、文字列 "my result" が含まれます。結果は、structured clone が可能でなければなりません。最後の文を Promise にすることもできますが、webextension-polyfill ライブラリではサポートされていません。

+ +

エラーが発生した場合、Promise はエラーメッセージを使って rejected 状態にされます。

+ +

使用例

+ +

次の例は、現在アクティブなタブで 1 行のコードスニペットを実行します。

+ +
function onExecuted(result) {
+  console.log(`グリーンにしました`);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var makeItGreen = 'document.body.style.border = "5px solid green"';
+
+var executing = browser.tabs.executeScript({
+  code: makeItGreen
+});
+executing.then(onExecuted, onError);
+ +

次の例は、ファイルからスクリプトを実行します。このファイルは拡張機能のパッケージに含まれており、"content-script.js" という名前です。そのスクリプトは、現在アクティブなタブで実行されますが、メインのドキュメントだけでなく、全てのサブフレームでも実行されます。

+ +
function onExecuted(result) {
+  console.log(`全てのサブフレームで実行しました`);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var executing = browser.tabs.executeScript({
+  file: "/content-script.js",
+  allFrames: true
+});
+executing.then(onExecuted, onError);
+ +

次の例は、ファイルからスクリプトを実行します。このファイルは拡張機能のパッケージに含まれており、"content-script.js" という名前です。そのスクリプトは、ID が 2 であるタブで実行されます。

+ +
function onExecuted(result) {
+  console.log(`タブ 2 で実行しました`);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var executing = browser.tabs.executeScript(
+  2, {
+    file: "/content-script.js"
+});
+executing.then(onExecuted, onError);
+ +

{{WebExtExamples}}

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.tabs.executeScript")}}

+ +
謝辞 + +

この API は Chromium の chrome.tabs API に基づいています。このドキュメントは tabs.json における Chromium のコードに基づいています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.html new file mode 100644 index 0000000000..767b11173d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/get/index.html @@ -0,0 +1,87 @@ +--- +title: tabs.get() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/get +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/get +--- +
{{AddonSidebar()}}
+ +

タブのIDを指定し、{{WebExtAPIRef("tabs.Tab")}}オブジェクトとしてタブの詳細を取得します。

+ +

これはPromiseを返す非同期関数です。

+ +

Syntax

+ +
var getting = browser.tabs.get(
+  tabId              // integer
+)
+
+ +

Parameters

+ +
+
tabId
+
integer. 取得するタブのID。
+
+ +

Return value

+ +

A Promise that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing information about the tab. If the tab could not be found or some other error occurs, the promise will be rejected with an error message.

+ +

Examples

+ +

タブがアクティブなとき、情報を取得します:

+ +
async function logListener(info) {
+  try {
+    let tabInfo = await browser.tabs.get(info.tabId);
+    console.log(tabInfo);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+browser.tabs.onActivated.addListener(logListener);
+ +

{{WebExtExamples}}

+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.tabs.get")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.tabs API. This documentation is derived from tabs.json in the Chromium code.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/index.html new file mode 100644 index 0000000000..40f6ced315 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/index.html @@ -0,0 +1,215 @@ +--- +title: tabs +slug: Mozilla/Add-ons/WebExtensions/API/tabs +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - tabs + - タブ +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs +--- +
{{AddonSidebar}}
+ +

ブラウザーのタブシステムとやりとりします。

+ +

この API を使って開いているタブの一覧を取得したり、いろいろな条件でフィルターしたり、タブを開き、更新し、移動し、再読み込みし、削除できます。この API ではタブのコンテンツに直接アクセスできませんが、JavaScript と CSS をタブに挿入することは、{{WebExtAPIRef("tabs.executeScript()")}} や {{WebExtAPIRef("tabs.insertCSS()")}} API を使ってできます。

+ +

この API の大半の使用に特別なパーミッションは要りませんが:

+ + + +

あるいは、これらのパーミッションを一時的に取得することもできますが、それは現在アクティブなタブで明示的なユーザーアクションへの応答する場合のみで、"activeTab" パーミッションを要求することで可能です。

+ +

タブ操作の多くはタブ ID を使います。タブ ID はブラウザーセッションの単一のタブごとにユニークである保証がされています。ブラウザーが再起動したら、タブ ID を再利用できて、実際そうします。ブラウザーの再起動をまたいでタブ情報を関連づけるには {{WebExtAPIRef("sessions.setTabValue()")}} を使います。

+ +

型

+ +
+
{{WebExtAPIRef("tabs.MutedInfoReason")}}
+
タブがミュートされている、またはミュートが解除されている理由を示す。
+
{{WebExtAPIRef("tabs.MutedInfo")}}
+
タブがミュートされているかを示す真理値と、最後の変更の理由からなるオブジェクト。
+
{{WebExtAPIRef("tabs.PageSettings")}}
+
+

tabs.saveAsPDF()メソッドにおいて、どのように PDF を描画するかを制御する。

+
+
{{WebExtAPIRef("tabs.Tab")}}
+
タブについての情報を含む。
+
{{WebExtAPIRef("tabs.TabStatus")}}
+
タブの読み込み状況を示す。
+
{{WebExtAPIRef("tabs.WindowType")}}
+
タブを所有しているウィンドウのタイプを示す。
+
{{WebExtAPIRef("tabs.ZoomSettingsMode")}}
+
ズームがブラウザーによるものか、拡張機能によるものか、またはズームが許可されていないのかを示す。
+
{{WebExtAPIRef("tabs.ZoomSettingsScope")}}
+
あるページのズームが、同一生成元の別ページにも適用されるか、タブ内でのみかを示す。
+
{{WebExtAPIRef("tabs.ZoomSettings")}}
+
ズーム設定{{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}, {{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}}とデフォルトのズーム要因を示す。
+
+ +

プロパティ

+ +
+
{{WebExtAPIRef("tabs.TAB_ID_NONE")}}
+
ブラウザーのタブでないタブに対する特殊な ID（Windows の開発ツールなど）。
+
+ +

関数

+ +
+
{{WebExtAPIRef("tabs.captureTab()")}}
+
あるタブの可視エリアの画像をエンコードしたデータURIを作成します。
+
{{WebExtAPIRef("tabs.captureVisibleTab()")}}
+
特定のウィンドウのアクティブなタブの可視エリアの画像をエンコードしたデータURI を作成します。
+
{{WebExtAPIRef("tabs.connect()")}}
+
あるタブにおいて、バックグラウンドスクリプト（またはその他ポップアップやオプションページのスクリプトなど特権スクリプト）と content scripts 間でのメッセージのやり取り用の経路を確保します。
+
{{WebExtAPIRef("tabs.create()")}}
+
新しいタブを作る。
+
{{WebExtAPIRef("tabs.detectLanguage()")}}
+
タブのコンテンツの言語を検出する
+
{{WebExtAPIRef("tabs.discard()")}}
+
1つ以上のタブを破棄する。
+
{{WebExtAPIRef("tabs.duplicate()")}}
+
タブを複製する。
+
{{WebExtAPIRef("tabs.executeScript()")}}
+
ページに JavaScript コードを挿入する。
+
{{WebExtAPIRef("tabs.get()")}}
+
特定のタブについて情報を取り出す。
+
{{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}
+
特定のウィンドウ内のすべてのタブについての情報を取り出す。
+
{{WebExtAPIRef("tabs.getCurrent()")}}
+
スクリプトが実行されているタブについての情報を tabs.Tab オブジェクトとして取り出す。
+
{{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}
+
あるウィンドウにおいてタブが選択されているかを得る。
+
{{WebExtAPIRef("tabs.getZoom()")}}
+
あるタブについてズーム要因を得る。
+
{{WebExtAPIRef("tabs.getZoomSettings()")}}
+
あるタブについてズーム設定を得る。
+
{{WebExtAPIRef("tabs.goForward()")}}
+
可能な場合、次のページへ進む。
+
{{WebExtAPIRef("tabs.goBack()")}}
+
可能な場合、前のページへ戻る。
+
{{WebExtAPIRef("tabs.hide()")}} {{experimental_inline}}
+
1つ以上のタブを隠す。
+
{{WebExtAPIRef("tabs.highlight()")}}
+
1 つ以上のタブをハイライトする。
+
{{WebExtAPIRef("tabs.insertCSS()")}}
+
CSS をページに挿入する。
+
{{WebExtAPIRef("tabs.move()")}}
+
2 つ以上のタブを同じ、あるいは異なるウィンドウの任意のポジションへ移動させる。
+
{{WebExtApiRef("tabs.moveInSuccession()")}}
+
タブグループの継承関係を編集する。
+
{{WebExtAPIRef("tabs.print()")}}
+
開いているタブのコンテンツを印刷する。
+
{{WebExtAPIRef("tabs.printPreview()")}}
+
+
開いているタブの印刷プレビューを開く。
+
+
{{WebExtAPIRef("tabs.query()")}}
+
特定のプロパティを持つすべてのタブ、またはプロパティが指定されなければすべてのタブを取得します。
+
{{WebExtAPIRef("tabs.reload()")}}
+
タブをリロードする。キャッシュを回避することもできる。
+
{{WebExtAPIRef("tabs.remove()")}}
+
１つ以上のタブを閉じる。
+
{{WebExtAPIRef("tabs.removeCSS()")}}
+
以前に{{WebExtAPIRef("tabs.insertCSS()")}}を呼び出して挿入されているCSSを削除する。
+
{{WebExtAPIRef("tabs.saveAsPDF()")}}
+
現在のページを PDF として保存する。
+
{{WebExtAPIRef("tabs.sendMessage()")}}
+
あるタブのコンテンツスクリプトへ、１つのメッセージを送信する。
+
{{WebExtAPIRef("tabs.sendRequest()")}} {{deprecated_inline}}
+
あるタブのコンテンツスクリプトへ、単一のリクエストを送信する。非推奨: 代わりに {{WebExtAPIRef("tabs.sendMessage()")}} を使用してください。
+
{{WebExtAPIRef("tabs.setZoom()")}}
+
あるタブをズームする。
+
{{WebExtAPIRef("tabs.setZoomSettings()")}}
+
あるタブについてズーム設定をする。
+
{{WebExtAPIRef("tabs.show()")}} {{experimental_inline}}
+
{{WebExtAPIRef("tabs.hide()", "hidden")}}で隠されたタブを表示する。
+
{{WebExtAPIRef("tabs.toggleReaderMode()")}}
+
あるタブについてのリーダーモードへのトグル。
+
{{WebExtAPIRef("tabs.update()")}}
+
新しい URL に案内、もしくはタブの他のプロパティを修正する。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("tabs.onActivated")}}
+
ウィンドウ内でアクティブなタブが変わったときに発火。このイベントが発火した段階ではまだタブの URL はセットされているとは限らない。
+
{{WebExtAPIRef("tabs.onActiveChanged")}} {{deprecated_inline}}
+
ウィンドウの中の選択されたタブが変更されたときに発火。非推奨: 代わりに{{WebExtAPIRef("tabs.onActivated")}}を利用してください。
+
{{WebExtAPIRef("tabs.onAttached")}}
+
タブがウィンドウに引っ付けられたとき、例えばウィンドウ間で移動されたときに発火。
+
{{WebExtAPIRef("tabs.onCreated")}}
+
タブが作られたときに発火。このイベントが発火した段階ではまだタブの URL はセットされているとは限らない。
+
{{WebExtAPIRef("tabs.onDetached")}}
+
タブがウィンドウから切り離されたときに発火。例えば、ウィンドウのない場所へタブを移動させたときなど。
+
{{WebExtAPIRef("tabs.onHighlightChanged")}} {{deprecated_inline}}
+
ウィンドウ内でハイライトまたは選択されたタブが変更したときに発火。非推奨: 代わりに{{WebExtAPIRef("tabs.onHighlighted")}}を使用してください。
+
{{WebExtAPIRef("tabs.onHighlighted")}}
+
ウィンドウ内でハイライトまたは選択されたタブが変更したときに発火。
+
{{WebExtAPIRef("tabs.onMoved")}}
+
ウィンドウ内にタブが移動したときに発火する。
+
{{WebExtAPIRef("tabs.onRemoved")}}
+
タブが閉じられたときに発火する。
+
{{WebExtAPIRef("tabs.onReplaced")}}
+
プリレンダリングによってタブが他のタブに置き換えられたときに発火。
+
{{WebExtAPIRef("tabs.onSelectionChanged")}} {{deprecated_inline}}
+
ウィンドウ内で選択されているタブが変わったときに発火。非推奨: 代わりに{{WebExtAPIRef("tabs.onActivated")}}を使用してください。
+
{{WebExtAPIRef("tabs.onUpdated")}}
+
タブが更新されたときに発火する。
+
{{WebExtAPIRef("tabs.onZoomChange")}}
+
タブがズームされたときに発火する。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.tabs")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.tabs API. This documentation is derived from tabs.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.html new file mode 100644 index 0000000000..7d70c895e8 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinfo/index.html @@ -0,0 +1,67 @@ +--- +title: tabs.MutedInfo +slug: Mozilla/Add-ons/WebExtensions/API/tabs/MutedInfo +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/MutedInfo +--- +
{{AddonSidebar()}}
+ +

This object contains a boolean indicating whether the tab is muted, and the reason for the last state change.

+ +

型

+ +

値の型はオブジェクトです。次のプロパティを含みます:

+ +
+
extensionId{{optional_inline}}
+
string. ミュートの状態を最後に変更した拡張機能のIDです。もし拡張機能がミュートの状態の最後の変更の理由でないなら設定されません。
+
muted
+
boolean. タブが現在ミュートかどうか。Equivalent to whether the muted audio indicator is showing.
+
reason{{optional_inline}}
+
{{WebExtAPIRef('tabs.MutedInfoReason')}}. ミュートもしくはアンピューとに設定された理由。Not set if the tab's muted state has never been changed.
+
+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.tabs.MutedInfo")}}

+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.tabs API. This documentation is derived from tabs.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.html new file mode 100644 index 0000000000..3a838233b6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/mutedinforeason/index.html @@ -0,0 +1,67 @@ +--- +title: tabs.MutedInfoReason +slug: Mozilla/Add-ons/WebExtensions/API/tabs/MutedInfoReason +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/MutedInfoReason +--- +
{{AddonSidebar()}}
+ +

タブがミュート・アンミュートになった理由を指定します。

+ +

型

+ +

値のタイプは文字列型です。可能な値:

+ +
+
"capture"
+
タブのキャプチャが開始され、ミュート状態に強いられました。
+
"extension"
+
拡張機能がミュート状態に設定しました。もしこれが理由なら、{{WebExtAPIRef("tabs.mutedInfo")}}のextensionIdが責任のある拡張機能のIDを含んでいます。
+
"user"
+
ユーザがミュート状態に設定しました。
+
+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.tabs.MutedInfoReason")}}

+ +

{{WebExtExamples}}

+ +
謝辞 + +

このAPIはChromiumのchrome.tabs APIに基づいています。このドキュメントはChromiumコードのtabs.jsonから派生したものです。

+ +

Microsoft Edgeの互換性データはMicrosoft Corporationから提供されており、Creative Commons Attribution 3.0 United States Licenseのもとにここに含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/oncreated/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/oncreated/index.html new file mode 100644 index 0000000000..2113436fa6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/oncreated/index.html @@ -0,0 +1,100 @@ +--- +title: tabs.onCreated +slug: Mozilla/Add-ons/WebExtensions/API/tabs/onCreated +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/onCreated +--- +
{{AddonSidebar()}}
+ +

タブが生成されたときに発火します。

+ +

イベントが発火したとき、タブはURLを渡されていないかもしれないことに注意してください。特に、Firefoxは新しいページを読み込み前に新しいタブを"about:blank"で開きます。URLがセットされたときを通知されるために{{WebExtAPIRef("tabs.onUpdated")}}イベントをリッスンすることができます。

+ +

書式

+ +
browser.tabs.onCreated.addListener(callback)
+browser.tabs.onCreated.removeListener(listener)
+browser.tabs.onCreated.hasListener(listener)
+
+ +

イベントは３つの関数を持ちます:

+ +
+
addListener(callback)
+
このイベントにリスナーを追加します。
+
removeListener(listener)
+
このイベントのリスニングを停止します。引数listenerは削除するリスナーです。
+
hasListener(listener)
+
listenerがこのイベントに登録されているかを調べます。リスニング中であればtrueを返し、そうでなければfalseを返します
+
+ +

addListenerの書式

+ +

パラメータ

+ +
+
callback
+
+

このイベントが発生したときに呼び出される関数です。関数は次の引数を渡されます:

+ +
+
tab
+
{{WebExtAPIRef('tabs.Tab')}}。生成されたタブの詳細です。
+
+
+
+ +

例

+ +

新しく作られたタブのログを生成します:

+ +
function handleCreated(tab) {
+  console.log(tab.id);
+}
+
+browser.tabs.onCreated.addListener(handleCreated);
+ +

{{WebExtExamples}}

+ +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.tabs.onCreated")}}

+ +
謝辞 + +

このAPIはChromiumのchrome.tabs APIに基づいています。このドキュメンテーションはChromium codeの中のtabs.jsonからの派生です。

+ +

Microsoft Edgeの互換性データはMicrosoft Corporationから提供されており、ここにthe Creative Commons Attribution 3.0 United States Licenseのもとで含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/query/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/query/index.html new file mode 100644 index 0000000000..9b8dfc5a2a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/query/index.html @@ -0,0 +1,216 @@ +--- +title: tabs.query() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/query +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/query +--- +
{{AddonSidebar()}}
+ +

指定されたプロパティを持つ全てのタブを取得します。何も指定しない場合、全てのタブを取得します。

+ +

この関数は Promise を返す非同期関数です。

+ +

構文

+ +
var querying = browser.tabs.query(
+  queryInfo             // object
+)
+
+ +

パラメータ

+ +
+
queryInfo
+
object. query() 関数はここで指定されたプロパティにマッチするタブだけを取得します。 このプロパティについての詳細は {{WebExtAPIRef("tabs.Tab")}} を参照してください。
+
+
+
active{{optional_inline}}
+
boolean. 各ウインドウの中でアクティブかどうか。
+
audible{{optional_inline}}
+
boolean. 音が鳴っているか。
+
autoDiscardable{{optional_inline}}
+
boolean. リソースが少なくなったときにブラウザーによって自動的にdiscardできるか。
+
cookieStoreId {{optional_inline}}
+
string. CookieストアのIDが cookieStoreId なタブのみを返すために使います。このオプションは "cookies" permissionを持つ拡張でのみ使用できます。
+
currentWindow{{optional_inline}}
+
boolean. カレントウインドウの中のタブか。
+
discarded{{optional_inline}}
+
boolean. タブがdiscardされているか。 discardされたタブはコンテンツがメモリからアンロードされているが、タブの一覧には表示されたままになります。コンテンツはタブが次にアクティブになったときにリロードされます。
+
highlighted{{optional_inline}}
+
boolean. ハイライトされているか。
+
index{{optional_inline}}
+
integer. ウィンドウの中での位置。
+
muted{{optional_inline}}
+
boolean. ミュートされているか。
+
lastFocusedWindow{{optional_inline}}
+
boolean. 最後にフォーカスされたウインドウのタブか。
+
openerTabId{{optional_inline}}
+
integer. そのタブを開いたタブのID。
+
pinned{{optional_inline}}
+
boolean. ピン留めされているか。
+
status{{optional_inline}}
+
{{WebExtAPIRef('tabs.TabStatus')}}. ロードが完了しているか。
+
title{{optional_inline}}
+
string. ページのタイトル。
+
url{{optional_inline}}
+
string もしくは array of string. 1つ以上のマッチパターンにマッチするタブか。フラグメント識別子にはマッチしません。
+
windowId{{optional_inline}}
+
integer. そのウインドウのID。カレントウインドウの場合は、 {{WebExtAPIRef('windows.WINDOW_ID_CURRENT')}} 。
+
windowType{{optional_inline}}
+
{{WebExtAPIRef('tabs.WindowType')}}. そのタブの属するウインドウの種類。
+
+
+
+ +

戻り値

+ +

マッチしたタブの情報を持つ {{WebExtAPIRef('tabs.Tab')}} オブジェクトの array に解決される Promise。

+ +

エラーが発生した場合、その Promise はエラーメッセージとともに却下されます。

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.tabs.query", 10)}}

+ +

例

+ +

全てのタブを取得する例：

+ +
function logTabs(tabs) {
+  for (let tab of tabs) {
+    // tab.url requires the `tabs` permission
+    console.log(tab.url);
+  }
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var querying = browser.tabs.query({});
+querying.then(logTabs, onError);
+ +

カレントウインドウの全てのタブを取得する例：

+ +
function logTabs(tabs) {
+  for (let tab of tabs) {
+    // tab.url requires the `tabs` permission
+    console.log(tab.url);
+  }
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var querying = browser.tabs.query({currentWindow: true});
+querying.then(logTabs, onError);
+ +

カレントウインドウのアクティブなタブを取得する例：

+ +
function logTabs(tabs) {
+  for (let tab of tabs) {
+    // tab.url requires the `tabs` permission
+    console.log(tab.url);
+  }
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var querying = browser.tabs.query({currentWindow: true, active: true});
+querying.then(logTabs, onError);
+ +

"mozilla.org" またはそのサブドメイン下のHTTP/HTTPS URLを開いている全てのタブを取得する例：

+ +
function logTabs(tabs) {
+  for (let tab of tabs) {
+    // tab.url requires the `tabs` permission
+    console.log(tab.url);
+  }
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var querying = browser.tabs.query({url: "*://*.mozilla.org/*"});
+querying.then(logTabs, onError);
+ +

moz-extension:// URLを開いている全てのタブを取得する例：

+ +
function logTabs(tabs) {
+  console.log(tabs);
+  for (let tab of tabs) {
+    // tab.url requires the `tabs` permission
+    console.log(tab.url);
+  }
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var querying = browser.tabs.query({url: "moz-extension://*/*"});
+querying.then(logTabs, onError);
+
+ +

この拡張機能のURLを開いている全てのタブを取得する例：

+ +
function logTabs(tabs) {
+  console.log(tabs);
+  for (let tab of tabs) {
+    // tab.url requires the `tabs` permission
+    console.log(tab.url);
+  }
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var querying = browser.tabs.query({url: browser.extension.getURL("*")});
+querying.then(logTabs, onError);
+
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

この API は Chromium の chrome.tabs APIに基づいています。 This documentation is derived from tabs.json in the Chromium code.

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.html new file mode 100644 index 0000000000..16c3419265 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/remove/index.html @@ -0,0 +1,102 @@ +--- +title: tabs.remove() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/remove +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/remove +--- +
{{AddonSidebar()}}
+ +

１つ以上のタブを閉じます。

+ +

この関数は Promise を返す非同期関数です。

+ +

構文

+ +
var removing = browser.tabs.remove(
+  tabIds          // integer or integer array
+)
+
+ +

パラメータ

+ +
+
tabIds
+
integer または array of integer. 閉じるタブのIDを指定します。
+
+ +

戻り値

+ +

A Promise that will be fulfilled with no arguments when all the specified tabs have been removed or their beforeunload prompts have been handled. If any error occurs, the promise will be rejected with an error message.

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.api.tabs.remove")}}

+ +

例

+ +

タブを１つだけ閉じる場合：

+ +
function onRemoved() {
+  console.log(`Removed`);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var removing = browser.tabs.remove(2);
+removing.then(onRemoved, onError);
+ +

複数のタブを閉じる場合：

+ +
function onRemoved() {
+  console.log(`Removed`);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+var removing = browser.tabs.remove([15, 14, 1]);
+removing.then(onRemoved, onError);
+ +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.tabs APIに基づいています。 This documentation is derived from tabs.json in the Chromium code.

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.html b/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.html new file mode 100644 index 0000000000..fcab149353 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/tabs/tab/index.html @@ -0,0 +1,128 @@ +--- +title: tabs.Tab +slug: Mozilla/Add-ons/WebExtensions/API/tabs/Tab +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/Tab +--- +
{{AddonSidebar()}}
+ +

tabs.Tab型はタブについての情報を含んでいます。これはタブの中のコンテンツについての情報へのアクセスを提供します。例えば、コンテンツはどれくらいの大きさか、どのような特別な状態もしくは制限が有効になっているか、など。

+ +

Type

+ +

この型の値はオブジェクトです。以下のプロパティを含みます:

+ +
+
active
+
+

boolean. タブがウィンドウ内でアクティブかどうかを示します。タブのウィンドウがフォーカスされていない場合でも当てはまります。

+ +

アクティブなタブは通常一つ検出されます。しかしながら、Firefox for Android上では、拡張機能のポップアップが新しいタブの中で開かれます。このポップアップタブが検出されたとき、アクティブなタブはポップアップが開かれたタブに代えられます。

+
+
attention {{optional_inline}}
+
boolean. タブが注目を集めているかを示します。例えば、タブがモーダルダイアログを表示したとき、attentionはtrueになります。
+
audible {{optional_inline}}
+
boolean. タブがミュートではないとき: タブが音を作り出すかどうかです。タブがミュートであるとき: タブがミュートでないなら、音を作り出せたかどうかです。
+
autoDiscardable {{optional_inline}}
+
boolean. Whether the tab can be discarded automatically by the browser when resources are low.
+
cookieStoreId {{optional_inline}}
+
string. タブのクッキーストア。If different tabs can have different cookie stores (for example, to support contextual identity), you can pass this as the storeId option into various methods of the {{WebExtAPIRef("cookies")}} API, to set and get cookies associated with this tab's cookie store. Only present if the extension has the "cookies" permission.
+
discarded {{optional_inline}}
+
boolean. タブが破棄されたか。 A discarded tab is one whose content has been unloaded from memory, but is still visible in the tab strip. Its content gets reloaded the next time it's activated.
+
favIconUrl {{optional_inline}}
+
string. タブのfaviconのURL。Only present if the extension has the "tabs" permission. It may also be an empty string if the tab is loading.
+
height {{optional_inline}}
+
integer. タブの高さのピクセル値。
+
hidden
+
boolean. タブが隠されている(非表示)かどうか。
+
highlighted
+
+

boolean. タブがハイライトされているかどうかどうか。 An active tab is always highlighted, but some browsers may allow additional tabs to be highlighted, for example by clicking them while holding Ctrl or ⌘ Command keys.

+ +

Firefox for Android doesn't support highlighting multiple tabs, and Firefox desktop requires the browser.tabs.multiselect preference.

+
+
id {{optional_inline}}
+
integer. タブのID。 タブのIDはブラウザセッショの中でユニークです。The tab ID may also be set to {{WebExtAPIRef('tabs.TAB_ID_NONE')}} for browser windows that don't host content tabs (for example, devtools windows).
+
incognito
+
boolean. タブがプライベートブラウジングウィンドウの中にあるかどうか。
+
index
+
integer. 0を底としたウィンドウの中のタブのインデックス。
+
isArticle
+
boolean. Trueならrendered in Reader Modeで閲覧可能、falseならそれ以外。
+
isInReaderMode
+
boolean. Trueならrendered in Reader Modeで閲覧中、falseならそれ以外。
+
lastAccessed
+
double. タブが最後にアクセスされた時刻(単位: milliseconds since the epoch)。
+
mutedInfo {{optional_inline}}
+
{{WebExtAPIRef('tabs.MutedInfo')}}. The current muted state for the tab and the reason for the last state change.
+
openerTabId {{optional_inline}}
+
integer. The ID of the tab that opened this tab, if any. This property is only present if the opener tab still exists.
+
pinned
+
boolean. タブがピン留めされているかどうか。
+
selected {{deprecated_inline}}
+
boolean. タブが選択されているかどうか。
+
sessionId {{optional_inline}}
+
string. The session ID used to uniquely identify a Tab obtained from the {{WebExtAPIRef('sessions')}} API.
+
status {{optional_inline}}
+
string. loading か complete のどちらか。
+
successorId {{optional_inline}}
+
integer タブの後継者のID。
+
title {{optional_inline}}
+
string. タブのタイトル。Only present if the extension has the "tabs" permission.
+
url {{optional_inline}}
+
string. タブが表示しているドキュメントのURL。Only present if the extension has the "tabs" permission.
+
width {{optional_inline}}
+
integer. タブの横幅のピクセル値。
+
windowId
+
integer. このタブのホストのウィンドウのID。
+
+
+

Note: In extension background scripts, the only properties that are available are tabId and windowId.

+
+
+
+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.tabs.Tab", 10)}}

+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.tabs API. This documentation is derived from tabs.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/theme/index.html b/files/ja/mozilla/add-ons/webextensions/api/theme/index.html new file mode 100644 index 0000000000..a2b90cb140 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/theme/index.html @@ -0,0 +1,50 @@ +--- +title: theme +slug: Mozilla/Add-ons/WebExtensions/API/theme +tags: + - Extensions + - Themes + - WebExtensions + - add-on +translation_of: Mozilla/Add-ons/WebExtensions/API/theme +--- +
{{AddonSidebar}}
+ +

ブラウザー拡張機能がブラウザーのテーマを更新できるようにします。

+ +

この API を使用するには、拡張機能の manifest.json ファイルで "theme" パーミッション を要求しなければなりません。

+ +
+

注記: バックグランドファイルでテーマをセットアップする場合、'theme' パーミッションを宣言しなければなりません。さもなければ、manifest の theme 関数を使用できません。

+
+ +

型

+ +
+
{{WebExtAPIRef("theme.Theme")}}
+
テーマのコンテンツを表します。
+
+ +

関数

+ +
+
{{WebExtAPIRef("theme.getCurrent()")}}
+
現在のブラウザーテーマを取得します。
+
{{WebExtAPIRef("theme.update()")}}
+
ブラウザーのテーマを更新します。
+
{{WebExtAPIRef("theme.reset()")}}
+
{{WebExtAPIRef("theme.update()")}} の呼び出しで更新されたテーマをすべて削除します。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("theme.onUpdated")}}
+
ブラウザーテーマが変更された時に発火。
+
+ +

ブラウザーの実装状況

+ +

{{Compat("webextensions.api.theme")}}

+ +

{{WebExtExamples("h2")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/api/topsites/index.html b/files/ja/mozilla/add-ons/webextensions/api/topsites/index.html new file mode 100644 index 0000000000..5ee5e4386f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/topsites/index.html @@ -0,0 +1,79 @@ +--- +title: topSites +slug: Mozilla/Add-ons/WebExtensions/API/topSites +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - topSites +translation_of: Mozilla/Add-ons/WebExtensions/API/topSites +--- +
{{AddonSidebar}}
+ +

topSites API を使うと、ユーザーがよく訪れるページをを含む配列を取得できます。

+ +

ブラウザーはユーザーがこれらの場所に簡単に戻れるようにこれを維持します。Firefoxでは既定で「新しいタブ」ページには最もよく訪れるページのリストが提供されます。

+ +

topSites API を使うには "topSites" の API パーミッション必要です。

+ +

型

+ +
+
{{WebExtAPIRef("topSites.MostVisitedURL")}}
+
ウェブサイトのタイトルと URLを含むオブジェクト。
+
+ +

Methods

+ +
+
{{WebExtAPIRef("topSites.get()")}}
+
ブラウザーの「新しいタブ」ページに載っているすべてのサイトの配列を取得します。ここで返されるサイトの数はブラウザー固有であり、返されるサイトは、ブラウザー履歴に基づいてユーザー固有であることに注意してください。
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.topSites")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.topSites API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/types/index.html b/files/ja/mozilla/add-ons/webextensions/api/types/index.html new file mode 100644 index 0000000000..939451faf1 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/types/index.html @@ -0,0 +1,64 @@ +--- +title: types +slug: Mozilla/Add-ons/WebExtensions/API/types +tags: + - API + - Add-ons + - Extensions + - Reference + - Types + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/types +--- +
{{AddonSidebar}}
+ +

ブラウザー設定を表すのに使われる BrowserSetting 型を定義します。

+ +

型

+ +
+
{{WebExtAPIRef("types.BrowserSetting")}}
+
ブラウザー設定を表現します。
+
+ +

ブラウザー実装状況

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.types API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.html b/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.html new file mode 100644 index 0000000000..4edae83299 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/webnavigation/index.html @@ -0,0 +1,143 @@ +--- +title: webNavigation +slug: Mozilla/Add-ons/WebExtensions/API/webNavigation +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - webNavigation +translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation +--- +
{{AddonSidebar}}
+ +

ナビゲーションのいろいろな段階でイベントリスナーを追加します。ナビゲーションにはある URL から他に移動するブラウザーフレームにより成り立っていて、それは(いつもではなく)通常はリンクのクリックやロケーションバーへの URL 入力といったユーザー操作の応答として発生します。

+ +

{{WebExtAPIRef("webRequest")}} API と比較して: ナビゲーションは通常、ブラウザーにウェブリクエストを発生させますが、webRequest API は HTTP 層からの低レベルな観点に関心を持っており、一方で webNavigation API はブラウザー UI 自身に対して、より関心を持っています。

+ +

それぞれのイベントはナビゲーションの特定のステージに対応しています。イベントシーケンスは次の通りです:

+ +

+ + + +

それぞれのナビゲーションは特定のブラウザーフレーム内の URL の遷移です。ブラウザーフレームはタブ ID とフレーム ID で識別されます。フレームはタブ内の再上位のブラウジングコンテキストである場合や、iframe として実装されたネストされたブラウジングコンテキストである場合があります。

+ +

それぞれのイベントの addListener() の呼び出しはオプションの filter パラメーターを受け入れます。filter は 1 つ以上の URL パターンを指定し、イベントはターゲット URL がパターンにマッチしたナビゲーションの時だけに発火します。

+ +

onCommitted イベントリスナーには 2 つの追加プロパティが渡されます: ナビゲーションの原因 (例えばユーザーがリンクをクリックしたり、ユーザーがブックマークを選んだり) を示す{{WebExtAPIRef("webNavigation.TransitionType","TransitionType")}} と、ナビゲーションの詳細情報を提供する{{WebExtAPIRef("webNavigation.TransitionQualifier","TransitionQualifier")}} です。

+ +

この API を使うには"webNavigation" パーミッションが必要です。

+ +

型

+ +
+
{{WebExtAPIRef("webNavigation.TransitionType")}}
+
ナビゲーションの原因: 例えば、ユーザーがリンクをクリックしたり、アドレスを入力したり、ブックマークをクリックしたりなど。
+
{{WebExtAPIRef("webNavigation.TransitionQualifier")}}
+
+
遷移の追加情報
+
+
+ +

関数

+ +
+
{{WebExtAPIRef("webNavigation.getFrame()")}}
+
特定フレームについての情報を取得します。フレームにはタブ内のトップレベルのフレームや、ネストされた iframe であり、タブ ID とフレーム ID でユニークに識別されます。
+
{{WebExtAPIRef("webNavigation.getAllFrames()")}}
+
+

タブ ID を指定すると、そのタブに含まれているすべてのフレームの情報を取得します。

+
+
+ +

イベント

+ +
+
{{WebExtAPIRef("webNavigation.onBeforeNavigate")}}
+
+

ブラウザーがナビゲーションイベントを開始する直前に発火します。

+
+
{{WebExtAPIRef("webNavigation.onCommitted")}}
+
ナビゲーションがコミットされたときに発火します。少なくともサーバーから新しい document がいくらか取得されてブラウザーが新document に切り替えると決決めたとき。
+
{{WebExtAPIRef("webNavigation.onDOMContentLoaded")}}
+
ページ内で DOMContentLoaded イベントが発火したときに発火します。
+
{{WebExtAPIRef("webNavigation.onCompleted")}}
+
document と、それが参照するリソースが完全にロードされて初期化されたときに発火します。これは DOM load イベントと等価です。
+
{{WebExtAPIRef("webNavigation.onErrorOccurred")}}
+
エラーが起こってナビゲーションが停止したときに発火します。これはネットワークエラーが起きたときや、ユーザーがナビゲーションを停止したときのいずれかで起こりえます。
+
{{WebExtAPIRef("webNavigation.onCreatedNavigationTarget")}}
+
新しいウィンドウや、既存のウィンドウ内の新規タブが作成されてナビゲーションをホストするときに発火します: 例えば、ユーザーが新しいタブでリンクを開いた場合。
+
{{WebExtAPIRef("webNavigation.onReferenceFragmentUpdated")}}
+
ページの fragment identifier が変化したときに発火します。
+
{{WebExtAPIRef("webNavigation.onTabReplaced")}}
+
+

タブのコンテンツが別のタブ (通常は以前レンダリング済みのもの) に置き換えられるときに発火します。

+
+
{{WebExtAPIRef("webNavigation.onHistoryStateUpdated")}}
+
ページで history API を使ってブラウザーのロケーションバーの URL が更新されたときに発火します。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.webNavigation")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.webNavigation API. This documentation is derived from web_navigation.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.html b/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.html new file mode 100644 index 0000000000..0495dcb7cf --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/webrequest/index.html @@ -0,0 +1,200 @@ +--- +title: webRequest +slug: Mozilla/Add-ons/WebExtensions/API/webRequest +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - webRequest +translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest +--- +
{{AddonSidebar}}
+ +

websocket が ws:// and wss:// としてリクエストするものも含めた、HTTP リクエスト作成のいろいろなステージでイベントリスナーを追加します。イベントリスナーはリクエストの詳細情報を受け取ったり、リクエストを編集、修正したりします。

+ +

それぞれのイベントはリクエストの特定ステージで発火します。イベントの典型的なシーケンスは次のようなものです:

+ +

+ +

{{WebExtAPIRef("webRequest.onErrorOccurred", "onErrorOccurred")}} はリクエストの期間中のあらゆる時に発火します。また注意点としてイベントシーケンスがこれと違うこともあります: 例えば、Firefox では、HSTS 更新の時には、onBeforeRequest のすぐ後に onBeforeRedirect イベントが発火します。

+ +

onErrorOccurred を除くすべてのイベントは addListener() への次の 3 つの引数を取ります:

+ + + +

リスナー関数はリクエストの情報を含む details オブジェクトを渡されます。これにはリクエスト ID が入っていて、その ID でアドオンは単一のリクエストとイベントを関連付けられます。これはブラウザーセッションとアドオンのコンテキストごとにユニークです。リダイレクトと認証交換であっても、リクエストを通じて同じ値を保ちます。

+ +

あるホストに webRequest API を使うには、拡張機能は "webRequest" API パーミッション とそのホストの host パーミッション を持たねばなりません。「ブロッキング」機能を使うためには、拡張機能は "webRequestBlocking" API 権限も必要です。

+ +

ページに読み込まれるリソース (例えば画像、スクリプト、スタイルシート) を中断するには、拡張機能はそのメインページと同様にリソースの host パーミッションも持っている必要があります。例えば、"https://developer.mozilla.org" のページが "https://mdn.mozillademos.org" から画像を読み込む場合、画像のリクエストを中断するには拡張機能は両方の host パーミッションを持たねばなりません。

+ +

リクエストを修正する

+ +

いくつかのイベントでは、リクエストを修正できます。特に、次のことが可能:

+ + + +

これを行うには、イベント addListener() の extraInfoSpec の引数に"blocking"の値のオプションを渡す必要があります。これによりリスナーが同期します。このリスナーでは {{WebExtAPIRef("webRequest.BlockingResponse", "BlockingResponse")}} オブジェクトを返すことができ、このオブジェクトは加えた修正を指し示します: 例えば、送信したい修正後のリクエストヘッダーなど。

+ +
+

Warning: Non-HTTP(S) protocols do not currently support "blocking" functionality, so modifying these requests is not available at this time. See {{bug(1475832)}} for more details.

+
+ +

セキュリティ情報へのアクセス

+ +

{{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}} リスナー内では、{{WebExtAPIRef("webRequest.getSecurityInfo()", "getSecurityInfo()")}} を呼ぶことで TLS にアクセスできます。これを行うには、イベントの addListener() の extraInfoSpec 引数に"blocking" を渡す必要もあります。

+ +

TLS ハンドシェイクについて詳しく読むことができますが、修正したり、ブラウザーのトラストな決定を上書きできません。

+ +

レスポンスを修正する

+ +

{{WebExtAPIRef("webRequest.filterResponseData")}} にリクエスト ID を渡すことで得られる {{WebExtAPIRef("webRequest.StreamFilter")}} を使うと、ブラウザーが受け取った HTTP リクエストのレスポンス本文を検査したり修正したりすることができます。

+ +

そのためには、"webRequestBlocking" パーミッションと "webRequest" API パーミッション 、さらに修正したい対象のリクエスト URL にあてはまる host permission 権限を得ている必要があります。

+ +

型

+ +
+
{{WebExtAPIRef("webRequest.BlockingResponse")}}
+
+

この型のオブジェクトは、イベントリスナーによって extraInfoSpec 引数にて"blocking" をセットして返されます。BlockingResponse プロパティに特定の値をセットすることで、リスナーはネットワークリクエストを変更できます。

+
+
{{WebExtAPIRef("webRequest.CertificateInfo")}}
+
単一の X.509 証明書を記述するオブジェクト。
+
{{WebExtAPIRef("webRequest.HttpHeaders")}}
+
HTTP ヘッダーの配列。それぞれのヘッダーは 2 つのプロパティを持つオブジェクトで表現されます: name と、value か binaryValue のいずれか。
+
{{WebExtAPIRef("webRequest.RequestFilter")}}
+
webRequest イベントに適用するフィルターを記述するオブジェクト。
+
{{WebExtAPIRef("webRequest.ResourceType")}}
+
ウェブリクエスト内で取得されるリソースの特定の種類を表す。
+
{{WebExtAPIRef("webRequest.SecurityInfo")}}
+
特定のウェブリクエストのセキュリティプロパティを記述するオブジェクト。
+
{{WebExtAPIRef("webRequest.StreamFilter")}}
+
HTTP レスポンスの受信中に、それをモニターしたり修正したりするのに使うオブジェクト。
+
{{WebExtAPIRef("webRequest.UploadData")}}
+
URL リクエスト内でアップロードされるデータを含む。
+
+ +

プロパティ

+ +
+
{{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}}
+
10分間に handlerBehaviorChanged() を最大限呼べる回数。
+
+ +

メソッド

+ +
+
{{WebExtAPIRef("webRequest.handlerBehaviorChanged()")}}
+
このメソッドは、ページがブラウザーのインメモリーキャッシュ内にあるときに、イベントリスナーが確実に呼べるように使われます。
+
{{WebExtAPIRef("webRequest.filterResponseData()")}}
+
あるリクエストに対する {{WebExtAPIRef("webRequest.StreamFilter")}} オブジェクトを返します。
+
{{WebExtAPIRef("webRequest.getSecurityInfo()")}}
+
あるリクエストに対する TLS コネクションの詳細情報を返します。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("webRequest.onBeforeRequest")}}
+
リクエストがもうすぐなされて、ヘッダーは利用できないときに発火します。リクエストをキャンセルやリダイレクトしたい場合に、ここをリッスンします。
+
{{WebExtAPIRef("webRequest.onBeforeSendHeaders")}}
+
HTTP データを送信する前だが、HTTP ヘッダーが利用できるときに発火します。HTTP リクエストとヘッダーを修正したい場合に、ここををリッスンします。
+
{{WebExtAPIRef("webRequest.onSendHeaders")}}
+
ヘッダー送信の直前に発火します。あなたや他の人のアドオンが {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} でヘッダーを修正した場合、ここでは修正後のバージョンが見えるでしょう。
+
{{WebExtAPIRef("webRequest.onHeadersReceived")}}
+
リクエストに関連する HTTP レスポンスヘッダーを受け取ったときに発火します。HTTP レスポンスヘッダーを修正するのにこのイベントを使用できます。
+
{{WebExtAPIRef("webRequest.onAuthRequired")}}
+
サーバーがクライアントに認証クレデンシャルを要求するときに発火します。このリスナーは何もしないか、リクエストをキャンセルするか、認証クレデンシャルを供給するかのいずれかです。
+
{{WebExtAPIRef("webRequest.onResponseStarted")}}
+
レスポンスボディの最初のバイトを受け取ったときに発火します。HTTP リクエストにとって、これはステータスラインとレスポンスヘッダーが利用可能ということになります。
+
{{WebExtAPIRef("webRequest.onBeforeRedirect")}}
+
サーバーが開始するリダイレクトが起きる直前に発火します。
+
{{WebExtAPIRef("webRequest.onCompleted")}}
+
リクエストが完了したときに発火します。
+
{{WebExtAPIRef("webRequest.onErrorOccurred")}}
+
エラーが起きたときに発火します。
+
+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.api.webRequest")}}

+ +

Extra notes on Chrome incompatibilities.

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.webRequest API. This documentation is derived from web_request.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/windows/index.html b/files/ja/mozilla/add-ons/webextensions/api/windows/index.html new file mode 100644 index 0000000000..5b84904cdc --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/windows/index.html @@ -0,0 +1,117 @@ +--- +title: windows +slug: Mozilla/Add-ons/WebExtensions/API/windows +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions + - Windows +translation_of: Mozilla/Add-ons/WebExtensions/API/windows +--- +
{{AddonSidebar}}
+ +

ブラウザーウィンドウと相互作用します。この API を使って開いているウィンドウの情報を取得したり、ウィンドウを開き、修正し、閉じることができます。ウィンドウのオープン、クローズ、アクティベートのイベントをリッスンすることもできます。

+ +

型

+ +
+
{{WebExtAPIRef("windows.WindowType")}}
+
ブラウザーウィンドウの this の型。
+
{{WebExtAPIRef("windows.WindowState")}}
+
ブラウザーウィンドウの状態。
+
{{WebExtAPIRef("windows.Window")}}
+
ブラウザーウィンドウについての情報を含む。
+
{{WebExtAPIRef("windows.CreateType")}}
+
作成するブラウザーウィンドウの型を指定する。
+
+ +

定数

+ +
+
{{WebExtAPIRef("windows.WINDOW_ID_NONE")}}
+
ブラウザーウィンドウがないことを表す windowId の値。
+
{{WebExtAPIRef("windows.WINDOW_ID_CURRENT")}}
+
現在のウィンドウを表す windowId の値。
+
+ +

メソッド

+ +
+
{{WebExtAPIRef("windows.get()")}}
+
与えられた ID のウィンドウの詳細を取得します。
+
{{WebExtAPIRef("windows.getCurrent()")}}
+
現在のウィンドウを取得します。
+
{{WebExtAPIRef("windows.getLastFocused()")}}
+
最も最近フォーカスされたウィンドウを取得します — 典型的には「最上位」のウィンドウです。
+
{{WebExtAPIRef("windows.getAll()")}}
+
すべてのウィンドウを取得します。
+
{{WebExtAPIRef("windows.create()")}}
+
+

新しいウィンドウを作成します。

+
+
{{WebExtAPIRef("windows.update()")}}
+
ウィンドウのプロパティを更新します。これを使ってウィンドウの移動、リサイズ、フォーカス(外し)などを行います。
+
{{WebExtAPIRef("windows.remove()")}}
+
ウィンドウと、そのタブのすべてを閉じます。
+
+ +

イベント

+ +
+
{{WebExtAPIRef("windows.onCreated")}}
+
ウィンドウが作成された時に発火します。
+
{{WebExtAPIRef("windows.onRemoved")}}
+
ウィンドウが閉じられた時に発火します。
+
{{WebExtAPIRef("windows.onFocusChanged")}}
+
現在フォーカスされているウィンドウが変わった時に発火します。
+
+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.api.windows")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.windows API. This documentation is derived from windows.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.html b/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.html new file mode 100644 index 0000000000..a60ce41391 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/windows/windowstate/index.html @@ -0,0 +1,73 @@ +--- +title: windows.WindowState +slug: Mozilla/Add-ons/WebExtensions/API/windows/WindowState +translation_of: Mozilla/Add-ons/WebExtensions/API/windows/WindowState +--- +
{{AddonSidebar()}}
+ +

ブラウザウィンドウの状態。

+ +

型

+ +

値の方はstringsです。可能な値は以下:

+ +
+
"normal"
+
ウィンドウはデフォルトかユーザ指定のサイズ。
+
"minimized"
+
ウィンドウはアイコンとしてタスクバーの中に表示(最小化)。
+
"maximized"
+
ウィンドウはシステムエリアやOSによる予約なしに画面を満たしている(最大化)。
+
"fullscreen"
+
ウィンドウはフルスクリーンアプリケーションとして稼働しているか、タブの内容がFullscreen APIを利用している(全画面)。
+
"docked"
+
A docked window occupies a fixed position relative to other windows owned by the same application.
+
+ +

macOS compatibility: Beginning in macOS 10.10, the default maximizing behavior for windows changed to run applications as full screen applications instead of "zoomed" windows. fullscreen refers to both the browser running as a full screen application and when content in a tab uses the Fullscreen API.

+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.windows.WindowState")}}

+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.windows API. This documentation is derived from windows.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/windows/windowtype/index.html b/files/ja/mozilla/add-ons/webextensions/api/windows/windowtype/index.html new file mode 100644 index 0000000000..eca8a0916a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/windows/windowtype/index.html @@ -0,0 +1,65 @@ +--- +title: windows.WindowType +slug: Mozilla/Add-ons/WebExtensions/API/windows/WindowType +translation_of: Mozilla/Add-ons/WebExtensions/API/windows/WindowType +--- +
{{AddonSidebar()}}
+ +

これはブラウザウィンドウの種類です。

+ +

型

+ +

値の型はstringsです。可能な値は以下:

+ + + +

ブラウザ互換性

+ + + +

{{Compat("webextensions.api.windows.WindowType")}}

+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.windows API. This documentation is derived from windows.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/browser_compatibility_for_manifest.json/index.html b/files/ja/mozilla/add-ons/webextensions/browser_compatibility_for_manifest.json/index.html new file mode 100644 index 0000000000..65ce447613 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/browser_compatibility_for_manifest.json/index.html @@ -0,0 +1,25 @@ +--- +title: manifest.json のブラウザー互換性 +slug: Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json +tags: + - Add-ons + - WebExtensions + - manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json +--- +
{{AddonSidebar}}
+ + + +

{{Compat("webextensions.manifest",2)}}

+ +
謝辞 + +

Microsoft Edge の互換性データは Microsoft Corporation により提供され、Creative Commons Attribution 3.0 United States License の下でこのページに含めています。

+
+ +

関連情報

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/ja/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..c045122ba1 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,26 @@ +--- +title: JavaScript API 群のブラウザ実装状況 +slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +tags: + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +
+
{{AddonSidebar}}
+ + + +

{{WebExtAllCompatTables}}

+ +
謝辞 + +

Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ +

関連情報

+ + +
diff --git a/files/ja/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/ja/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html new file mode 100644 index 0000000000..4cff21e91d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html @@ -0,0 +1,158 @@ +--- +title: Chrome との非互換性 +slug: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +tags: + - WebExtensions + - 初心者向け +translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +--- +
{{AddonSidebar}}
+ +

Webextension を用いた拡張機能は Chrome や Opera の拡張機能と互換性があるように設計されています。可能な限り、それぞれのブラウザー向けに書かれた拡張機能は最低限の変更で Firefox で実行できるように設計されています。

+ +

しかしながら、Firefox は現在、Chrome と Opera でサポートされている機能と API の限られたセットのみをサポートしています。もっと多く機能を追加しようと努めていますが、まだサポートされていない機能もたくさんあり、まったくサポートしないものもいくつかあります。

+ +

JavaScript APIs

+ +

コールバックと chrome.* ネームスペース

+ +

Chrome では、拡張機能は chrome ネームスペースを使って特権 JavaScript API にアクセスします:

+ +
chrome.browserAction.setIcon({path: "path/to/icon.png"});
+ +

WebExtensions は同等の API に browser ネームスペースを使ってアクセスします:

+ +
browser.browserAction.setIcon({path: "path/to/icon.png"});
+ +

多くの API は非同期です。 Chrome では、非同期 API はコールバックを使用して値を返し、{{WebExtAPIRef("runtime.lastError")}}がエラーを通知します:

+ +
function logCookie(c) {
+  if (chrome.extension.lastError) {
+    console.error(chrome.extension.lastError);
+  } else {
+    console.log(c);
+  }
+}
+
+chrome.cookies.set(
+  {url: "https://developer.mozilla.org/"},
+  logCookie
+);
+ +

同様の WebExtensions API では promises を利用します:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+ +

Firefox はchromeとbrowserの両方のネームスペースをサポート

+ +

移植の助けとして、WebExtensions の Firefox 実装は、コールバックを使用したchromeを、promise を使用したbrowserと同様にサポートします。これは、多くの Chrome 拡張機能が Firefox でそのまま動作することを意味します。ただし、これは WebExtensions 標準の一部ではなく、準拠するすべてのブラウザーでサポートされているとは限りません。

+ +

browser と promise を使って拡張機能を書いている場合、Chrome でも動かせるようにする polyfill を開発しました: https://github.com/mozilla/webextension-polyfill.

+ +

部分的にサポートされている API

+ +

ブラウザーの JavaScript API サポートのページには、Firefox でサポートされているすべての API の互換性テーブルが含まれています。特定の API アイテムのサポートに関する警告がある場合は、これらのテーブルにアスタリスク "*" が表示され、API アイテムのリファレンスページにその警告が説明されています。

+ +

このテーブルは、GitHub で JSON ファイルとして保存された互換性データから生成されます。

+ +

このセクションの残りの部分では、テーブルにまだ取り込まれていない互換性の問題について説明します。

+ +

notifications

+ + + +

proxy

+ + + +

tabs

+ + + + + +

webRequest

+ + + +

windows

+ + + +

その他の非互換性

+ +

CSS内の URL

+ +

Firefox は、挿入されたページからではなく、CSS ファイル自体からの相対パスで、挿入された CSS ファイルの URL を解決します。

+ +

付加的な非互換性

+ +

Firefox は、バックグラウンドページからのalert(), confirm() または prompt()の使用をサポートしていません。

+ +

web_accessible_resources

+ +

chrome では、リソースが web_accessible_resources にリストされている場合、chrome-extension://<your-extension-id>/<path/to/resource>としてアクセスできます。この場合 extension IDは、指定された拡張機能に対して固定されています。

+ +

Firefox ではそうではなく、Firefox のすべてのインスタンスごとに異なるランダムな UUID を使用してアクセスできるように実装されています:moz-extension://<random-UUID>/<path/to/resource> このランダム性により、特定の拡張機能の URL を別のドメインの CSP ポリシーに追加するなど、いくつかのことをできなくなります。

+ +

マニフェストの"key"プロパティ

+ +

パッケージされていない拡張機能を使用する場合、Chrome はマニフェストに"key"プロパティを追加して、異なるマシン間で extension ID を固定することができます。 これは主に web_accessible_resources で作業する場合に便利です。 Firefox は web_accessible_resources にランダムな UUID を使用するため、このプロパティはサポートされていません。

+ +

コンテンツスクリプトのリクエストは、コンテンツページではなく、拡張機能のコンテキストで発生する

+ +

chrome では、コンテンツスクリプトから/apiのような相対URL にリクエストが呼び出されたとき（たとえば、fetch()を使用して）、https://example.com/apiに送信されます。Firefox では、絶対URL を指定する必要があります。

+ +

manifest.json のキー

+ +

メインの manifest.json ページには、manifest.json のキーのブラウザーサポートを説明する表が含まれています。 特定のキーのサポートに関する警告がある場合、表にアスタリスク "*"付きで示され、キーのリファレンスページには注意事項が説明されています。

+ +

これらの表は、 GitHub で JSON ファイルとして保存された互換性データから生成されます。

+ +

ネイティブメッセージング

+ +

コマンドライン引数

+ +

Linux と Mac では、Chrome は chrome-extension://[extensionID] の形式で、起動した拡張機能のオリジンとなる1つの引数をネイティブアプリに渡します。 これにより、アプリは拡張機能を識別できます。

+ +

Windows では、Chrome は2つの引数を受け取ります。1つ目は拡張機能のオリジンで、2つ目はアプリを起動した Chrome ネイティブウィンドウへのハンドルです。

+ +

allowed_extensions

+ +

Chrome では、アプリマニフェストの allowed_extensions キーは、代わりにallowed_origins と呼ばれています。

+ +

アプリマニフェストの位置

+ +

Chrome は、別の場所でアプリのマニフェストを見つけることを期待しています。 Chrome ドキュメントの「ネイティブメッセージングホストの場所」をご覧ください。

diff --git a/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html b/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html new file mode 100644 index 0000000000..456ce69ddb --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html @@ -0,0 +1,534 @@ +--- +title: コンテンツスクリプト +slug: Mozilla/Add-ons/WebExtensions/Content_scripts +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +--- +
{{AddonSidebar}}
+ +

コンテンツスクリプトは、特定のウェブページのコンテキストで実行される拡張機能の一部です（拡張機能の一部であるバックグラウンドスクリプトや、ウェブサイト自体の一部であるスクリプト、例えば {{HTMLElement("script")}} 要素みたいなものと対をなすような)。

+ +

バックグラウンドスクリプトはすべての WebExtension JavaScript API にアクセスできますが、ウェブページのコンテンツに直接アクセスすることはできません。だからあなたの拡張機能がそれを行う必要がある場合は、コンテンツスクリプトが必要です。

+ +

通常のウェブページで読み込まれたスクリプトと同様に、コンテンツスクリプトは、標準の DOM API を使用してページのコンテンツを読み取り、変更することができます。

+ +

コンテンツスクリプトは、WebExtension API の小さなサブセット にしかアクセスできませんが、メッセージングシステムを使用して バックグラウンドスクリプトと通信し、WebExtension API に間接的にアクセスすることができます。

+ +
+

コンテンツスクリプトは次のドメインでブロックされるのに注意してください:

+ + + +

このドメインのページにコンテンツスクリプトを挿入しようとすると、そのスクリプトは失敗し、ページは CSP エラーをログに記録します。

+ +

addons.mozilla.org を含む制限のために、ユーザーはインストール後すぐに拡張機能を試して、動かないのに気付くだけでしょう! 適切な警告を追加するか、addons.mozilla.org から動かす onboarding page を追加したくなるでしょう。

+
+ +
+

letfoo や window.foo = "bar" にて、コンテンツスクリプトのグローバルスコープで追加された値は、1408996 のバグによって消えることがあります。

+
+ +

コンテンツスクリプトの読み込み

+ +

次の 3 つの方法のいずれかを使用して、ウェブページにコンテンツスクリプトを読み込むことができます。

+ +
    +
  1. +
    +
    インストール時に、URL パターンにマッチするページ内へ
    +
    manifest.json の content_scripts キーを使用して、URL が指定されたパターンにマッチするページをロードするたびにコンテンツスクリプトを読み込むようブラウザーに依頼できます。
    +
    +
    2. +
  2. +
    +
    実行時に、URL パターンにマッチするページ内へ
    +
    {{WebExtAPIRef("contentScripts")}} API を使って、URL が指定されたパターンにマッチするページをロードするたびにコンテンツスクリプトを読み込むようブラウザーに依頼できます。これは method (1) のようなもので、違いは実行時にコンテンツスクリプトを追加/削除できることです。
    +
    +
    3. +
  3. +
    +
    実行時に、特定のタブへ
    +
    tabs.executeScript() API を使用すると、ユーザーがブラウザーアクションをクリックした場合など、必要なときにコンテンツスクリプトを特定のタブに読み込むことができます。
    +
    +
    4. +
+ +

フレームごと、拡張機能ごとのグローバルスコープしかありません。これは 1 つのコンテンツスクリプトの変数は、読み込み方にかかわらず、他のコンテンツスクリプトからアクセスできることになります。

+ +

方法 (1) と (2) ではマッチパターンを使って表現された URL のスクリプトだけを読み込みできます。

+ +

方法 (3) では、拡張機能と一緒にパッケージされたページのスクリプトも読み込みできますが、"about:debugging" や "about:addons"のような権限つきページにはスクリプトを読み込めません。

+ +

コンテンツスクリプト環境

+ +

DOM アクセス

+ +

コンテンツスクリプトは、普通のページスクリプトと同様に、ページの DOM にアクセスして修正できます。ページスクリプトにてなされた DOM の変更を見ることもできます。

+ +

しかし、コンテンツスクリプトは "DOM のきれいな見た目" を取得します。これはつまり:

+ + + +

Firefox では、この挙動は Xray vision と呼ばれます。

+ +

例えば、次のウェブページを考えます:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  </head>
+
+  <body>
+    <script src="page-scripts/page-script.js"></script>
+  </body>
+</html>
+ +

"page-script.js" スクリプトは次を実行します:

+ +
// page-script.js
+
+// add a new element to the DOM
+let p = document.createElement("p");
+p.textContent = "This paragraph was added by a page script.";
+p.setAttribute("id", "page-script-para");
+document.body.appendChild(p);
+
+// define a new property on the window
+window.foo = "This global variable was added by a page script";
+
+// redefine the built-in window.confirm() function
+window.confirm = function() {
+  alert("The page script has also redefined 'confirm'");
+}
+ +

今度は拡張機能がページにコンテンツスクリプトを挿入します:

+ +
// content-script.js
+
+// can access and modify the DOM
+let pageScriptPara = document.getElementById("page-script-para");
+pageScriptPara.style.backgroundColor = "blue";
+
+// can't see page-script-added properties
+console.log(window.foo);  // undefined
+
+// sees the original form of redefined properties
+window.confirm("Are you sure?"); // calls the original window.confirm()
+ +

その反対もまた真です; ページスクリプトはコンテンツスクリプトが追加した JavaScript プロパティを見られません。

+ +

このことからすると、コンテンツスクリプトは予言できる振る舞いをする DOM プロパティに依存していて、ページスクリプトにて定義された変数とコンテンツスクリプトで定義する変数の衝突は心配しなくていいです。

+ +

この振る舞いの実用的な結論として、コンテンツスクリプトはページに読み込まれたいかなる JavaScript ライブラリーにもアクセスしません。なので例えば、ページに jQuery が含まれても、コンテンツスクリプトは見ることができません。

+ +

コンテンツスクリプトから JavaScript ライブラリを使いたい場合、ライブラリ自身を、使う方のコンテンツスクリプトと並べて挿入するべきです:

+ +
"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["jquery.js", "content-script.js"]
+  }
+]
+ +
+

記: Firefox ではコンテンツスクリプトからページスクリプトによって生成された JavaScript オブジェクトにアクセスしたり、ページスクリプトにコンテンツスクリプトの JavaScript オブジェクトを公開できるようにする API が提供されます。

+ +

詳しくはページスクリプトとオブジェクトを共有するのページを見てください。

+
+ +

WebExtension API

+ +

標準 DOM API に加え、コンテンツスクリプトは次の WebExtension API を使用できます:

+ +

extension から:

+ + + +

runtime から:

+ + + +

i18n から:

+ + + +

すべてから:

+ + + +

XHR と Fetch

+ +

コンテンツスクリプトは通常の window.XMLHttpRequest と window.fetch() API を使ってリクエストを作成できます。

+ +
+

Firefox では、コンテンツスクリプトの (例えば、fetch() を使った) リクエストは、拡張機能のコンテキストで起こるので、ページコンテンツを参照する URL を絶対URL で提供せねばなりません。

+ +

Chrome では、リクエストはページのコンテ キストで起こるので、相対 URL で行われます。例えば、/api は https://[現在のペー ジの URL]/api に送られます。

+
+ +

コンテンツスクリプトは拡張機能の他の部分と同一のクロスドメイン権限を取得します: よって拡張機能が manifest.json の permissions キーを使ってあるドメインのクロスドメインアクセスを要求している場合、コンテンツスクリプトも同様にそのドメインのアクセスを取得します。

+ +

これはより多く権限付けられた XHR に晒して、コンテンツスクリプトでインスタンスを取得することで達成し、その副作用としてページ自体からのリクエストがそうであるように Origin と Referer ヘッダーがセットされず、リクエストからクロスオリジンな性質を隠すことが好ましいことがよくあります。

+ +
+

バージョン 58 以降、コンテンツ自体から送られたかのようなリクエストを必要とする拡張機能は  content.XMLHttpRequest と content.fetch() を代わりに使うことができます。

+ +

クロスブラウザー拡張機能にとってこれらの存在は機能検出となります。

+
+ +

バックグラウンドスクリプトとの通信

+ +

コンテンツスクリプトは WebExtension API の大半を直接には使用できませんが、メッセージ API を用いて拡張機能のバックグラウンドスクリプトと通信できて、それゆえにバックグラウンドスクリプトがアクセスできるすべての API に間接的にアクセスできます。

+ +

バックグラウンドスクリプトとコンテンツスクリプトが通信する 2 つのパターンがあります: (オプションなレスポンスつきの)ワンオフメッセージを送るのと、お互いに息の長いコネクションを確立して、そこでメッセージを交換するのとです。

+ +

ワンオフメッセージ

+ +

レスポンスが必須でないワンオフメッセージを送るには、次の API を使います:

+ + + + + + + + + + + + + + + + + + + + + +
コンテンツスクリプト内バックグラウンドスクリプト内
送信メッセージbrowser.runtime.sendMessage()browser.tabs.sendMessage()
受信メッセージbrowser.runtime.onMessagebrowser.runtime.onMessage
+ +

例えば、ウェブページでのクリックイベントをリッスンするコンテンツスクリプトがここにあります。クリックがリンク上である場合、ターゲット URL をバックグラウンドページにメッセージします。

+ +
// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}
+ +

バックグラウンドスクリプトはこのメッセージをリッスンして、notifications API を使って通知を表示します:

+ +
// background-script.js
+
+browser.runtime.onMessage.addListener(notify);
+
+function notify(message) {
+  browser.notifications.create({
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("link.png"),
+    "title": "You clicked a link!",
+    "message": message.url
+  });
+}
+
+ +

この例のコードは Github の notify-link-clicks-i18n のサンプルから簡単に適用できます。

+ +

コネクションベースのメッセージ

+ +

ワンオフメッセージの送信は、バックグラウンドスクリプトとコンテンツスクリプトとで多くのメッセージを交換する場合はめんどくさいです。なので代替パターンは、この 2 つのコンテキスト間で寿命の長いコネクションを確立して、メッセージ交換にこのコネクションを使うことです。

+ +

いずれの側にも runtime.Port オブジェクトがあり、メッセージ交換に使えます。

+ +

コネクションを作成するには:

+ + + +

これは runtime.Port オブジェクトを返します。

+ + + +

それぞれがポートを持ったら、両方が:

+ + + +

例えば、ロードしたらすぐに、このコンテンツスクリプトは:

+ + + +
// content-script.js
+
+var myPort = browser.runtime.connect({name:"port-from-cs"});
+myPort.postMessage({greeting: "hello from content script"});
+
+myPort.onMessage.addListener(function(m) {
+  console.log("In content script, received message from background script: ");
+  console.log(m.greeting);
+});
+
+document.body.addEventListener("click", function() {
+  myPort.postMessage({greeting: "they clicked the page!"});
+});
+ +

対応するバックグラウンドスクリプトは:

+ + + +
// background-script.js
+
+var portFromCS;
+
+function connected(p) {
+  portFromCS = p;
+  portFromCS.postMessage({greeting: "hi there content script!"});
+  portFromCS.onMessage.addListener(function(m) {
+    console.log("In background script, received message from content script")
+    console.log(m.greeting);
+  });
+}
+
+browser.runtime.onConnect.addListener(connected);
+
+browser.browserAction.onClicked.addListener(function() {
+  portFromCS.postMessage({greeting: "they clicked the button!"});
+});
+
+ +

複数のコンテンツスクリプト

+ +

同時に複数のコンテンツスクリプトが通信する場合、各接続を配列に格納するのが良いかもしれません。

+ + + +
// background-script.js
+
+var ports = []
+
+function connected(p) {
+  ports[p.sender.tab.id]    = p
+  //...
+}
+
+browser.runtime.onConnect.addListener(connected)
+
+browser.browserAction.onClicked.addListener(function() {
+  ports.forEach(p => {
+        p.postMessage({greeting: "they clicked the button!"})
+    })
+});
+ + + +

ワンオフメッセージとコネクションベースのメッセージとの選択

+ +

ワンオフとコネクションベースのメッセージの選択は、拡張機能がどうメッセージを利用すると期待されるかに依存します。

+ +

推奨のベストプラクティスは次の通りです:

+ +

次のときにワンオフメッセージを使用…

+ + + +

次のときにコネクションベースメッセージを使用…

+ + + +

ウェブページとの通信

+ +

既定では、コンテンツスクリプトはページスクリプトが作成したオブジェクトにアクセスできませんが、DOM window.postMessage と window.addEventListener API を使ってページスクリプトと通信できます。

+ +

例えば:

+ +
// page-script.js
+
+var messenger = document.getElementById("from-page-script");
+
+messenger.addEventListener("click", messageContentScript);
+
+function messageContentScript() {
+  window.postMessage({
+    direction: "from-page-script",
+    message: "Message from the page"
+  }, "*");
+ +
// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data &&
+      event.data.direction == "from-page-script") {
+    alert("Content script received message: \"" + event.data.message + "\"");
+  }
+});
+ +

これの完全な動作サンプルは、GitHub のデモページを訪れて指示に従ってください。

+ +
+

この方法で信頼できないウェブコンテンツと相互作用するには細心の注意が必要です！
+ 拡張機能は強力な力を持つコードの権限があり、敵意のあるウェブページは簡単にこの力にアクセスします。

+ +

細かい例を作るには、メッセージを受け取ったコンテンツスクリプトがこのようなことを行うと仮定してください:

+ +
// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data.direction &&
+      event.data.direction == "from-page-script") {
+    eval(event.data.message);
+  }
+});
+ +

今やページスクリプトはコンテンツスクリプトのすべての権限でコードを実行できます。

+
+ +

コンテンツスクリプト内で eval() を使う

+ +
+
Chrome では
+
{{jsxref("eval")}} は常にページコンテキストではなくてコンテンツスクリプトのコンテキストで動作します。
+
Firefox では
+
+

eval() を呼ぶ場合、コンテンツスクリプトのコンテキストで動作します。 window.eval() を呼ぶ場合、ページのコンテキストで動作します。, it runs code in the context of the content script.

+
+
+ +

例えば、こんなコンテンツスクリプトを考えてみます:

+ +
// content-script.js
+
+window.eval('window.x = 1;');
+eval('window.y = 2');
+
+console.log(`In content script, window.x: ${window.x}`);
+console.log(`In content script, window.y: ${window.y}`);
+
+window.postMessage({
+  message: "check"
+}, "*");
+ +

このコードは単に変数 x と y を、window.eval() と eval() を用いて作成し、値をログに出し、ページにメッセージします。

+ +

メッセージの受信に際し、ページスクリプトは同じ変数をログに出します:

+ +
window.addEventListener("message", function(event) {
+  if (event.source === window && event.data && event.data.message === "check") {
+    console.log(`In page script, window.x: ${window.x}`);
+    console.log(`In page script, window.y: ${window.y}`);
+  }
+});
+ +

Chrome では、こんな出力が生成されます:

+ +
In content script, window.x: 1
+In content script, window.y: 2
+In page script, window.x: undefined
+In page script, window.y: undefined
+ +

Firefox では、こんな出力が生成されます:

+ +
In content script, window.x: undefined
+In content script, window.y: 2
+In page script, window.x: 1
+In page script, window.y: undefined
+ +

同じことは setTimeout()、setInterval()、Function() にも言えます。

+ +
+

ページのコンテキストでコードを実行するときは特に注意してください！

+ +

ページの環境が悪意をはらんだウェブページにコントロールされ、期待しない方法であなたが操作するオブジェクトを再定義するかもしれません。

+ +
// page.js redefines console.log
+
+var original = console.log;
+
+console.log = function() {
+  original(true);
+}
+
+ +
// content-script.js calls the redefined version
+
+window.eval('console.log(false)');
+
+
diff --git a/files/ja/mozilla/add-ons/webextensions/content_security_policy/index.html b/files/ja/mozilla/add-ons/webextensions/content_security_policy/index.html new file mode 100644 index 0000000000..4bd247cf03 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/content_security_policy/index.html @@ -0,0 +1,109 @@ +--- +title: Content Security Policy +slug: Mozilla/Add-ons/WebExtensions/Content_Security_Policy +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Content_Security_Policy +--- +
{{AddonSidebar}}
+ +
+

WebExtension APIs で開発される拡張機能には、既定で適用される CSP(Content Security Policy の略) があります。これは <script> と <object> リソースから読み込まれるソースを制限し、危険な行動、例えば eval() の使用を非許可にします。

+ +

この記事では CSP とは何かと、デフォルトポリシーとは何で拡張機能にはどんな意味があるのかと、拡張機能が既定の CSP を変更する方法を簡単に説明します。

+
+ +

Content Security Policy (CSP) はウェブサイトが悪意のあるコンテンツを実行するのを防ぐのに役立つメカニズムです。ウェブサイトは サーバーから送られてくる HTTP ヘッダーを使って CSP を指定します。CSP は主に、スクリプトや組み込みプラグインといったさまざまな種類のコンテンツの合法なソースを特定することに関心を持っています。例えば、ウェブサイトは、ウェブサイト自身からの JavaScript だけを実行し、他のソースは受け付けないように指定できます。CSP はブラウザーに eval()のような、潜在的に危険な行動を禁止するよう指示することもできます。

+ +

ウェブサイトと同様に、拡張機能はさまざまなソースからコンテンツを読み込めます。例えば、ブラウザーアクションのポップアップは HTML 文書として指定できて、通常のウェブページのようにさまざまなソースからの JavaScript と CSS を入れることができます:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <!--Some HTML content here-->
+
+    <!--
+      Include a third-party script.
+      See also https://developer.mozilla.org/ja/docs/Web/Security/Subresource_Integrity.
+    -->
+    <script
+      src="https://code.jquery.com/jquery-2.2.4.js"
+      integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
+      crossorigin="anonymous">
+    </script>
+
+    <!-- Include my popup's own script-->
+    <script src="popup.js"></script>
+  </body>
+
+</html>
+ +

ウェブサイトと比較して、拡張機能は追加の特権付き API にアクセスできるので、悪意のあるコードに感染した場合、リスクは大きくなります。このため:

+ + + +

既定の content security policy

+ +

拡張機能の既定の CSP は次のものです:

+ +
"script-src 'self'; object-src 'self';"
+ +

これは、content_security_policy の manifest.json key を使って明示的に CSP をセットしないあらゆる拡張機能にあてはまります。下記の結論になります:

+ + + +

スクリプトとオブジェクトリソースの場所

+ +

既定の CSP の下では、拡張機能のローカルにある <script> と <object> リソースだけを読み込みできます。例えば、拡張機能の文書内にこんな行があるとします:

+ +
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
+ +

これは要求したリソースを読み込みません: 静かに失敗し、このリソースから取ってきたはずのいかなるオブジェクトも見つかりません。この解決方法が 2 つあります:

+ + + +

eval() とその仲間

+ +

既定の CSP の下で、拡張機能は JavaScript 内の文字列の評価を許可しません。つまり次のことは許可されません:

+ +
eval("console.log('some output');");
+ +
window.setTimeout("alert('Hello World!');", 500);
+ +
var f = new Function("console.log('foo');");
+ +

インライン JavaScript

+ +

既定の CSP ではインライン JavaScript は実行されません。これは <script> タグで直接置かれた JavaScript と、インラインイベントハンドラーの両方とも許可されず、つまり次のことは許可されません:

+ +
<script>console.log("foo");</script>
+ +
<div onclick="console.log('click')">Click me!</div>
+ +

ページが読み込まれた時にスクリプトを実行するのに <body onload="main()"> のようなコードを使っている場合、代わりに DOMContentLoaded か load をリッスンします。

diff --git a/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html b/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html new file mode 100644 index 0000000000..0a9d5e2637 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html @@ -0,0 +1,243 @@ +--- +title: デバッグ (Firefox 50 より前) +slug: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) +translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) +--- +
{{AddonSidebar}}
+ +
+

この記事では Firefox バージョン50よりも前で WebExtension API を使った拡張機能のデバッグする方法を説明しています。

+ +

Firefox 50 以降をお使いの場合、メイン記事の拡張機能をデバッグするを見てください。

+
+ +

この記事では、デフォルトでインストールされている Firefox 開発ツールを使って、WebExtension API で開発された拡張機能をどのようにデバッグするか説明します。Add-on SDK で開発したアドオンをデバッグする場合は、アドオンデバッガ の解説を参照してください。

+ +

{{英語版章題("A simple example: notify-link-clicks-i18n")}}

+ + + + + +

デバックツールへの接続方法を、簡単なサンプル拡張機能 "notify-link-clicks-i18n" を用いて説明します。このコードは GitHub の WebExtensions examples リポジトリ で公開されています。

+ +

この拡張機能は以下から構成されています。

+ + + +

ページ上のリンクをクリックするという動作は、コンテンツスクリプトがイベントとして感知します。リンクがクリックされた際、 リンクを含んだメッセージがコンテンツスクリプトからバックグラウンドスクリプトに送られます。

+ +

バックグラウンドスクリプトがメッセージを受け取ると、リンクを含んだ通知画面が表示されます。

+ +

"content-script.js" は次の通りです:

+ +
/*
+ リンクがクリックされた場合、バックグラウンドページにメッセージを送信する。
+ このメッセージにはリンクの URL が含まれている。
+*/
+function notifyExtension(e) {
+  var target = e.target;
+  while ((target.tagName != "A" || !target.href) && target.parentNode) {
+    target = target.parentNode;
+  }
+  if (target.tagName != "A")
+    return;
+
+  console.log("content script sending message");
+  chrome.runtime.sendMessage({"url": target.href});
+}
+
+/*
+ クリックイベントのリスナ関数に notifyExtension() を追加する
+*/
+window.addEventListener("click", notifyExtension);
+
+ +

"background-script.js" は次の通りです:

+ +
/*
+ 受信したメッセージを記録する。
+ 続いて通知画面を表示する。
+ この通知画面には、メッセージから読み取った URL が含まれている。
+*/
+function notify(message) {
+  console.log("background script received message");
+  var title = chrome.i18n.getMessage("notificationTitle");
+  var content = chrome.i18n.getMessage("notificationContent", message.url);
+  chrome.notifications.create({
+    "type": "basic",
+    "iconUrl": chrome.extension.getURL("icons/link-48.png"),
+    "title": title,
+    "message": content
+  });
+}
+
+/*
+ content script からのメッセージを受信するリスナ関数に `notify()` を追加する
+*/
+chrome.runtime.onMessage.addListener(notify);
+
+ +

以下の手順を実際に試してみる際は、 webextensions-examples リポジトリからコードを clone し、"notify-link-clicks-i18n" を インストールして下さい。

+ +

{{英語版章題("The Browser Toolbox")}}

+ +

ブラウザツールボックス

+ +

拡張機能をデバッグするには ブラウザツールボックス を使用します。

+ +

{{英語版章題("Prerequisites")}}

+ +

前提条件

+ +

ブラウザツールボックスを使用する準備として、以下の手順を踏む必要があります。

+ + + +

{{EmbedYouTube("LJAM2vXJ790")}}

+ +

{{英語版章題("Opening the Browser Toolbox")}}

+ +

ブラウザツールボックスを開く

+ +

次に、ブラウザツールボックスを開きます。

+ + + +

ブラウザツールボックスが新しいウインドウとして開きます。ここで Firefox のメインウィンドウが前面に表示された場合は、ブラウザツールボックスが前に表示されるように画面をクリックしてください。{{EmbedYouTube("fZ492zAAy3o")}}

+ +

Firefox における "ツールボックス" とは、下図のように複数のツールがタブで句切られているウインドウの名前です。上記のツールボックスには 5 つのツール、"Inspector" / "Console" / "Debugger" / "Style Editor" / "Scratchpad" が含まれており、ウインドウの上部にあるタブで切り替えることができます。この記事では "Console（コンソール）" と "Debugger（デバッガ）" の 2 つのツールを使用します。

+ +

{{英語版章題("Viewing log output")}}

+ +

ログの出力を見る

+ +

コンソールタブでログを見ることができます。ここに表示されるメッセージは以下から出力されたものです。

+ + + +

このメッセージには、Console API を使用しているコードから出力されたログも含まれています。また、JavaScript エンジンからもエラーメッセージが出力されます。

+ +

それでは上記のサンプルを使って試してみましょう。ブラウザツールボックスのコンソールタブを選択し、何かしらの Web ページを開き、リンクをクリックし、コンテンツスクリプトやバックグラウンドスクリプトからメッセージが記録されるのを確認してみましょう。

+ +

{{EmbedYouTube("Qpx0n8gP3Qw")}}

+ +

ただし、ブラウザツールボックスはどんなメッセージも受け取るため、要らないメッセージも多く受け取ってしまう問題があります。この問題を解決するにはフィルタリングと検索を参照して下さい。

+ +

{{英語版章題("Debugging JavaScript")}}

+ +

JavaScript をデバッグする

+ +

ブラウザツールボックスを用いると、バックグラウンドスクリプトやブラウザ上で動作しているスクリプト、ポップアップのページアクションで動作するスクリプトに対し、JavaScript デバッガでブレークポイントを設定することができます。

+ +

拡張機能がインストールされて有効になっている間は、デバッガからバックグラウンドスクリプトにアクセス可能です。ポップアップスクリプトは、ポップアップが表示されている間にアクセス可能です。ポップアップスクリプトが読み込まれた時点ですぐにデバッガからアクセスしたい場合は、スクリプトの最初に debugger; 文を挿入してみてください。

+ +

JavaScript デバッガを使用するために、まずはブラウザツールボックスのデバッガタブを選択します。ここにはブラウザで動いている全てのソースコードが表示されています。そのため、検索ボックスをクリックしてソースの名前を入力し、自分のスクリプトが表示されるようにします。

+ +

自分のスクリプトを見つかったら、ブレークポイントをコードに設定したり、コードをステップ実行したり、他にもデバッガに可能なことは何でも実行できます。

+ +

{{EmbedYouTube("3edeJiG38ZA")}}

+ +

{{英語版章題("JavaScript command line interpreter")}}

+ +

JavaScript コマンドラインインタプリタ

+ +

コンソールには コマンドラインインタプリタ が含まれており、実行しているプログラムの状態を調べたり操作することができます。この機能はコンソールを Web ページにアタッチしている際によく使いますが、ブラウザツールボックスでインタプリタを用いるのは一般に難しくなります（ブラウザツールボックスのコンソールは、デバッグしたい特定の拡張機能だけではなく、ブラウザ全体をスコープとしてしまうため）。

+ +

とはいえ、次のようなトリックを使うと上手くいきます。デバッガがブレークポイントで停止している間は、そのプログラムにコンソールのスコープが設定されます。そのため、拡張機能のコードにブレークポイントを設定しておくことで、拡張機能中の関数を呼び出したり、変数値を再代入したりするなど、拡張機能に対して動的にアクセスすることができます。

+ +

この機能は コンソールを常時表示 （画面の半分にはコンソールを、もう半分にはデバッガなどの異なるツールを表示）している際に特に効果的です。

+ +

{{EmbedYouTube("xprf58qOtLY")}}

+ +

{{英語版章題("Debugging content scripts")}}

+ +

コンテンツスクリプトをデバッグする

+ +

ブラウザツールボックスには大きな制約が 1 つあります。それは、マルチプロセス Firefox で開発している場合に、 JavaScript Debugger からコンテンツスクリプトにアタッチできない点です。

+ +

マルチプロセス Firefox では少なくとも 2 つのプロセスに分かれています。一つはブラウザ自身の UI やシステムコードを実行し、他は Web ページのスクリプト実行などを担当するコンテンツプロセス です。ブラウザツールボックスは前者のプロセスにデバッガとしてアタッチします。しかし、コンテンツスクリプトは他のプロセスで実行しているため、ブラウザツールボックスのスクリプト一覧には表示されないのです。

+ +

コンテンツスクリプトスクリプトをマルチプロセス Firefox でデバッグするには Browser Content Toolbox を使用して下さい。Browser Content Toolbox はブラウザツールボックスにちょうど似ていますが、開発ツールをブラウザのコンテンツプロセスにアタッチさせる点で異なり、コンテンツスクリプトにアクセスできるようになります。

+ +
+

補足: この Browser Content Toolbox は、マルチプロセス Firefox で開発している場合にのみ必要なものであり、またその場合のみ利用可能です。

+
+ +
+

ブラウザツールボックスのオプションで "Worker のデバッグを有効" を設定すると、Browser Content Toolbox でデバッグができなくなります。この問題は Bug 1236892 で解決されるはずです。

+
+ +

{{EmbedYouTube("xAt3Q0PgJP4")}}

+ +

{{英語版章題("Debugging popups")}}

+ +

ポップアップをデバッグする

+ +
Firefox 47 からの新機能です
+ +

Firefox 47 から、ブラウザツールボックスでポップアップの中身をデバッグできるようになりました。デバッグは 3 つの手順からなります。

+ + + +

{{EmbedYouTube("EEU4NeAS1s4")}}

+ +

autohide を無効化する

+ +

パネルのデバッグに関してありがちな問題は、パネルの外をクリックすると隠れてしまう点です。そのため、まず初めにこの動作を無効化しておきましょう。ブラウザツールボックスで 4 つの小さい四角形からなるアイコンをクリックします。

+ +

すると、Escape キーを押した場合でもパネルが前面に表示されたままになるはずです。

+ +
+

ここで設定した authohide の無効化は、拡張機能のポップアップのみならず、ハンバーガーメニュー () などによる ブラウザ本体のポップアップ にも適用されます。

+ +

また、この設定はブラウザを再起動した後も引き継がれます。この件に関しては bug 1251658 で修正中ですが、現時点ではブラウザツールボックスを閉じる前に autohide を再び有効にしておくと良いでしょう。

+ +

ブラウザの内部構造的には、この autohide ボタンは ui.popup.disable_autohide の設定項目を切り替えるだけのものです。そのため、about:config において手動で切り替えることも可能です。

+
+ +

ポップアップを開く

+ +

次にポップアップを開きます。ここでブラウザツールボックスに戻ると、パネルが開いたままになっているはずです。

+ +

ポップアップのフレームを選択する

+ +

ポップアップはそれ自身のフレームに読み込まれています。そのため、ブラウザツールボックスの フレーム選択ボタン でポップアップのドキュメントを選択します。このドキュメントは以下のような名前を持っています。

+ +
moz-extension://<some-uuid>/path/to/your-popup.html
+ +

{{EmbedYouTube("/9jdHDCKIN-U")}}

+ +

こうしてツールボックスのスコープがポップアップに設定されました。インスペクタでポップアップの HTML や CSS の確認・変更が行えます。デバッガでは、ポップアップに読み込まれているスクリプトを検索したり、スクリプトにブレークポイントを設定することができます。

+ +

{{英語版章題("What about the Add-on Debugger?")}}

+ +

Add-on Debuggerとは？

+ +

Firefox での拡張機能のデバッグは、今後 Add-on Debugger が用いられる予定になっています。

+ +

ブラウザツールボックスと比較した際、Add-on Debugger は拡張機能ファイルのみを表示するため、容易にスクリプトを探すことができるという大きな利点があります。しかし今のところ、コンソールメッセージを拡張機能から Add-on Debugger へ表示させられないため、ブラウザツールボックスのほうが便利です。

diff --git a/files/ja/mozilla/add-ons/webextensions/examples/index.html b/files/ja/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..a5d7895db9 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,29 @@ +--- +title: 拡張機能の例 +slug: Mozilla/Add-ons/WebExtensions/Examples +tags: + - Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +
{{AddonSidebar}}
+ +

拡張機能の開発方法を分かりやすく説明するため、シンプルな拡張機能のサンプルを集めたリポジトリ https://github.com/mdn/webextensions-examples を公開しています。この記事では、そのリポジトリで使われている WebExtension API について説明します。

+ +

これらのサンプルは Firefox Nightly で動作します。ほとんどのものがよりバージョン番号の小さい Firefox でも動作しますが、拡張機能の manifest.json に指定されている strict_min_version キーを確認してください。

+ +

試してみたい方には、3 つの選択肢があります:

+ +
    +
  1. リポジトリを clone し、アドオンをソースディレクトリーから直接読み込む方法。{{原語併記("Load Temporary Add-on", "一時的にアドオンを読み込み")}} 機能を使います。Firefox を再起動するまで拡張機能は読み込まれたままです。
    2. +
  2. リポジトリを clone し、web-ext コマンドラインツールを使って その拡張機能がインストールされた状態で Firefox を起動する。
    3. +
  3. リポジトリを clone し、build ディレクトリーに移動する。ここにはすべてのサンプルのビルドされ署名されたバージョンが置かれています。Firefox のメニュー ファイル/ファイルを開く から開いて、拡張機能をインストールすることができます。addons.mozilla.org からインストールしたのと同じ状態になります。
    4. +
+ +
+

重要: この例の WebExtension を AMO (addons.mozilla.org)に投稿しないでください、WebExtension のサンプルを実行するのに署名をする必要はありません。単に上記の手順に従ってください。

+
+ +

リポジトリにコントリビュートしたい方は、是非とも pull request を送ってください！

+ +

{{WebExtAllExamples}}

diff --git a/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..75fdb38e28 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,166 @@ +--- +title: developer tools の拡張 +slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +tags: + - Add-ons + - DevTools + - Needs Privileges + - WebExtensions + - ガイド + - 拡張機能 +translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +--- +
{{AddonSidebar}}
+ +
+

このページでは、Firefox 55に存在するdevtools APIについて説明しています。このAPIはChrome devtools APIsに基づいていますが、まだFirefoxでは実装されていないため、ここでは説明していません。現在欠けている機能を確認するには、devtools APIの制限を参照してください。

+
+ +

WebExtensions API を使用して、ブラウザの組み込み開発者ツールを拡張できます。 devtools 拡張機能を作成するには、manifest.json に "devtools_page" キーを含めます:

+ +
"devtools_page": "devtools/devtools-page.html"
+ +

このキーの値は、拡張機能にバンドルされている HTML ファイルを指す URL です。URL は manifest.json ファイル自体に関連する必要があります。

+ +

HTML ファイルは、devtools ページと呼ばれる特別なページを拡張機能で定義します。

+ +

devtools ページ

+ +

devtools ページはブラウザの devtools を開くとロードされ、閉じるとアンロードされます。devtools ウィンドウは単一のタブに関連付けられているため、複数の devtools ウィンドウ、つまり複数の devtools ページが同時に存在する可能性が非常に高いことに注意してください。

+ +

devtools ページには目に見える DOM はありませんが、<script> タグを使用して JavaScript ソースを含めることができます。ソースは拡張機能自体にバンドルする必要があります。ソースは以下にアクセスできます:

+ + + +

devtools ページは他の WebExtension API にアクセスできず、バックグラウンドページは devtools API にアクセスできないことに注意してください。代わりに、devtools ページとバックグラウンドページは runtime メッセージング API を使用して通信する必要があります。ここに例があります:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
+ +

devtools.js ファイルには、開発ツール拡張機能を作成する実際のコードが保持されます。

+ +

パネルの作成

+ +

devtools ウィンドウは、JavaScript デバッガ、ネットワークモニターなどの多数の個別ツールをホストします。上部にあるタブの行により、ユーザーはさまざまなツールを切り替えることができます。各ツールのユーザーインターフェイスをホストするウィンドウは「パネル」と呼ばれます。

+ +

devtools.panels.create() API を使用して、devtools ウィンドウに独自のパネルを作成できます:

+ +
browser.devtools.panels.create(
+  "My Panel",                      // title
+  "icons/star.png",                // icon
+  "devtools/panel/panel.html"      // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(initialisePanel);
+  newPanel.onHidden.addListener(unInitialisePanel);
+});
+ +

これにはパネルのタイトル、アイコン、コンテンツの3つの引数が必要です。新しいパネルを表す devtools.panels.ExtensionPanel オブジェクトに解決される Promise を返します。

+ +

ターゲットウィンドウとのインタラクション

+ +

開発者ツールは常に特定のブラウザタブに添付されます。これは開発者ツールの「ターゲット」または「検出済みウィンドウ」と呼ばれます。devtools.inspectedWindow を使用して、検出されたウィンドウとインタラクションできます。

+ +

ターゲットウィンドウでコードを実行する

+ +

devtools.inspectedWindow.eval() は、検出されたウィンドウでコードを実行する1つの方法を提供します。

+ +

これは {{WebExtAPIRef("tabs.executeScript()")}} を使用してコンテンツスクリプトを挿入することに似ていますが、1つの重要な違いがあります:

+ + + +
+

DOM のクリーンビューはセキュリティ機能であり、ネイティブ DOM 関数の動作を再定義することにより、悪意のあるページが拡張機能をだますことを防ぐのに役立つことに注意してください。これは eval() を使用する際に非常に注意する必要があることを意味し、可能であれば通常のコンテンツスクリプトを使用する必要があります。

+
+ +

devtools.inspectedWindow.eval() を使用してロードされたスクリプトも、コンテンツスクリプトで定義された JavaScript 変数を認識しません。

+ +

コンテンツスクリプトの使用

+ +

devtoolsドキュメントは {{WebExtAPIRef("tabs.executeScript()")}} に直接アクセスできません。したがって、コンテンツスクリプトを挿入する必要がある場合、devtools ドキュメントはバックグラウンドスクリプトにメッセージを送信してスクリプトの挿入を要求する必要があります。devtools.inspectedWindow.tabId はターゲットタブの ID を提供します。devtools ドキュメントはこれをバックグラウンドスクリプトに渡すことができ、バックグラウンドスクリプトはそれを {{WebExtAPIRef("tabs.executeScript()")}} に渡すことができます:

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+window.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

ターゲットウィンドウで実行されているコンテンツスクリプトとdevtoolsドキュメントの間でメッセージを交換する必要がある場合は、{{WebExtAPIRef("runtime.connect()")}} および {{WebExtAPIRef("runtime.onConnect")}} を使用してバックグラウンドページと devtools ドキュメント間の接続を設定することをお勧めします。バックグラウンドページはタブ ID と {{WebExtAPIRef("runtime.Port")}} オブジェクト間のマッピングを維持し、これを使用して2つのスコープ間でメッセージをルーティングできます。

+ +

+ +

devtools APIs の制限

+ +

これらの API は Chrome devtools API に基づいていますが、Chrome と比較して多くの機能がまだありません。このセクションでは、Firefox 54 の時点でまだ実装されていない機能をリストします。devtools API は活発に開発中であり、将来のリリースでそれらのほとんどのサポートを追加する予定です。

+ +

devtools.inspectedWindow

+ +

以下はサポートされていません:

+ + + +

inspectedWindow.eval() のオプションはいずれもサポートされていません。

+ +

inspectedWindow.eval() を使用して挿入されたスクリプトは、コンソールのすべてのコマンドラインヘルパー関数を使用できませんが、 $0 と inspect(...) の両方がサポートされています (Firefox 55 以降)。

+ +

devtools.panels

+ +

以下はサポートされていません:

+ + + +

例

+ +

GitHub の webextensions-examples リポジトリには、devtools パネルを使用する拡張機能のいくつかの例が含まれています。

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html new file mode 100644 index 0000000000..b07cf5c99e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -0,0 +1,221 @@ +--- +title: 設定ページを実装する +slug: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +--- +
{{AddonSidebar}}
+ +

設定ページは、ユーザーに拡張機能の設定を確認して変える方法を与えます(「プリファレンス」や「オプション」とも呼ばれます)。

+ +

WebExtension API では一般に、設定は storage API で保存されます。設定ページの実装は次の 3 ステップの手順です:

+ + + +
+

runtime.openOptionsPage() 関数を使ってプログラム的に開くこともできます。

+
+ +

簡単な拡張機能

+ +

まずは、ユーザーが訪問するページに青い枠をつける拡張機能を書きます。

+ +

"settings" というディレクトリーを作り、そこに "manifest.json" という名前のファイルを作って下記の中身を入れます:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ +

この拡張機能はブラウザーに対し、"borderify.js" というコンテンツスクリプトを、ユーザーが訪問するすべてのウェブページで読み込むよう指示します。

+ +

次に、"settings" ディレクトリー内に "borderify.js" というファイルを作り、次の中身を入れます:

+ +
document.body.style.border = "10px solid blue";
+ +

これは単にページに青い枠をつけます。

+ +

この拡張機能をインストールしてテストします — お好みのあらゆるウェブページを開きます:

+ +

{{EmbedYouTube("E-WUhihF8fw")}}

+ +

設定を追加する

+ +

今度は枠の色をユーザーが設定できるような設定ページを作りましょう。

+ +

まずは "manifest.json" を次の中身に更新します:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "permissions": ["storage"],
+
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com"
+    }
+  }
+
+}
+ +

新しく次の 3 つのキーを追加しました:

+ + + +

次に "options.html" を提供する約束をしたので、作成します。"settings" ディレクトリー内にその名前でファイルを作成して、次の中身を与えます:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>Border color<input type="text" id="color" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>
+
+ +

これは {{htmlelement("form")}} と、そこにラベル付きのテキスト {{htmlelement("input")}} と送信 {{htmlelement("button")}} を定義します。また "options.js" というスクリプトも入っています。

+ +

もう一度 "options.js"を "settings" ディレクトリーに作り、次の中身を与えます:

+ +
function saveOptions(e) {
+  e.preventDefault();
+  browser.storage.sync.set({
+    color: document.querySelector("#color").value
+  });
+}
+
+function restoreOptions() {
+
+  function setCurrentChoice(result) {
+    document.querySelector("#color").value = result.color || "blue";
+  }
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  var getting = browser.storage.sync.get("color");
+  getting.then(setCurrentChoice, onError);
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);
+
+ +

これは 2 つのことをします:

+ + + +
+

記: 別々の .js ファイルの指定が必要です。インライン JavaScript は使用できません。

+
+ +

ローカルストレージがふさわしいと感じる場合、代わりにローカルストレージに設定値を保存できます。

+ +
+

Firefox の storage.sync の実装はアドオン ID に依存しているのに注意します。storage.sync を使う場合、上記manifest にあるように、manifest.json の applications キーに拡張機能の ID をセットしておく必要があります。

+
+ +

最後に、ストレージから枠の色を読むのに "borderify.js" を更新します:

+ +
+

バージョン 52 より前の Firefox の browser.storage.local.get() のバグにより、下記のコードは機能しません。バージョン 52 より前の Firefox で動作させるには、onGot() の中で 2 回出てくる item.color を item[0].color に変えないといけません。

+
+ +
 function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+function onGot(item) {
+  var color = "blue";
+  if (item.color) {
+    color = item.color;
+  }
+  document.body.style.border = "10px solid " + color;
+}
+
+var getting = browser.storage.sync.get("color");
+getting.then(onGot, onError);
+
+ +

この時点で、拡張機能はこのようになります:

+ +
settings/
+    borderify.js
+    manifest.json
+    options.html
+    options.js
+ +

いま、次を行ってみます:

+ + + +

Firefox で設定ページにアクセスするには about:addons に移動して拡張機能のエントリーの隣の "Preferences" ボタンをクリックします。

+ +

{{EmbedYouTube("ECt9cbWh1qs")}}

+ +

詳しく学ぶ

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/index.html b/files/ja/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..dcbf313a44 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,141 @@ +--- +title: ブラウザー拡張機能 +slug: Mozilla/Add-ons/WebExtensions +tags: + - Add-ons + - Extensions + - Landing + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions +--- +

{{AddonSidebar}}

+ +

拡張機能はブラウザーの能力を拡張・修正するものです。Firefox の拡張機能は WebExtensions API を使ってビルドされ、この API は拡張機能をクロスブラウザーで開発するシステムです。このシステムの大半は Google Chrome と Opera と W3C Draft Community Group でサポートされている extension API と互換性があります。

+ +

これらのブラウザー用に書かれた拡張機能は大抵の場合、ほんの少し変更を加えるだけで Firefox や Microsoft Edge でも動かすことができます。この API は マルチプロセス Firefox にも完全互換です。

+ +

お持ちのアイデアや質問があったり、レガシーアドオンを WebExtensions API を使うように移行するのに助けが要る場合、dev-addons のメーリングリスト (英語) や Add-ons room (英語) や Matrix (英語) にてご連絡ください。

+ +

日本語情報としては Mozilla Japan コミュニティの Slack の #extdev チャンネルで情報交換が行われています。

+ +
+
+

始めましょう

+ + + +

概念

+ + + +

ユーザーインターフェイス

+ + + +

逆引きリファレンス

+ + + +

移行

+ + + +

Firefox でのワークフロー

+ + +
+ +
+

リファレンス

+ +

JavaScript API 群

+ + + +
{{ ListSubpages ("/ja/docs/Mozilla/Add-ons/WebExtensions/API") }}
+ +

Manifest keys

+ + + +
{{ ListSubpages ("/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json") }}
+
+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/index/index.html b/files/ja/mozilla/add-ons/webextensions/index/index.html new file mode 100644 index 0000000000..ec4a9066f7 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/index/index.html @@ -0,0 +1,14 @@ +--- +title: 索引 +slug: Mozilla/Add-ons/WebExtensions/Index +tags: + - Add-ons + - Index + - WebExtensions + - アドオン + - 索引 +translation_of: Mozilla/Add-ons/WebExtensions/Index +--- +
{{AddonSidebar}}
+ +
{{Index("/ja/docs/Mozilla/Add-ons/WebExtensions")}}
diff --git a/files/ja/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html b/files/ja/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html new file mode 100644 index 0000000000..3947b8491f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html @@ -0,0 +1,106 @@ +--- +title: クリップボードとのやりとり +slug: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard +--- +
{{AddonSidebar}}
+ +

document.execCommand()を使用することで、WebExtension API で構築されたブラウザー拡張がシステムのクリップボードと連携できるようになります:

+ + + +

クリップボードへの書き込み

+ +

document.execCommand をユーザー操作に対する短命なイベントハンドラー(例えば click ハンドラー)のなかで実行することで、特別な許可なしに"切り取り"や"コピー"などのクリップボード操作が可能になります。

+ +

例えば、次のような HTML を含むポップアップを見たとします:

+ +
<input id="input" type="text"/>
+<button id="copy">Copy</button>
+
+ +

"copy"ボタンで"input"要素の内容をコピーするためには、次のようなコードを使用します。:

+ +
function copy() {
+  var copyText = document.querySelector("#input");
+  copyText.select();
+  document.execCommand("copy");
+}
+
+document.querySelector("#copy").addEventListener("click", copy);
+ +

execCommand() が click イベントハンドラーの中で呼ばれているので、特別な許可はここでは不要です。

+ +

しかし、たとえば alarm の中からコピーを実行するとどうなるでしょうか。:

+ +
function copy() {
+  var copyText = document.querySelector("#input");
+  copyText.select();
+  document.execCommand("copy");
+}
+
+browser.alarms.create({
+  delayInMinutes: 0.1
+});
+
+browser.alarms.onAlarm.addListener(copy);
+ +

ブラウザーにもよりますが、おそらくコピーはうまくいかないでしょう。Firefox ではうまくいきません。そして、ブラウザーコンソールに以下のようなメッセージが出力されているのが確認できると思います。:

+ +
"document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler."
+ +

上記のようなケースでもコピーを可能にするには、"clipboardWrite" permission の要求が必要です。"clipboardWrite"はユーザー操作に対する短命なイベントハンドラー以外の箇所でもクリップボードに対する書き込みを可能にします。

+ +

特定のブラウザーにおける留意事項

+ +

Chrome の場合:

+ + + +

Firefox の場合:

+ + + +

クリップボードからの読み込み

+ +

"貼り付け"を使用するには"clipboardRead" permission が必要です。例えば、HTML に次のような内容を含めると思います:

+ +
<textarea id="output"></textarea>
+<button id="paste">Paste</button>
+
+ +

ユーザーが"paste"をクリックした際に"output"要素にクリップボードの内容を設定する場合、次のようなコードを使用します:

+ +
function paste() {
+  var pasteText = document.querySelector("#output");
+  pasteText.focus();
+  document.execCommand("paste");
+  console.log(pasteText.textContent);
+}
+
+document.querySelector("#paste").addEventListener("click", paste);
+ +

このコードには、ユーザー操作が起点のイベントハンドラーの場合でも"clipboardRead"のパーミッションが必要です。

+ +

特定のブラウザーにおける留意事項

+ +

Firefox は"clipboardRead" permission をバージョン 54 からサポートしています。しかし、クリップボードからの読み込みにはパーミッションの他に、貼り付け先の要素が content editable mode である必要があります。さらに、コンテンツスクリプトの場合は<textarea>要素のみ動作します。バックグラウンドスクリプトでは、どの要素でも content editable mode に設定できます。

+ + + + diff --git a/files/ja/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/ja/mozilla/add-ons/webextensions/intercept_http_requests/index.html new file mode 100644 index 0000000000..e6b809f440 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -0,0 +1,159 @@ +--- +title: HTTP リクエストへの介入 +slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +tags: + - Add-ons + - Extensions + - How-to + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +--- +
{{AddonSidebar}}
+ +

HTTP リクエストへ介入するには {{WebExtAPIRef("webRequest")}} API を用います。 この API を利用すると、HTTP リクエストの生成段階における様々なタイミングにリスナ関数を追加できます。追加したリスナの中では、以下の処理を行うことができます。

+ + + +

この記事では、以下の 3 つの目的それぞれについて、webRequest モジュールの使い方を説明します。

+ + + +

リクエスト URL の記録

+ +

まず "requests" というディレクトリを新しく作成しましょう。このディレクトリ内に "manifest.json" というファイルを作成し、以下の内容を書き込みます。

+ +
{
+  "description": "Demonstrating webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest",
+    "<all_urls>"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+}
+ +

続いて "background.js" というファイルを作成し、以下のスクリプトを書き込みます。

+ +
function logURL(requestDetails) {
+  console.log("Loading: " + requestDetails.url);
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  logURL,
+  {urls: ["<all_urls>"]}
+);
+
+ +

ここでは、リクエストを作成する直前に logURL() 関数を呼ぶため、{{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} を利用しています。logURL() 関数では、イベントオブジェクトからリクエスト URL を取得し、ブラウザのコンソールに出力しています。 {urls: ["<all_urls>"]} パターン は、すべての URL に対する HTTP リクエストに介入することを表しています。

+ +

それでは実際に動かしてみましょう。まず作成した 拡張機能をインストールし、ブラウザコンソールを開きます。 この状態で適当な web ページを開いてみましょう。すると、ブラウザがリクエストした全リソースの URL がブラウザコンソールに表示されるはずです。

+ +

{{EmbedYouTube("X3rMgkRkB1Q")}}

+ +

リクエストのリダイレクト

+ +

さて、 webRequest を使って HTTP リクエストをリダイレクトさせてみましょう。まず最初に manifest.json を以下の内容へ変更します。

+ +
{
+
+  "description": "Demonstrating webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest",
+    "webRequestBlocking",
+    "https://developer.mozilla.org/",
+    "https://mdn.mozillademos.org/"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

先程と違うのは "webRequestBlocking" パーミッション を追加した点だけです。リクエストを積極的に改変する際には、このパーミッションを追加で指定する必要があります。

+ +

引き続いて "background.js" を以下のように書き換えます。

+ +
var pattern = "https://mdn.mozillademos.org/*";
+
+function redirect(requestDetails) {
+  console.log("Redirecting: " + requestDetails.url);
+  return {
+    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
+  };
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  redirect,
+  {urls:[pattern], types:["image"]},
+  ["blocking"]
+);
+ +

ここでも再び、各リクエストを生成する直前に関数を実行するため {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} イベントリスナを利用しています。リスナ関数では、宛先の URL を redirectUrl で指定したものに書き換えています。

+ +

今回はすべてのリクエストに介入しないこととします。{urls:[pattern], types:["image"]} というオプションにより、(1) "https://mdn.mozillademos.org/" 配下の URL であり、かつ (2) 画像リソースなリクエストのみに介入します。詳細は {{WebExtAPIRef("webRequest.RequestFilter")}} を参照してください。

+ +

また、"blocking" というオプションも渡していることに注意してください。このオプションは、リクエストを改変する際に必ず必要となります。これによってネットワークリクエストがリスナ関数にブロックされるため、リスナ関数から処理が戻るまでブラウザは待機します。"blocking" に関する詳細は {{WebExtAPIRef("webRequest.onBeforeRequest")}} のドキュメントを参照してください。

+ +

それでは実際に動かしてみましょう。画像が多く載っている MDN のページ（https://developer.mozilla.org/ja/docs/Tools/Network_Monitor など）を開き、 拡張機能をリロード します。終わったら MDN のページをリロードしてみましょう。

+ +

{{EmbedYouTube("ix5RrXGr0wA")}}

+ +

リクエストヘッダの改変

+ +

最後の例として、webRequest を使ってリクエストヘッダを改変してみましょう。ここでは、ブラウザが Opera 12.16 と認識されるように "User-Agent" ヘッダを改変してみます。ただし、"http://useragentstring.com/" の配下へアクセスした際にのみ改変することとします。

+ +

"manifest.json" は先程の例で使用したのと同じです。

+ +

"background.js" を以下のように書き換えます。

+ +
var targetPage = "http://useragentstring.com/*";
+
+var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
+
+function rewriteUserAgentHeader(e) {
+  e.requestHeaders.forEach(function(header){
+    if (header.name.toLowerCase() === "user-agent") {
+      header.value = ua;
+    }
+  });
+  return {requestHeaders: e.requestHeaders};
+}
+
+browser.webRequest.onBeforeSendHeaders.addListener(
+  rewriteUserAgentHeader,
+  {urls: [targetPage]},
+  ["blocking", "requestHeaders"]
+);
+ +

ここでは、リクエストヘッダが送信される直前に関数を実行するため {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} イベントリスナを利用しています。

+ +

このリスナ関数は、targetPage パターン に URL がマッチしたリクエストに対してのみ呼び出されます。 ここでも再び、"blocking" がオプションとして与えられていることに注意してください。また、"requestHeaders" もオプションで渡すことにより、送信予定のリクエストヘッダを含んだ配列がリスナ関数に渡されます。これらのオプションに関しては {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} で詳細を確認してください。

+ +

リスナ関数では、リクエストヘッダの配列から "User-Agent" ヘッダを探し、ヘッダの値を変数値 ua で置き換え、改変された配列を最後に返しています。この改変された配列は、やがてサーバへ送信されることとなります。

+ +

それでは実際に動かしてみましょう。useragentstring.com へアクセスし、自分のブラウザが Firefox と判定されることを確認します。ここで拡張機能をリロードし、useragentstring.com のページをリロードします。すると、先程 Firefox と判定されたのは Opera になっているはずです。

+ +

{{EmbedYouTube("SrSNS1-FIx0")}}

+ +

より詳しく

+ +

 webRequest API でできることを詳しく知りたい場合は、webRequest API のリファレンス を参照してください。

diff --git a/files/ja/mozilla/add-ons/webextensions/internationalization/index.html b/files/ja/mozilla/add-ons/webextensions/internationalization/index.html new file mode 100644 index 0000000000..368cba4d29 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/internationalization/index.html @@ -0,0 +1,415 @@ +--- +title: 国際化 +slug: Mozilla/Add-ons/WebExtensions/Internationalization +tags: + - Article + - Guide + - Internationalization + - Localization + - WebExtensions + - i18n + - messages.json + - placeholders + - predefined messages +translation_of: Mozilla/Add-ons/WebExtensions/Internationalization +--- +
{{AddonSidebar}}
+ +

WebExtensions API には、拡張機能を国際化するとても簡単なモジュール — i18n があります。この記事ではその機能を見てみて、どのように動作するのかの実例を提供します。WebExtensions API を使った拡張機能用の i18n システムは、i18n.js のような、よくある i10n 用 JavaScript ライブラリーと同様です。

+ +
+

この記事の見本の拡張機能— notify-link-clicks-i18n — は GitHub で入手できます。以下の節を進んでいくのに合わせてコードを追ってください。

+
+ +

国際化拡張機能の中身

+ +

国際化された拡張機能は、他の拡張機能と同じ機能 — バックグラウンドスクリプト、コンテンツスクリプトなど — を含む他、さまざまなロケールに切り替えられるような追加の部分もあります。これは下記のディレクトリーツリーのように要約されます:

+ + + +

それぞれの新機能を順に見ていきましょう— 以下の節は拡張機能を国際化するときのそれぞれのステップを表しています。

+ +

_locales 内にローカライズ済み文字列を提供する

+ +
+
言語のサブタグを探すには、Language subtag lookup page の検索ツールを使います。注意点としては言語の名前の英語で探す必要があります。
+
+ +

すべての i18n システムはサポートする全ロケールに翻訳済みの文字列が要ります。拡張機能では、これは拡張機能のルート内に置かれる _locales と呼ばれるディレクトリーに入っています。各ロケールはそれぞれの文字列 (メッセージとも呼ばれる) を messages.json というファイル内に入れていて、これは _locales のサブディレクトリー内に置かれており、そこはロケール言語の言語サブタグを使った名前になっています。

+ +

サブタグには基本的な言語に加えて、地域の異型があるのに注意してください。ここで言語と異型は伝統的にハイフンで区切られます: 例えば "en-US"。しかし、_locales 内のディレクトリーでは、区切り文字はアンダースコアでなければならず: "en_US"となります。

+ +

例えば、見本のアプリでは "en" (英語), "de" (ドイツ語), "nl" (オランダ語), "ja" (日本語) のフォルダーがあります。それぞれの中に messages.json ファイルがあります。

+ +

このファイル (_locales/en/messages.json) の構造を見てみます:

+ +
{
+  "extensionName": {
+    "message": "Notify link clicks i18n",
+    "description": "Name of the extension."
+  },
+
+  "extensionDescription": {
+    "message": "Shows a notification when the user clicks on links.",
+    "description": "Description of the extension."
+  },
+
+  "notificationTitle": {
+    "message": "Click notification",
+    "description": "Title of the click notification."
+  },
+
+  "notificationContent": {
+    "message": "You clicked $URL$.",
+    "description": "Tells the user which link they clicked.",
+    "placeholders": {
+      "url" : {
+        "content" : "$1",
+        "example" : "https://developer.mozilla.org"
+      }
+    }
+  }
+}
+ +

このファイルは標準の JSON — メンバーがそれぞれに message と description. を含む名前付きオブジェクトです。すべての項目が文字列です; $URL$ はプレースホルダーで、拡張機能から呼ばれる notificationContent メンバーに置き換えられます。{{anch("Retrieving message strings from JavaScript")}} 節でその方法を学びます。

+ +
+

注: messages.json ファイルの中身についての詳しい情報はロケール固有のメッセージリファレンスにあります。

+
+ +

manifest.json を国際化する

+ +

manifest.json の国際化を実行するにはいくつかの異なるタスクがあります。

+ +

マニフェスト内のローカライズ済み文字列を取得する

+ +

manifest.json にはユーザーに表示される文字列が入っています、例えば拡張機能の名前や説明です。この文字列を国際化して messages.json に適切な訳を置くと、現在のロケールなどに基づき、正しく翻訳された文字列がユーザーに表示されます。

+ +

文字列を国際化するには、このように指定します:

+ +
"name": "__MSG_extensionName__",
+"description": "__MSG_extensionDescription__",
+ +

ここで、単なる固定文字列ではなく、ブラウザーのロケールに依存しないメッセージ文字列を取得します。

+ +

このようなメッセージ文字列を呼び出すには、次のように指定します:

+ +
    +
  1. 2 つのアンダースコアに続いて
    2. +
  2. "MSG" という文字列に続いて
    3. +
  3. 1 つのアンダースコアに続いて
    4. +
  4. messages.json で定義した呼び出しのメッセージ名に続いて
    5. +
  5. 2 つのアンダースコア
    6. +
+ +
__MSG_ + messageName + __
+ +

デフォルトロケールを指定する

+ +

manifest.json にて指定すべきフィールドは default_locale です:

+ +
"default_locale": "en"
+ +

これは拡張機能がブラウザーの現在のロケールに対するロケール文字列を含んでいない場合のデフォルトロケールを指定します。ブラウザーロケールで利用できないあらゆるメッセージ文字列が代わりのデフォルトロケールとして引受られます。ブラウザーが文字列を選ぶ方法に関して意識すべき詳細な点があります —  {{anch("Localized string selection")}} を見てください。

+ +

ロケールに依存しない CSS

+ +

拡張機能の CSS ファイルからもローカライズされた文字列を取得できます。例えば、ロケールに依存しない CSS を組み立てるなら、このようにします:

+ +
header {
+  background-image: url(../images/__MSG_extensionName__/header.png);
+}
+ +

{{anch("Predefined messages")}} を使ってこんな状況を扱う方がより良いものの、これは便利です。

+ +

JavaScript からメッセージ文字列を取得する

+ +

それで、メッセージ文字列とマニフェストがセットアップできました。今は単に JavaScript からメッセージ文字列を呼び出して、拡張機能ができるだけ多くの正しい言語を話すようにします。実際の i18n API はとてもシンプルで、そこには 4 つのメソッドがあります:

+ + + +

notify-link-clicks-i18n の見本の中で、バックグラウンドスクリプトに下記の行があります:

+ +
var title = browser.i18n.getMessage("notificationTitle");
+var content = browser.i18n.getMessage("notificationContent", message.url);
+ +

最初は単に messages.json ファイルからブラウザーの現ロケールのための notificationTitle message 項目を取得します。2 つ目は同様ですが、2 つ目のパラメーターに URL を渡されます。これは何でしょう？これは notificationContent message 項目の中の $URL$ プレースホルダーを置き換えるためにコンテンツを指定する方法です: 

+ +
"notificationContent": {
+  "message": "You clicked $URL$.",
+  "description": "Tells the user which link they clicked.",
+  "placeholders": {
+    "url" : {
+      "content" : "$1",
+      "example" : "https://developer.mozilla.org"
+    }
+  }
+}
+
+ +

"placeholders" メンバーはプレースホルダーを定義し、ここから取得します。"url" プレースホルダーは $1、つまり 2 つ目のパラメーターの getMessage().の最初の値から取ってきたコンテンツを指定します。プレースホルダーは"url" と呼ばれるため、実際のメッセージ文字列の中で呼び出すのに $URL$ を使います (なので "name" には $NAME$などを使う)。複数のプレースホルダーがある場合、{{WebExtAPIRef("i18n.getMessage()")}} の 2 つ目のパラメーターとして渡す配列の中で提供できます —  messages.json 内部で [a, b, c] は$1, $2, $3, として使われる、など。

+ +

例をざっと見ましょう: en/messages.json ファイル内のオリジナルの notificationContent メッセージ文字列はこうです

+ +
You clicked $URL$.
+ +

https://developer.mozilla.org を指すリンクがクリックされたとします。{{WebExtAPIRef("i18n.getMessage()")}} を呼び出した後、2 つ目のパラメーターのコンテンツは messages.json 内で $1 として利用できて、これは "url" プレースホルダー内で定義された $URL$ プレースホルダーを置換します。よって最終のメッセージ文字列はこうなります

+ +
You clicked https://developer.mozilla.org.
+ +

直接プレースホルダーを使う

+ +

メッセージ文字列の中に直接に変数 ($1, $2, $3 など) を挿入できます。例えば上記の "notificationContent" メンバーをこう書き換えてみます:

+ +
"notificationContent": {
+  "message": "You clicked $1.",
+  "description": "Tells the user which link they clicked."
+}
+ +

これはややこしくなくて速いように見えますが、他の方法 ("プレースホルダー"を使う)が最も良いやり方です。これはプレースホルダー名 (例えば"url") や例によって、プレースホルダーの目的を思い出せます — コードを書いた 1週間後には、$1–$8 が何を指すか忘れているでしょうが、プレースホルダー名が何を指すかならもっと思い出しやすいでしょう。

+ +

ハードコーディングされた置き換え

+ +

プレースホルダーにハードコードされた文字列を入れることもできます、これでコード内の変数の代わりに、いつでも同じ値が使われます。例えば:

+ +
"mdn_banner": {
+  "message": "For more information on web technologies, go to $MDN$.",
+  "description": "Tell the user about MDN",
+  "placeholders": {
+    "mdn": {
+      "content": "https://developer.mozilla.org/"
+    }
+  }
+}
+ +

ここでは、$1 といった変数から取るのではなく、プレースホルダーの content をハードコードしています。これはメッセージが複雑で、ファイル内で読みやすくするために色々な値に分割したい時に役立ちますし、さらにこの値はプログラム的にアクセスすることもできます。

+ +

それに加えて、個人やビジネス名といった翻訳したくない文字列を、このような置き換えから指定するのに使うことができます。

+ +

ローカライズ済みの文字列の選択

+ +

ロケールは fr や en のような言語コードによってのみ指定されるか、さらに en_US や en_GB といった地域コードつきで (これは同じ言語の地域的な変形を記述します) 認証されます。i18n に文字列を問い合わせた時、次のアルゴリズムで文字列を選択します:

+ +
    +
  1. 現在のロケールと全く同じ messages.json ファイルがあって、そこに文字列が入っている場合、それを返します
    2. +
  2. それ以外で、現在のロケールが地域つきで認証されて (例en_US) 、そのロケールの地域になし版の messages.json ファイルがあって (例en)、そこに文字列が入っている場合、それを返します
    3. +
  3. それ以外で、manifest.json内に定義された default_locale 用の messages.json ファイルがあって、そこに文字列が入っている場合、それを返します
    4. +
  4. それ以外は空文字を返します
    5. +
+ +

下記の例を見てみます:

+ + + +

default_locale が fr にセットされ、ブラウザーの現在のロケールが en_GB と仮定します:

+ + + +

事前定義されたメッセージ

+ +

i18n モジュールでは、事前定義されたメッセージを提供しており、これまで見てきた{{anch("Calling message strings from manifests and extension CSS")}} と同じ方法で呼び出すことができます。例えばこのように:

+ +
__MSG_extensionName__
+ +

事前定義されたメッセージでも全く同じ文法を使っていますが、メッセージ名の前に @@ をつけるのが異なります、その例は

+ +
__MSG_@@ui_locale__
+ +

下記の表は利用可能なさまざまな事前定義されたメッセージ:を示しています:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
メッセージ名説明
@@extension_id +

拡張機能の内部生成された UUID。この文字列は拡張機能内のリソースの URL を作るのに使います。. ローカライズされた拡張機能でもこのメッセージを使用できます。

+ +

このメッセージをマニフェストファイル内で使用することはできません。

+ +

もう一つの注意点として、この ID は {{WebExtAPIRef("runtime.id")}} から返される、manifest.json 内の applications キーを用いてセットされるアドオン ID とは異なっています。これはアドオンの URL内にある生成された UUID です。つまりこの値を{{WebExtAPIRef("runtime.sendMessage()")}} の extensionId パラメーターの値として使うことはできず、{{WebExtAPIRef("runtime.MessageSender")}} オブジェクトの id プロパティの値のチェックに使うこともできません。

+
@@ui_locale現在のロケールで、この文字列をロケール固有の URL 生成に使うことができます。
@@bidi_dir現在のロケールにおけるテキストの向きで、英語のような左から右の言語では "ltr" で、アラビア語のような右から左への言語では "rtl" となり、このいずれかです。
@@bidi_reversed_dir@@bidi_dir が "ltr" なら "rtl" で、そうでなれば "ltr" です。
@@bidi_start_edge@@bidi_dir が "ltr" なら "left" で、そうでなれば "right" です。
@@bidi_end_edge@@bidi_dir が "ltr" なら "right" で、そうでなれば "left" です。
+ +

前の例に戻って、次のように書いてみるともっと意味がわかります:

+ +
header {
+  background-image: url(../images/__MSG_@@ui_locale__/header.png);
+}
+ +

サポートしているロケール(en, de など)にマッチしたディレクトリー内にロケール固有の画像を保管しているとすると、もっとわかり良いです。

+ +

CSS ファイル内で @@bidi_* メッセージを使った次の例を見てみましょう:

+ +
body {
+  direction: __MSG_@@bidi_dir__;
+}
+
+div#header {
+  margin-bottom: 1.05em;
+  overflow: hidden;
+  padding-bottom: 1.5em;
+  padding-__MSG_@@bidi_start_edge__: 0;
+  padding-__MSG_@@bidi_end_edge__: 1.5em;
+  position: relative;
+}
+ +

英語のような左から右への言語では、上の事前定義されたメッセージを含んだ CSS 定義は、下記の最終コード行に変換されます:

+ +
direction: ltr;
+padding-left: 0;
+padding-right: 1.5em;
+
+ +

アラビア語のような右から左への言語では、次を得ます:

+ +
direction: rtl;
+padding-right: 0;
+padding-left: 1.5em;
+ +

あなたの拡張機能をテストする

+ +

Firefox 45 からは、拡張機能を一時的にディスクからインストールできます — ディスクから読み込むを見てください。これを行ってから、notify-link-clicks-i18n 拡張機能をテストしてみます。お好きなウェブサイトに移動してクリックしたリンクの URL を報告した通知が出てくるか見てください。

+ +

次に、Firefox のロケールをテストしたい拡張機能がサポートするものに変えます。

+ +
    +
  1. Firefox で"about:config"を開き、intl.locale.requested の設定を探します (Firefox 59 より前では、この設定は general.useragent.locale と呼ばれます)。
    2. +
  2. 設定がある場合、それをダブルクリックして (または Return/Enter を押して) 選択し、テストしたいロケールの言語コードを入力して"OK" をクリックします (または Return/Enter を押す)。例えば我々の例では "en" (英語), "de" (ドイツ語), "nl" (オランダ語), "ja" (日本語) がサポートされます。空文字("")をセットすることもできて、そうするとブラウザーは OS のデフォルトロケールを使います。
    3. +
  3. intl.locale.requested の設定が存在しない場合、設定リストを右クリックします (あるいはキーボードからコンテキストメニューを起動します)、そして"New" と "String"を選びます。設定名に intl.locale.requested を入力して、上記ステップ 2 の説明の通りに "de" や "nl" などの値を設定値に入力します。
    4. +
  4. intl.locale.matchOS を探してその設定をダブルクリックし、false に設定します。
    5. +
  5. ブラウザーを再起動して変更を完了します。
    6. +
+ +
+

注: これはブラウザーのロケールを変更させる動作で、この言語用の言語パックがインストールされていなくてもそうなります。その場合はブラウザー UI はデフォルト言語となります。

+
+ +
    +
+ +
+

注: getUILanguage の結果を変更するには言語パックが要求されます、これはブラウザー UI 言語を変更して拡張機能メッセージ用の言語は変更しないためです。

+
+ +

ディスクから拡張機能を読み込み直して、新しいロケールをテストします

+ + + +

{{EmbedYouTube("R7--fp5pPGg")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/author/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/author/index.html new file mode 100644 index 0000000000..b44cecf9d4 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/author/index.html @@ -0,0 +1,44 @@ +--- +title: author +slug: Mozilla/Add-ons/WebExtensions/manifest.json/author +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/author +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須いいえ
例 + 
+"author": "Walt Whitman"
+
+ +

拡張機能の作者で、ブラウザーの UI で表示されることを目的とするものです。developer キーが与えられてそこに "name" プロパティが含まれる場合、それは author キーを上書きします。複数の作者を指定する方法はありません。

+ +

これはローカライズ可能なプロパティです。

+ +

例

+ +
"author": "Walt Whitman"
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.author")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/background/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/background/index.html new file mode 100644 index 0000000000..96eca3f2fb --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/background/index.html @@ -0,0 +1,115 @@ +--- +title: background +slug: Mozilla/Add-ons/WebExtensions/manifest.json/background +tags: + - Add-ons + - Extensions + - Manifest + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/background +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
種類Object
必須いいえ
例 + 
+"background": {
+  "scripts": ["background.js"]
+}
+
+ +

background を使って拡張機能に 1 つ以上のバックグラウンドスクリプトや、オプションとしてバックグラウンドページを含めます。

+ +

バックグラウンドスクリプトは、特定のウェブページやブラウザーウィンドウとは独立した、長い期間の状態や、長い期間の操作を維持する必要があるコードを置く場所です。

+ +

persistent が false と指定されている場合を除き、バックグラウンドスクリプトは拡張機能が読み込まれるとすぐに読み込まれて、拡張機能が無効化やアンインストールされるまで読み込まれたままになります。スクリプト内では、必要な permissions を要求している限り、あらゆる WebExtension APIs を使用できます

+ +

詳しくは 拡張機能の中身の「バックグラウンドページ」の節を見てください。

+ +

background キーは次の 2 つのプロパティ(両方ともオプションです)のうち 1 つを持つオブジェクトです:

+ + + + + + + + + + + + +
"scripts" +

文字列配列であり、各要素は JavaScript ファイルへのパスです。パスは manifest.json を基準にした相対パスです。これらは、拡張機能に含まれるバックグラウンドスクリプトです。

+ +

これらのスクリプトは、同じグローバル window を共有します。

+ +

これらのスクリプトは、配列内の出現順で読み込まれます。

+ +

"scripts" を指定したときは、スクリプトを実行するための空のバックグラウンドページが作られます。

+ +
+

注: <script> タグを使って外部からスクリプトを取り込む場合 (例: <script src = "https://code.jquery.com/jquery-1.7.1.min.js">)、拡張機能の manifest.json で content_security_policy キーを変更する必要があります。

+
+ +
+

注: Firefox 50 より前のバージョンにはこれに影響するバグがあることに注意してください。Firefox のデバッガーが開いているときは、必ずしも配列内の出現順でスクリプトが読み込まれるとは限りません。このバグに対処するには、"page" プロパティを使い、そのページから <script> タグによってバックグラウンドスクリプトを読み込んでください。このバグは Firefox 50 で修正され、それ以降は常に配列内の出現順でスクリプトが読み込まれます。

+
+
"page" +

もしバックグラウンド ページに何か内容を持たせたい場合、そのページを "page" により指定することができます。 manifest.json から拡張機能の中に含まれるHTMLドキュメントを参照するためのパス文字列の String を指定します。

+ +

このプロパティを使うときは、"scripts" を使ってバックグラウンドスクリプトを指定することはできませんが、通常のウェブページと同じように、バックグラウンドページ内からスクリプトを読み込むことができます。

+
+ +

background は以下の追加のキーを含むこともできます:

+ + + + + + + + +
persistent +

Boolean の値。

+ +
    +
  • true を指定すると、拡張機能が読み込まれるかブラウザーが起動した時から、拡張機能の削除、無効化、もしくはブラウザーが終了するまでの間、バックグラウンドページがメモリー上に保持され続けます（つまり、バックグラウンドページが永続化されます）。
    • +
  • false を指定すると、バックグラウンドページはアイドル状態の時にメモリー上からアンロードされ、必要に応じて再生成されます。このようなバックグラウンドページは、リスナーを登録したイベントを処理するためだけにメモリー上に読み込まれるため、イベントページとも呼ばれます。バックグラウンドページがメモリ上からアンロードされていても、リスナーの登録状態は永続化されますが、他の値は永続化されません。イベントページにおいてデータを永続化したい場合は、storage APIを使う必要があります。
    • +
+
+ +

例

+ +
  "background": {
+    "scripts": ["jquery.js", "my-background.js"]
+  }
+ +

２つのバックグラウンドスクリプトを読み込みます。

+ +
  "background": {
+    "page": "my-background.html"
+  }
+ +

カスタムのバックグラウンドページを読み込みます。

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.background", 10)}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_action/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_action/index.html new file mode 100644 index 0000000000..3b0dba68a6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_action/index.html @@ -0,0 +1,240 @@ +--- +title: browser_action +slug: Mozilla/Add-ons/WebExtensions/manifest.json/browser_action +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/browser_action +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"browser_action": {
+  "browser_style": true,
+  "default_icon": {
+    "16": "button/geo-16.png",
+    "32": "button/geo-32.png"
+  },
+  "default_title": "Whereami?",
+  "default_popup": "popup/geo.html",
+  "theme_icons": [{
+    "light": "icons/geo-16-light.png",
+    "dark": "icons/geo-16.png",
+    "size": 16
+  }, {
+    "light": "icons/geo-32-light.png",
+    "dark": "icons/geo-32.png",
+    "size": 32
+  }]
+}
+
+ +

browser actionはあなたのブラウザーのツールバーに拡張機能のボタンを追加します。ボタンはアイコンと、オプションでHTML、CSSとJavaScriptを使用した、ポップアップコンテンツを使用できます。

+ +

ポップアップを提供する場合は、ユーザーがボタンをクリックしたときポップアップが開かれ、ポップアップで実行されているJavaScriptは、ユーザーの実行を処理できます。ポップアップを提供しない場合、ユーザーがボタンをクリックすると、クリックイベントが拡張機能のバックグラウンドスクリプトに送信されます。

+ +

You can also create and manipulate browser actions programmatically using the browserAction API.

+ +

構文

+ +

The browser_action key is an object that may have any of the following properties, all optional:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
browser_styleBoolean +
New in Firefox 48
+ +

Optional, defaulting to false.

+ +

Use this to include a stylesheet in your popup that will make it look consistent with the browser's UI and with other extensions that use the browser_style property. Although this key defaults to false, it's recommended that you include it and set it to true.

+ +

In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css, or chrome://browser/content/extension-mac.css on OS X.

+ +

The Firefox Style Guide describes the classes you can apply to elements in the popup in order to get particular styles.

+ +

The latest-download example extension uses browser_style in its popup.

+
default_areaString +
New in Firefox 54
+ +

Defines the part of the browser in which the button is initially placed. This is a string that may take one of four values:

+ +
    +
  • "navbar": the button is placed in the main browser toolbar, alongside the URL bar.
    • +
  • "menupanel": the button is placed in a popup panel.
    • +
  • "tabstrip": the button is placed in the toolbar that contains browser tabs.
    • +
  • "personaltoolbar": the button is placed in the bookmarks toolbar.
    • +
+ +

This property is only supported in Firefox.

+ +

This property is optional, and defaults to "navbar".

+ +

An extension can't change the location of the button after it has been installed, but the user may be able to move the button using the browser's built-in UI customization mechanism.

+
default_iconObject or String +

Use this to specify one or more icons for the browser action. The icon is shown in the browser toolbar 既定では.

+ +

Icons are specified as URLs relative to the manifest.json file itself.

+ +

You can specify a single icon file by supplying a string here:

+ + 
+"default_icon": "path/to/geo.svg"
+ +

To specify multiple icons in different sizes, specify an object here. The name of each property is the icon's height in pixels, and must be convertible to an integer. The value is the URL. 例えば、:

+ + 
+    "default_icon": {
+      "16": "path/to/geo-16.png",
+      "32": "path/to/geo-32.png"
+    }
+ +

See Choosing icon sizes for more guidance on this.

+
default_popupString +

The path to an HTML file containing the specification of the popup.

+ +

The HTML file may include CSS and JavaScript files using <link> and <script> elements, just like a normal web page.

+ +

Unlike a normal web page, JavaScript running in the popup can access all the WebExtension APIs (subject, of course, to the extension having the appropriate permissions).

+ +

これはローカライズ可能なプロパティです。

+
default_titleString +

Tooltip for the button, displayed when the user moves their mouse over it. If the button is added to the browser's menu panel, this is also shown under the app icon.

+ +

これはローカライズ可能なプロパティです。

+
theme_iconsArray +

This property enables you to specify different icons for dark and light themes.

+ +

If this property is present, it's an array containing at least one ThemeIcons object. A ThemeIcons object contains three properties, all mandatory:

+ +
+
"dark"
+
A URL pointing to an icon. This icon will be selected when themes with dark text are active (e.g. Firefox's Light theme, and the Default theme if no default_icon is specified).
+
"light"
+
A URL pointing to an icon. This icon will be selected when themes with light text are active (e.g. Firefox's Dark theme).
+
"size"
+
The size of the two icons in pixels.
+
+ +

Icons are specified as URLs relative to the manifest.json file itself.

+ +

You need to supply an ThemeIcons in size 16 and one in size 32 (for retina display).

+
+ +

アイコンサイズを選ぶ

+ +

The browser action's icon may need to be displayed in different sizes in different contexts:

+ + + +

If the browser can't find an icon of the right size in a given situation, it will pick the best match and scale it. Scaling may make the icon appear blurry, so it's important to choose icon sizes carefully.

+ +

There are two main approaches to this. You can supply a single icon as an SVG file, and it will be scaled correctly:

+ +
"default_icon": "path/to/geo.svg"
+ +

Alternatively, you can supply several icons in different sizes, and the browser will pick the best match.

+ +

In Firefox:

+ + + +

So you can specify icons that match exactly, on both normal and Retina displays, by supplying three icon files, and specifying them like this:

+ +
    "default_icon": {
+      "16": "path/to/geo-16.png",
+      "32": "path/to/geo-32.png",
+      "64": "path/to/geo-64.png"
+    }
+ +

If Firefox can't find an exact match for the size it wants, then it will pick the smallest icon specified that's bigger than the ideal size. If all icons are smaller than the ideal size, it will pick the biggest icon specified.

+ +

例

+ +
"browser_action": {
+  "default_icon": {
+    "16": "button/geo-16.png",
+    "32": "button/geo-32.png"
+  }
+}
+ +

A browser action with just an icon, specified in 2 different sizes. The extension's background scripts can receive click events when the user clicks the icon using code like this:

+ +

 browser.browseAction.onClicked.addListener(handleClick);

+ +
"browser_action": {
+  "default_icon": {
+    "16": "button/geo-16.png",
+    "32": "button/geo-32.png"
+  },
+  "default_title": "Whereami?",
+  "default_popup": "popup/geo.html"
+}
+ +

A browser action with an icon, a title, and a popup. The popup will be shown when the user clicks the button.

+ +

For a simple, but complete, extension that uses a browser action, see the walkthrough tutorial.

+ +

ブラウザー実装状況

+ +

{{Compat("webextensions.manifest.browser_action", 10)}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html new file mode 100644 index 0000000000..16553c9422 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html @@ -0,0 +1,91 @@ +--- +title: browser_specific_settings +slug: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings +tags: + - Add-ons + - Extensions + - WebExtensions + - manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須 +

通常は不要です ( いつ Add-on ID が必要か？を参考に) 。Firefox 48 より前と Android版Firefox では必須です。

+
例 + 
+"browser_specific_settings": {
+  "gecko": {
+    "id": "addon@example.com",
+    "strict_min_version": "42.0"
+  }
+}
+
+ +

説明

+ +

browser_specific_settings キーは、特定のホストアプリケーションのキーを含みます。

+ +

Firefox (Gecko) プロパティ

+ +

現在、4 つの文字列属性を含む gecko キーのみが存在します。

+ + + +

有効な Gecko バージョンのリストを見てください。

+ +

拡張機能 ID フォーマット

+ +

拡張機能 ID は次のどれかでなければなりません:

+ + + +

後者のフォーマットは生成したり扱うのが簡単です。本当のメールアドレスをここで使うと SPAM を呼びかねないのに気を払ってください。

+ +

例えば：

+ +
"id": "extensionname@example.org",
+
+"id": "{daf44bf7-a45e-4450-979c-91cf07434c3d}"
+ +

例

+ +

使用可能なキーをすべて使用した例です。たいていの拡張機能では strict_max_version と update_url は省略するのに注意してください。

+ +
"applications": {
+  "gecko": {
+    "id": "addon@example.com",
+    "strict_min_version": "42.0",
+    "strict_max_version": "50.*",
+    "update_url": "https://example.com/updates.json"
+  }
+}
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.browser_specific_settings")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.html new file mode 100644 index 0000000000..5a92e26d97 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.html @@ -0,0 +1,136 @@ +--- +title: chrome_settings_overrides +slug: Mozilla/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides +tags: + - Add-ons + - Extensions + - WebExtensions + - chrome_settings_overrides + - manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides +--- +
{{AddonSidebar}}
+ +

chrome_settings_overrides キーを使ってブラウザー設定を上書きします。2つの設定が利用できます:

+ + + +
"chrome_settings_overrides" : {
+  "homepage": "https://developer.mozilla.org/"
+}
+ +
"chrome_settings_overrides": {
+  "search_provider": {
+    "name": "Discogs",
+    "search_url": "https://www.discogs.com/search/?q={searchTerms}",
+    "keyword": "disc",
+    "favicon_url": "https://www.discogs.com/favicon.ico"
+  }
+}
+ + + + + + + + + + + + + + + +
マニフェストキー: chrome_settings_overrides
型Object
必須No
+ +

構文

+ +

chrome_settings_overrides キーは次のプロパティを持つオブジェクトです:

+ + + + + + + + + + + + + + + + + + + + + +
名前型説明
homepageString +

Defines the page to be used as the browser's homepage.

+ +

The replacement is given as a URL. The URL may:

+ +
    +
  • point to a file bundled with the extension, in which case it is given as a URL relative to the manifest.json file
    • +
  • be a remote URL, such as "https://developer.mozilla.org/".
    • +
+ +

If two or more extensions both set this value, then the setting from the most recently installed one will take precedence.

+ +

To override new tabs, use "chrome_url_overrides" instead.

+ +

This is a localizable property.

+
search_providerObject +

Defines a search provider to add to the browser.

+ +

The search provider has a name and a primary search URL. Alternative URLs may be provided, including URLs for more specialized searches like image search. In the URL you supply, use "{searchTerms}" to interpolate the search term into the URL, like: https://www.discogs.com/search/?q={searchTerms}. You can also provide POST parameters to be sent along with the search.

+ +

The search provider will be presented to the user alongside the built-in providers. If you include the is_default property and set it to true, the new search provider will be the default option. By supplying the keyword property, you enable the user to select your search provider by typing the keyword into the search/address bar before the search term.

+ +

This is an object with the properties listed below. All string properties are localizable.

+ +
+
name
+
String: The search engine's name, displayed to the user.
+
search_url
+
String: URL used by the search engine. This must be an HTTPS URL.
+
is_default
+
Boolean: True if the search engine should be the default choice.
+
alternate_urls {{optional_inline}}
+
Array of String: An array of alternative URLs that can be used instead of search_url.
+
encoding {{optional_inline}}
+
String: Encoding of the search term, specified as a standard character encoding name, such as "UTF-8".
+
favicon_url {{optional_inline}}
+
String: URL pointing to an icon for the search engine. This must be a absolute HTTP or HTTPS URL.
+
image_url {{optional_inline}}
+
String: URL used for image search.
+
image_url_post_params {{optional_inline}}
+
String: POST parameters to send to image_url.
+
instant_url {{optional_inline}}
+
String: URL used for instant search.
+
instant_url_post_params {{optional_inline}}
+
String: POST parameters to send to instant_url.
+
keyword {{optional_inline}}
+
String: Address bar keyword for the search engine.
+
prepopulated_id {{optional_inline}}
+
The ID of a built-in search engine to use.
+
search_url_post_params {{optional_inline}}
+
String: POST parameters to send to search_url.
+
suggest_url {{optional_inline}}
+
String: URL used for search suggestions.
+
suggest_url_post_params {{optional_inline}}
+
String: POST parameters to send to suggest_url.
+
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.chrome_settings_overrides", 10)}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.html new file mode 100644 index 0000000000..057d937605 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.html @@ -0,0 +1,97 @@ +--- +title: chrome_url_overrides +slug: Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+  "chrome_url_overrides" : {
+    "newtab": "my-new-tab.html"
+  }
+
+ +

chrome_url_overrides キーを使って、通常はブラウザー自身が行っているいろいろなページへの文書の置き換えをカスタムすることができます。

+ +

構文

+ +

chrome_url_overrides キーは次のプロパティを持つオブジェクトです:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
bookmarkString +

ブックマークに出てくるページへの置き換えを提供します。

+
historyString +

履歴に出てくるページへの置き換えを提供します。

+
newtabString +

"新規タブ" ページに出てくる文書の置き換えを提供します。これはユーザーが新しいタブを開いてまだ文書を読み込んでない時のページです: 例えば、 Ctrl/Command+T のキーボードショートカットで。

+ +

置き換えは HTML ファイルへの URL として与えられます。ファイルは拡張機能に同梱する必要があります: ここにはリモートの URL を指定できません。拡張機能のルートフォルダーから相対的に、次のように指定できます: "path/to/newtab.html".

+ +

文書は通常のウェブページと同様に CSS と JavaScript をロードできます。 ページ内で実行する JavaScript はバックグラウンドスクリプトと同じように privileged "browser.*" APIs のアクセスを得ます。

+ +

ページに <title> を入れるのは良い習慣で、そうしないとタブのタイトルは "moz-extension://..." の URL になるでしょう。

+ +

よくあるユースケースはユーザーに新しいタブページを定義できるようにすることです: これをするには、ユーザーが定義したページにナビゲートするカスタムの新規タブページを提供します。

+ +

2 つ以上の拡張機能がいずれもカスタムの新規タブページを定義する場合、インストールや有効化された最後の分の値を使われます。

+ +

ブラウザーのホームページを上書きするには、代わりに"chrome_settings_overrides" を使います。

+
+ +

すべてのプロパティはローカライズ可能です。

+ +

例

+ +
"chrome_url_overrides" : {
+  "newtab": "my-new-tab.html"
+}
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.chrome_url_overrides")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/commands/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/commands/index.html new file mode 100644 index 0000000000..cddcb59c6c --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/commands/index.html @@ -0,0 +1,186 @@ +--- +title: commands +slug: Mozilla/Add-ons/WebExtensions/manifest.json/commands +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/commands +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "Send a 'toggle-feature' event"
+  }
+}
+
+ +

commands キーを使うと拡張機能用のキーボードショートカットを定義できます。

+ +

それぞれのショートカットは名前、キーの組み合わせ、説明で定義されます。manifest.json で command を定義すると、関連したキーの組み合わせを {{WebExtAPIRef("commands")}} JavaScript API を用いてリッスンできます。

+ +

構文

+ +

commands キーはオブジェクトで、それぞれのショートカットはそのプロパティです。プロパティ名はショートカットの名前です。

+ +

それぞれのショートカット自身がオブジェクトで、最大2 つのプロパティを持ちます:

+ + + +

suggested_key プロパティ自身がオブジェクトで、次のプロパティ(これがすべてです)のいくつかを持ちます:

+ + + +

それぞれのプロパティの値はそのプラットフォーム用のキーボードショートカットで、"+" で分割されたキーの文字列で与えられます。"default" 用の値が明示的に載っていないすべてのプラットフォームで使われます。

+ +

例えば:

+ +
"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Alt+Shift+U",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "Send a 'toggle-feature' event to the extension"
+  },
+  "do-another-thing": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}
+ +

これは 2 つのショートカットを定義します:

+ + + +

次に、これらのコマンドの最初を下記のようにリッスンできます:

+ +
browser.commands.onCommand.addListener(function(command) {
+  if (command == "toggle-feature") {
+    console.log("toggling the feature!");
+  }
+});
+ +

特殊なショートカット

+ +

特殊なショートカットが 3 つあります:

+ + + +

例えば、これはブラウザーアクションをクリックするキーの組み合わせを定義します:

+ +
"commands": {
+  "_execute_browser_action": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}
+ +

ショートカットの値

+ +

ショートカットキーには２つのフォーマットがあります: キーの組み合わせとメディアキーです。

+ +

キーの組み合わせ

+ +
+
Mac では、"Ctrl" は"Command" と翻訳され、実際の "Ctrl"が必要ならば "MacCtrl"と指定します。
+
+ +

キーの組み合わせは 2 つか 3 つのキーからなります:

+ + + +

キーは、上記のリストの順に、"+" で区切られたキー値の組み合わせで与えられます: 例えば、 "Ctrl+Shift+Z".

+ +

キーの組み合わせがブラウザーや(例えば "Ctrl+P")、既存のアドオンですでに使われている場合、それを上書きできます。定義することもできますが、ユーザーが入力してもイベントハンドラーは呼ばれません。

+ +

メディアキー

+ +

あるいは、ショートカットキーは次のいずれかでも指定できます:

+ + + +

例

+ +

既定値だけを使って単一のショートカットを定義するには:

+ +
"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    },
+    "description": "Send a 'toggle-feature' event"
+  }
+}
+ +

２つのショートカットを定義し、１つはプラットフォーム固有のキーの組み合わせとするには:

+ +
"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Alt+Shift+U",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "Send a 'toggle-feature' event"
+  },
+  "do-another-thing": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.commands")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html new file mode 100644 index 0000000000..601b79ec4a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html @@ -0,0 +1,229 @@ +--- +title: content_scripts +slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
+

タイプ

+ 		Array
必須かいいえ
例 + 
+"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["borderify.js"]
+  }
+]
+
+ +

与えられたパターンに URL がマッチしているページにコンテンツスクリプトをロードすることをブラウザに教えます。

+ +

このキーは配列です。それぞれのアイテムは以下の条件を満たすオブジェクトです:

+ + + +

入れることのできるキーの詳細は下記の表にあります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
all_framesBoolean +

true: js と css で指定されたすべてのスクリプトを、指定した URL要求にマッチするすべてのフレームに(タブの最上位フレームでなくても)挿入します。これは親のフレームだけが URL要求にマッチしている子フレームには挿入しません。URL 要求は各フレームごとにチェックされます。

+ +

false: タブの最上位フレームで URL要求にマッチしたフレームだけに挿入します。

+ +

デフォルトは false

+
cssArray +

manifest.json からの相対パスの配列で、マッチしたページに挿入される CSS ファイルを参照する。

+ +

ファイルは指定した順で、DOM が読み込まれる前に挿入される。

+
exclude_globsArrayワイルドカードを含む文字配列。下記の URL パターンにマッチする を見てください。
exclude_matchesArrayマッチパターンの配列。下記の URL パターンにマッチするを見てください。
include_globsArrayワイルドカードを含む文字配列。下記の URL パターンにマッチする を見てください。
jsArray +

manifest.json からの相対パスの配列で、マッチしたページに挿入される JavaScript ファイルを参照する。

+ +

ファイルは指定した順でに挿入される。つまり、例えば、ここで jQuery をインクルードしてから他のコンテンツスクリプトを読み込むには、このようにします:

+ + 
+"js": ["jquery.js", "my-content-script.js"]
+ +

こうすると "my-content-script.js" から jQuery を使えます。

+ +

ファイルは run_at で指定した時に挿入されます。

+
match_about_blankBoolean +

コンテンツスクリプトを "about:blank" もしくは"about:srcdoc"のURLを持つページに挿入します。 if the URL of the page that opened or created this page matches the patterns specified in the rest of the content_scripts key.

+ +

This is especially useful to run scripts in empty iframes , whose URL is "about:blank". To do this you should also set the all_frames key.

+ +

例えば、 以下のような content_scripts キーがあるとします:

+ + 
+"content_scripts": [
+    {
+      "js": ["my-script.js"],
+      "matches": ["https://example.org/"],
+      "match_about_blank": true,
+      "all_frames": true
+    }
+  ]
+ +

ユーザーがhttps://example.org/をロードすると、ページに空のiframeが埋め込まれ、 "my-script.js" がそのiframe内に読み込まれます。

+ +

match_about_blank is supported in Firefox from version 52. Note that in Firefox, content scripts won't be injected into empty iframes at "document_start" even if you specify that value in run_at.

+
matchesArray +

マッチパターンの配列。下記の URLパターンにマッチする を見てください。

+ +

これは唯一の必須なキーです。

+
run_atString +

This option determines when the scripts specified in js are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to {{domxref("Document/readyState", "Document.readyState")}}:

+ +
    +
  • "document_start": corresponds to loading. The DOM is still loading.
    • +
  • "document_end": corresponds to interactive. The DOM has finished loading, but resources such as scripts and images may still be loading.
    • +
  • "document_idle": corresponds to complete. The document and all its resources have finished loading.
    • +
+ +

The default value is "document_idle".

+ +

In all cases, files in js are injected after files in css.

+
+ +

URL パターンにマッチする

+ +

"content_scripts" キーは URL マッチングを元にしてコンテンツスクリプトをドキュメントに添付します: ドキュメントの URL がキーに指定されたものとマッチしたら、スクリプトは添付されます。"content_scripts" 内には指定に使える 4 つのキーワードがあります:

+ + + +

これらのプロパティにマッチするには、URL は配列内で少なくとも 1 つの項目にマッチしなれりばなりません。例えばこのようなプロパティが与えられたら:

+ +
"matches": ["*://*.example.org/*", "*://*.example.com/*"]
+ +

"http://example.org/" と "http://example.com/" の両方がマッチします。

+ +

matches は唯一必須のキーなため、その他の 3 つのキーはそれ以降のマッチ URL の制限に使われます。全体のキーにマッチするために、URL は下記のようでなければなりません:

+ +
    +
  1.  matches プロパティにマッチしている
    2. +
  2. かつ、include_globs があれば、それにマッチする
    3. +
  3. かつ、exclude_matches があれば、それにマッチしない
    4. +
  4. かつ、exclude_globs があれば、それにマッチしない
    5. +
+ +

globs

+ +

glob は単にワイルドカードを含むことのある文字列です。ワイルドカードには 2種類あって、glob内に組み合わせることができます:

+ + + +

例えば: "*na?i" は "illuminati" と "annunaki" にマッチし、"sagnarelli" にはマッチしせん

+ +

例

+ +
"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["borderify.js"]
+  }
+]
+ +

これは "borderify.js" という 1 つのコンテンツスクリプトを、HTTP か HTTPS のいずれかで配布される、"mozilla.org" かそのサブドメインのページに挿入します。

+ +
"content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["jquery.js", "borderify.js"]
+    }
+  ]
+ +

これは 2 つのコンテンツスクリプトを、HTTP か HTTPS のいずれかで配布される、 "mozilla.org" かそのサブドメイン(ただし "developer.mozilla.org" を除く)のページに挿入します。

+ +

コンテンツスクリプトは同じ DOM を見て、配列の順番どおりに挿入されます。よって "borderify.js" からは "jquery.js" によって追加されたグローバル変数が見えます。

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.content_scripts")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.html new file mode 100644 index 0000000000..17a3658865 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.html @@ -0,0 +1,121 @@ +--- +title: content_security_policy +slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須いいえ
例 + 
+"content_security_policy": "default-src 'self'"
+
+ +

拡張機能はデフォルトでCSP(content security policy)が適用されています。デフォルトのポリシーの場合、ソースは <script> タグ及び <object> タグからのみロードできるように制限されており、 eval()のような潜在的に安全でない慣習(バッドプラクティス)は制限されます。この実装のより詳細は Default content security policyを見てください。

+ +

"content_security_policy" manifestキーを使用して、アドオンのセキュリティを緩くしたり逆にもっと制限することができます。  このキーは、Content-Security-Policy HTTPヘッダーと同じ方法で指定されます。 CSP  の文法の一般的な記述はCSPを使用するを見てください。

+ +

例として以下のような使用方法が可能です：

+ + + +

指定できるポリシーには以下のような制限があります。

+ + + +

例

+ +

有効な例

+ +

"https://example.com" からのリモートスクリプトを許可: (注 1 を見よ)

+ +
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"
+ +

"jquery.com" のサブドメインからのリモートスクリプトを許可:

+ +
"content_security_policy": "script-src 'self' https://*.jquery.com; object-src 'self'"
+ +

eval() and friendsを許可:

+ +
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
+ +

次のインラインスクリプトを許可: "<script>alert('Hello, world.');</script>":

+ +
"content_security_policy": "script-src 'self' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='; object-src 'self'"
+ +

他のポリシーはそのままだが、画像は拡張機能にパッケージされていることを要求する:

+ +
"content_security_policy": "script-src 'self'; object-src 'self'; img-src 'self'"
+ +

すべてのコンテンツが拡張機能にパッケージされていることを要求する:

+ +
"content_security_policy": "default-src 'self'"
+
+ +

無効な例

+ +

"object-src" ディレクティブが省略されているポリシー:

+ +
"content_security_policy": "script-src 'self' https://*.jquery.com;"
+ +

 "script-src" ディレクティブにおいて "self" キーワードが入っていないポリシー:

+ +
"content_security_policy": "script-src https://*.jquery.com; object-src 'self'"
+ +

リモートソーススキームが https ではない:

+ +
"content_security_policy": "script-src 'self' http://code.jquery.com; object-src 'self'"
+ +

ワイルドカードを通常のドメインに使用している:

+ +
"content_security_policy": "script-src 'self' https://*.blogspot.com; object-src 'self'"
+ +

リモートソーススキームは https だがホストがない:

+ +
"content_security_policy": "script-src 'self' https:; object-src 'self'"
+ +

ディレクティブに現在サポートしていない 'unsafe-inline'キーワードが含まれている:

+ +
"content_security_policy": "script-src 'self' 'unsafe-inline'; object-src 'self'"
+ +

1. 注記: 有効な例は正しい CSP のキーの使い方を表しますが、'unsafe-eval', 'unsafe-inline', リモートスクリプト、リモートソースを CSP に指定する拡張機能は、主なセキュリティの問題から、addons.mozilla.org に載せる拡張機能には許可されません。

+ +

ブラウザ互換性

+ + + +

 

+ +

{{Compat("webextensions.manifest.content_security_policy")}}

+ +

 

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/default_locale/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/default_locale/index.html new file mode 100644 index 0000000000..39e70b0d6a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/default_locale/index.html @@ -0,0 +1,44 @@ +--- +title: default_locale +slug: Mozilla/Add-ons/WebExtensions/manifest.json/default_locale +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/default_locale +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須条件次第: _locales サブディレクトリがある場合は必要で、そうでない場合は不要。
例 + 
+"default_locale": "en"
+
+ +

このキーは拡張機能が _locales ディレクトリを含んでいる場合は必要で、そうでない場合は不要です。これは _locales のサブディレクトリを識別し、このサブディレクトリは拡張機能の既定の文字列を探すために使用されます。

+ +

国際化を見てください。

+ +

例

+ +
"default_locale": "en"
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.default_locale")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/description/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/description/index.html new file mode 100644 index 0000000000..0caa680efe --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/description/index.html @@ -0,0 +1,44 @@ +--- +title: description +slug: Mozilla/Add-ons/WebExtensions/manifest.json/description +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/description +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須いいえ
例 + 
+"description": "Replaces pictures with pictures of cats."
+
+ +

ブラウザーのユーザーインターフェースに表示するための、拡張機能の簡単な説明です。

+ +

これはローカライズ可能なプロパティです。

+ +

例

+ +
"description": "Replaces pictures with pictures of cats."
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.description")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/developer/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/developer/index.html new file mode 100644 index 0000000000..0495588666 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/developer/index.html @@ -0,0 +1,52 @@ +--- +title: developer +slug: Mozilla/Add-ons/WebExtensions/manifest.json/developer +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/developer +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"developer": {
+  "name": "Walt Whitman",
+  "url": "https://en.wikipedia.org/wiki/Walt_Whitman"
+}
+
+ +

拡張機能の開発者の名前と、そのホームページ URL で、ブラウザーの UI に表示されるためのもの。

+ +

このオブジェクトと、そのプロパティの2つ共、オプションです。"name" と "url" プロパティは、存在する場合、author と homepage_url キーをそれぞれ上書きします。このオブジェクトでは単独の開発者名と URL が指定できます。

+ +

これはローカライズ可能なプロパティです。

+ +

例

+ +
"developer": {
+  "name": "Walt Whitman",
+  "url": "https://en.wikipedia.org/wiki/Walt_Whitman"
+}
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.developer")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html new file mode 100644 index 0000000000..42a1b0d092 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html @@ -0,0 +1,42 @@ +--- +title: devtools_page +slug: Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須いいえ
例 + 
+"devtools_page": "devtools/my-page.html"
+
+ +

このキーを使って拡張機能にブラウザー組み込みの開発ツールを拡張することができます。

+ +

このキーは HTML ファイルの URL として定義されます。その HTML ファイルは拡張機能に同梱し、URL は拡張機能のルートからの相対パスである必要があります。

+ +

詳しくは 開発者ツールの拡張を見てください。

+ +

例

+ +
"devtools_page": "devtools/my-page.html"
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.devtools_page")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html new file mode 100644 index 0000000000..484b6ac14b --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html @@ -0,0 +1,46 @@ +--- +title: homepage_url +slug: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須いいえ
例 + 
+"homepage_url": "https://example.org/my-addon"
+
+ +

拡張機能のホームページの URL です。

+ +

developer キーが提供されていて、そこに "url" プロパティが含まれている場合、homepage_url キーは上書きされます。

+ +

これは国際化できるプロパティです。

+ +

例

+ +
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify"
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.homepage_url")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/icons/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/icons/index.html new file mode 100644 index 0000000000..e6f5b3d376 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/icons/index.html @@ -0,0 +1,78 @@ +--- +title: icons +slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/icons +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}
+
+ +

The icons key specifies icons for your extension. Those icons will be used to represent the extension in components such as the Add-ons Manager.

+ +

It consists of key-value pairs of image size in px and image path relative to the root directory of the extension.

+ +

If icons is not supplied, a standard extension icon will be used by default.

+ +

You should supply at least a main extension icon, ideally 48x48 px in size. This is the default icon that will be used in the Add-ons Manager. You may, however, supply icons of any size and Firefox will attempt to find the best icon to display in different components.

+ +

Firefox will consider the screen resolution when choosing an icon. To deliver the best visual experience to users with high-resolution displays, such as Retina displays, provide double-sized versions of all your icons.

+ +

例

+ +

The keys in the icons object specify the icon size in px, values specify the relative icon path. This example contains a 48px extension icon and a larger version for high-resolution displays.

+ +
"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}
+ +

SVG

+ +

You can use SVG and the browser will scale your icon appropriately. There are currently two caveats though:

+ +
    +
  1. You need to specify a viewBox in the image. E.g.: + 
    <svg viewBox="0 0 48 48" width="48" height="48" ...
    +
    2. +
  2. Even though you can use one file, you still need to specify various size of the icon in your manifest. E.g.: + 
    "icons": {
+  "48": "icon.svg",
+  "96": "icon.svg"
+}
    +
    3. +
+ +
+

If you are using a program like Inkscape for creating SVG, you might want to save it as a "plain SVG". Firefox might be confused by various special namespaces and not display your icon.

+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.icons")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/incognito/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/incognito/index.html new file mode 100644 index 0000000000..e7876c1859 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/incognito/index.html @@ -0,0 +1,70 @@ +--- +title: incognito +slug: Mozilla/Add-ons/WebExtensions/manifest.json/incognito +tags: + - Add-ons + - WebExtensions + - incognito + - manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/incognito +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須いいえ
例 + 
+"incognito": "spanning"
+ + 
+"incognito": "split"
+ + 
+"incognito": "not_allowed"
+
+ +

incognito キーを使ってプライベートブラウジングウィンドウで機能拡張が動作する方法を管理できます。

+ +

This is a string which may take any of the following values:

+ + + +

例

+ +
"incognito": "spanning"
+
+ +
"incognito": "split"
+
+ +
"incognito": "not_allowed"
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.incognito")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..34274940de --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,123 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +
{{AddonSidebar}}
+ +

manifest.json ファイルは、WebExtension API を使う拡張機能に必ず含めなければならない唯一のファイルです。

+ +

manifest.json を使うことで、拡張機能の名前やバージョンといった基本的なメタデータを指定したり、拡張機能の機能的な側面として、例えばバックグラウンドスクリプトやコンテンツスクリプト、ブラウザーアクションを指定することもできます。

+ +

これは JSON形式のファイルですが、１つ例外があります: "//"-形式のコメントが許可されています。

+ +

manifest.json のキー一覧は次の通り:

+ +

{{ListSubpages("/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json")}}

+ +

manifest.json のキーの注意点

+ + + +

manifest.json の情報を実行時に参照する

+ +

拡張機能の manifest には、拡張機能の JavaScript から {{WebExtAPIRef("runtime.getManifest()")}} 関数を使ってアクセスできます:

+ +
browser.runtime.getManifest().version;
+ +

例

+ +

下記のブロックには一般的な manifest keys の基本文法を示します。

+ +
+

注: これはコピー・ペーストできるような使われ方のつもりではないのに注意してください: どのキーが必要かは開発している拡張機能に依存します。

+
+ +

完全な例は Example extensions を見てください。

+ +
{
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com",
+      "strict_min_version": "42.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["jquery.js", "my-background.js"],
+    "page": "my-background.html"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "commands": {
+    "toggle-feature": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "linux": "Ctrl+Shift+U"
+      },
+      "description": "Send a 'toggle-feature' event"
+    }
+  },
+
+  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
+
+  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "default_locale": "en",
+
+  "description": "...",
+
+  "icons": {
+    "48": "icon.png",
+    "96": "icon@2x.png"
+  },
+
+  "manifest_version": 2,
+
+  "name": "...",
+
+  "page_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "permissions": ["webNavigation"],
+
+  "version": "0.1",
+
+  "web_accessible_resources": ["images/my-image.png"]
+}
+ +

ブラウザーの実装状況

+ +

マニフェストキーとサブキーのすべてを見るには、完全な manifest.json ブラウザー互換テーブルを見てください。

+ + + +

{{Compat("webextensions.manifest")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html new file mode 100644 index 0000000000..0690f56e8d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html @@ -0,0 +1,45 @@ +--- +title: manifest_version +slug: Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version +--- +

{{AddonSidebar}}

+ + + + + + + + + + + + + + + + +
型Number
必須はい
例 + 
+"manifest_version": 2
+
+ +

このキーは、拡張機能で使用される manifest.json のバージョンを指定します。

+ +

現在、この値は常に 2 です。

+ +

例

+ +
"manifest_version": 2
+
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.manifest_version")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/name/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/name/index.html new file mode 100644 index 0000000000..b3e34dd25f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/name/index.html @@ -0,0 +1,46 @@ +--- +title: name +slug: Mozilla/Add-ons/WebExtensions/manifest.json/name +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/name +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須はい
例 + 
+"name": "My Extension"
+
+ +

拡張機能の名前です。これはブラウザーのユーザーインターフェースや addons.mozilla.org のようなサイトで拡張機能を識別するために使用されます。

+ +

名前がUIに表示されるよう長すぎないようにするのは良い習慣です。Google Chrome と Microsoft Edge は名前を45文字に制限しています。

+ +

これは国際化できるプロパティです。

+ +

例

+ +
"name": "My Extension"
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.name")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/omnibox/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/omnibox/index.html new file mode 100644 index 0000000000..3bc821b62e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/omnibox/index.html @@ -0,0 +1,50 @@ +--- +title: omnibox +slug: Mozilla/Add-ons/WebExtensions/manifest.json/omnibox +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/omnibox +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"omnibox": {
+  "keyword": "mdn"
+}
+
+ +

omnibox を使って拡張機能のための omnibox キーワードを定義します。

+ +

ユーザーがブラウザーのアドレスバーにキーワードを入力する時、スペースに続いて、続きの文字が omnibox API を使って拡張機能に送られます。拡張機能は自身のサジェストを使ってアドレスバーのドロップダウンサジェストのリストを生成できます。

+ +

2つ以上の拡張機能が同じキーワードを定義している場合、最後にインストールされた拡張機能がキーワードを管理します。以前にインストールされたあらゆる拡張機能はもう omnibox API を使えません。

+ +

例

+ +
"omnibox": {
+  "keyword": "mdn"
+}
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.omnibox")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.html new file mode 100644 index 0000000000..66d1571eea --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.html @@ -0,0 +1,98 @@ +--- +title: optional_permissions +slug: Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions +tags: + - Add-ons + - WebExtensions + - manifest.json + - optional_permissions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Array
必須いいえ
例 + 
+"optional_permissions": [
+  "*://developer.mozilla.org/*",
+  "webRequest"
+]
+
+ +

optional_permissions キーを使って、拡張機能がインストールされた後に、実行時に要求するパーミッションを一覧できます。

+ +

permissions キーは拡張機能がインストールされる時に必要とするパーミッションを一覧しますが、optional_permissions は拡張機能のインストール時には必要でないが、インストール後のどこかで要求されることのあるパーミッションを一覧します。パーミッションを要求するには、permissions API を使います。パーミッションを要求すると、おそらくユーザーに拡張機能にパーミッションを許可しても良いかを尋ねるダイアログが表示されるでしょう。

+ +

このキーは 2種類のパーミッションを含みます: ホストパーミッションと API パーミッションです。

+ +

ホストパーミッション

+ +

これは permissions キーで指定できるホストパーミッションと同じです。

+ +

API パーミッション

+ +

下記のいずれも入れることができますが、すべてのブラウザーに入ってはいません: ブラウザー固有の詳細については、互換性テーブルを確認してください:

+ + + +

これは permissions で許可される API パーミッションのサブセットです。

+ +

このセットでは、下記のパーミッションが、ユーザープロンプトなしで暗黙的に許可されます: activeTab, cookies, idle, webRequest, webRequestBlocking

+ +

例

+ +
 "optional_permissions": ["*://developer.mozilla.org/*"]
+ +

拡張機能に developer.mozilla.org 以下のページの権限アクセス要求を有効にします。

+ +
  "optional_permissions": ["tabs"]
+ +

拡張機能に tabs API の権限部分へのアクセス要求を有効にします。

+ +
  "optional_permissions": ["*://developer.mozilla.org/*", "tabs"]
+ +

拡張機能に上記の両方への要求を有効にします。

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.manifest.optional_permissions")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html new file mode 100644 index 0000000000..ce6eb64d2f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html @@ -0,0 +1,103 @@ +--- +title: options_ui +slug: Mozilla/Add-ons/WebExtensions/manifest.json/options_ui +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/options_ui +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"options_ui": {
+  "page": "options/options.html"
+}
+
+ +

options_ui キーは、拡張機能のオプションページを定義するために使用します。

+ +

オプションページは、拡張機能の設定を含みます。オプションページはブラウザーのアドオンマネージャー、または拡張機能内で {{WebExtAPIRef("runtime.openOptionsPage()")}} を使用することでアクセスできます。

+ +

options_ui を拡張機能にパッケージされた HTML ファイルへのパスとして指定します。通常のウェブページのように、HTML、CSS、JavaScript ファイルを含めることができます。しかし、通常のページと異なり、拡張機能が権限を持つすべての WebExtension API を使用できます。しかし、バックグラウンドスクリプトとは異なるスコープで実行されます。

+ +

オプションページとバックグラウンドスクリプトの JavaScript 上で、データや関数を共有したい場合、{{WebExtAPIRef("extension.getBackgroundPage()")}} を使用してバックグラウンドスクリプトの Window への参照を直接取得するか、{{WebExtAPIRef("extension.getViews()")}} で拡張機能内で実行されているいずれかのページの {{domxref("Window")}} を取得します。あるいは、JavaScript で runtime.sendMessage() や runtime.onMessage、runtime.connect() を使用することで、オプションページとバックグラウンドスクリプト間で相互にコミュニケーションできます。後者の方法 (や同等の runtime.Port ) でも バックグラウンドスクリプトとコンテンツスクリプトとでオプションを共有できます。

+ +

一般的に、オプションページで変更されたオプションは、storage API を使用して、storage.sync (ユーザーがログインしているすべてのブラウザーインスタンス間で設定を同期する場合) か storage.local (現在のマシン / プロファイルのローカル設定にする場合) のいずれかに保存します。バックグラウンドスクリプトに変更を通知する必要がある場合、バックグラウンドスクリプトで storage.onChanged にリスナーを追加します。

+ +

構文

+ +

options_ui キーは次のコンテンツを持つオブジェクトです:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
browser_styleBoolean +

省略可能。既定では true。

+ +

これを使ってページにブラウザーの UI と browser_style プロパティを使う他の拡張機能とで一貫した見た目とするようなスタイルシートを入れることができる。既定では true だが、このプロパティを入れるのは推奨される。

+ +

Firefox では、chrome://browser/content/extension.css か、OS X では chrome://browser/content/extension-mac.css でスタイルシートを見ることができる。

+ +

Firefox Style Guide はポップアップ内の要素が特定のスタイルを取るために適用させるクラスを説明している。

+
open_in_tabBoolean +

省略可能。既定値は false。

+ +

true の場合、オプションページはブラウザーのアドオンマネージャーに統合されたものではなく、通常のブラウザータブで開かれる。

+
pageString +

必須。

+ +

オプションページの仕様を含む HTML ファイルへのパス。

+ +

パスは manifest.json 自体への相対パス。

+
+ +

例

+ +
  "options_ui": {
+    "page": "options/options.html"
+  }
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.options_ui")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/page_action/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/page_action/index.html new file mode 100644 index 0000000000..0eb928bace --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/page_action/index.html @@ -0,0 +1,200 @@ +--- +title: page_action +slug: Mozilla/Add-ons/WebExtensions/manifest.json/page_action +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/page_action +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"page_action": {
+  "browser_style": true,
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?",
+  "default_popup": "popup/geo.html"
+}
+
+ +

ページアクションは拡張機能がブラウザーのURLバーの中に追加できるアイコンです。

+ +

拡張機能では関連したポップアップをつけて、そこでHTML、CSS、 JavaScript を使ったコンテンツを提供することもできます。

+ +

ポップアップを提供した場合、ユーザーがアイコンをクリックした時にポップアップが開いて、ポップアップ内で実行する JavaScript にてユーザーのインタラクションを扱います。ポップアップをつけない場合、ユーザーがアイコンをクリックした時のクリックイベントは拡張機能の background scripts に送られます。

+ +

pageAction API を使用してプログラムでページアクションを作成および操作することもできます。

+ +

ページアクションはブラウザアクションと似ていますが、ブラウザ全体ではなく特定の Web ページに関連付けられている点が異なります。アクションが特定のページにのみ関連している場合は、ページアクションを使用して関連するページにのみ表示する必要があります。アクションがすべてのページまたはブラウザ自体に関連している場合は、ブラウザアクションを使用してください。

+ +

ブラウザアクションはデフォルトで表示されますが、ページアクションはデフォルトで非表示になります。タブのIDを渡して pageAction.show() を呼び出すことで、それらを特定のタブに対して表示できます。show_matches プロパティを使用してこのデフォルトの動作を変更することもできます。

+ +

構文

+ +

The page_action key is an object that may have any of three properties, all optional:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
browser_styleBoolean +

Optional, defaulting to false.

+ +

Use this to include a stylesheet in your popup that will make it look consistent with the browser's UI and with other extensions that use the browser_style property. Although this key defaults to false, it's recommended that you include it and set it to true in order to make your popups consistent with the look of the rest of the browser user interface.

+ +

In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css, or chrome://browser/content/extension-mac.css on OS X.

+ +

The Firefox Style Guide describes the classes you can apply to elements in the popup in order to get particular styles.

+ +

The latest-download example extension uses browser_style in its popup.

+
default_iconObject or String +

Use this to specify an icon for the action.

+ +

It's recommended that you supply two icons here, one 19x19 pixels, and one 38x38 pixels, and specify them in an object with properties named "19" and "38", like this:

+ + 
+    "default_icon": {
+      "19": "geo-19.png",
+      "38": "geo-38.png"
+    }
+ +

If you do this, then the browser will pick the right size icon for the screen's pixel density.

+ +

You can just supply a string here:

+ + 
+"default_icon": "geo.png"
+ +

If you do this, then the icon will be scaled to fit the toolbar, and may appear blurry.

+
default_popupString +

The path to an HTML file containing the specification of the popup.

+ +

The HTML file may include CSS and JavaScript files using <link> and <script> elements, just like a normal web page. However, don't use <script> with embedded code, because you'll get a  Content Violation Policy error. Instead, <script> must use the src attribute to load a separate script file.

+ +

Unlike a normal web page, JavaScript running in the popup can access all the WebExtension APIs (subject, of course, to the extension having the appropriate permissions).

+ +

これはローカライズ可能なプロパティです。

+
default_titleString +

Tooltip for the icon, displayed when the user moves their mouse over it.

+ +

This is a localizable property.

+
hide_matchesArray of Match Pattern except <all_urls> +

Hide the page action 既定では for pages whose URLs match any of the given match patterns.

+ +

Note that page actions are always hidden 既定では unless show_matches is given. Therefore it only makes sense to include this property if show_matches is also given, and in this case it will override the patterns in show_matches. 例えば、consider a value like:

+ + 
+"page_action": {
+  "show_matches": ["https://*.mozilla.org/*"],
+  "hide_matches": ["https://developer.mozilla.org/*"]
+}
+ +

This shows the page action 既定では for all HTTPS  URLs under the "mozilla.org" domain, except for pages under "developer.mozilla.org".

+
show_matchesArray of Match Pattern +

Show the page action 既定では for pages whose URLs match any of the given patterns.

+ +

See also hide_matches.

+
pinnedBoolean +

Optional, defaulting to true.

+ +

Controls whether or not the page action should appear in the location bar 既定では when the user installs the extension.

+
+ +

例

+ +
"page_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  }
+}
+ +

A page action with just an icon, specified in 2 different sizes. The extension's background scripts can receive click events when the user clicks the icon using code like this:

+ +
 browser.pageAction.onClicked.addListener(handleClick);
+ +
"page_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?",
+  "default_popup": "popup/geo.html"
+}
+ +

A page action with an icon, a title, and a popup. The popup will be shown when the user clicks the icon.

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.manifest.page_action")}}

+ +

関連情報

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.html new file mode 100644 index 0000000000..097d3a4102 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/permissions/index.html @@ -0,0 +1,190 @@ +--- +title: permissions +slug: Mozilla/Add-ons/WebExtensions/manifest.json/permissions +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Array
必須項目か？いいえ
例 + 
+"permissions": [
+  "*://developer.mozilla.org/*",
+  "webRequest"
+]
+
+ +

拡張機能が特別な権限を必要とする際には permission キーを使用します。このキーには文字列の配列を指定し、各文字列がパーミッションを要求します。

+ +

このキーを用いてパーミッションを要求した場合、ブラウザーはインストール時に「この拡張機能はこれだけの特権を要求しています」と通知し、これらの特権を許可しても大丈夫かとユーザーに確認します。ブラウザーはまた、インストール後にユーザーがアドオンの特権を調査することも許可します。

+ +

キーには以下の 3 種類があります。

+ + + +

{{英語版章題("Host permissions")}}

+ +

host パーミッション

+ +

host パーミッションはマッチパターンとして指定します。それぞれのパターンによって、アドオンの要求する権限が有効となる URL の範囲を指定します。host パーミッションの例は "*://developer.mozilla.org/*" のようなものです。

+ +

この権限には以下が含まれます。

+ + + +

Firefox では バージョン 56 以降で拡張機能は自動的に自身をオリジンとする host パーミッションを次の形式で取得します:

+ +
moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+ +

ここで 60a20a9b-1ad4-af49-9b6c-c64c98c37920 は拡張機能の内部 ID です。拡張機能は extension.getURL() を呼び出すことでこの URL を取得できます:

+ +
browser.extension.getURL("");
+// moz-extension://60a20a9b-1ad4-af49-9b6c-c64c98c37920/
+ +

{{英語版章題("API permissions")}}

+ +

API パーミッション

+ +

API パーミッションには、拡張機能から使用したい WebExtension API の名前をキーワードとして指定します。

+ +

現時点で使用できるキーワードは以下の通りです。

+ + + +

ほとんどの場合、パーミッションはその API へのアクセス権を付与するだけですが、以下のような例外があります。

+ + + +

{{英語版章題("activeTab permission")}}

+ +

activeTab パーミッション

+ +

このパーミッションは "activeTab" と指定されます。拡張機能が activeTab パーミッションを持つなら、ユーザーが拡張機能と相互作用する時に、拡張機能はアクティブなタブ限定の特別な権限が許可されます。

+ +

"ユーザーの相互作用" とは次のようなものです:

+ + + +

特別な権限とは:

+ + + +

このパーミッションの意図は、拡張機能によくあるユースケースを、強力すぎるパーミッションを与えずに実行できるようにすることです。多くの拡張機能は「ユーザーが希望したら現在のページで何かをする」ことを希望しています。例えば、ユーザーがブラウザーアクションをクリックした時に現在のページでスクリプトを実行する拡張機能を考えます。activeTab パーミッションがない場合、拡張機能は <all_urls> の host パーミッションを要求する必要があります。しかし、これは拡張機能に必要以上の力を与えています: アクティブなタブで単にユーザーアクションに応答する代わりに、いかなるタブで、いかなるタイミングで、スクリプトを実行できます。

+ +

{{英語版章題("Clipboard access")}}

+ +

クリップボードのアクセス

+ +

拡張機能にクリップボードとやりとりできるようにする、2つの権限があります:

+ + + +

これについての詳細はクリップボードと相互作用するを見てください。

+ +

Unlimited storage

+ +

unlimitedStorage パーミッションは:

+ + + +

{{英語版章題("Example")}}

+ +

例

+ +
 "permissions": ["*://developer.mozilla.org/*"]
+ +

これは developer.mozilla.org ドメイン配下のページにアクセスする権限を要求しています。

+ +
  "permissions": ["tabs"]
+ +

tabs API を使用する権限を要求しています。

+ +
  "permissions": ["*://developer.mozilla.org/*", "tabs"]
+ +

上記の権限を両方ともに要求しています。

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.manifest.permissions")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.html new file mode 100644 index 0000000000..c7a2119c9b --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.html @@ -0,0 +1,87 @@ +--- +title: protocol_handlers +slug: Mozilla/Add-ons/WebExtensions/manifest.json/protocol_handlers +tags: + - Add-ons + - Extensions + - WebExtensions + - manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/protocol_handlers +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Array
必須いいえ
例 + 
+"protocol_handlers": [
+  {
+    "protocol": "ircs",
+    "name": "IRC Mozilla Extension",
+    "uriTemplate": "https://irccloud.mozilla.com/#!/%s"
+  }
+]
+
+ +

このキーを使ってウェブベースのプロトコルハンドラーを登録します。

+ +

プロトコルハンドラーは特定の種類のリンクを扱う方法を知るアプリケーションです: 例えば、メールクライアントは "mailto:" リンクのプロトコルハンドラーです。ユーザーが "mailto:" リンクをクリックした時、ブラウザーは "mailto:" プロトコルのハンドラーが選んだアプリケーションを開きます (または設定によっては、ハンドラーの選択を与えます)。

+ +

このキーでは、特定プロトコルのハンドラーとしてウェブサイトを登録できます。このキーの文法と意味は Navigator.registerProtocolHandler() 関数によく似ていて、その違いは registerProtocolHandler() だけはウェブサイト自身をハンドラーに登録できることです。

+ +

プロトコルハンドラーは 3 つのプロパティを持ち、すべて必須です:

+ +
+
protocol
+
+

プロトコルを定義する文字列。次のいずれか:

+ +
    +
  • 次のどれか: "bitcoin", "dat", "dweb", "geo", "gopher", "im", "ipfs", "ipns", "irc", "ircs", "magnet", "mailto", "mms", "news", "nntp", "sip", "sms", "smsto", "ssb", "ssh", "tel", "urn", "webcal", "wtai", "xmpp".
    • +
  • "web+" や "ext+"で始まるカスタム名からなる文字列。例えば: "web+foo" や "ext+foo"。カスタム名は小文字の ASCII 文字列でなければならない。拡張機能は "ext+" の形式を使うのが推奨です。
    • +
+
+
name
+
プロトコルハンドラーを表す文字列。これはユーザーがハンドラーにリンクを開くかどうか問い合わせた時に、ユーザーに表示されます。
+
uriTemplate
+
ハンドラーの URL を表す。この文字列はプレースホルダーとして "%s" を入れる必要があります: これは処理される文書の URL がエスケープされたもので置き換えられます。この URL は本当の URL や電話番号、電子メールアドレス、などです。これはローカライズ可能なプロパティです。
+
+ +

例

+ +
"protocol_handlers": [
+  {
+    "protocol": "magnet",
+    "name": "Magnet Extension",
+    "uriTemplate": "https://example.com/#!/%s"
+  }
+]
+ +

ハンドラーは拡張機能ページのこともあります。

+ +
"protocol_handlers": [
+  {
+    "protocol": "magnet",
+    "name": "Magnet Extension",
+    "uriTemplate": "/example.xhtml#!/%s"
+  }
+]
+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.manifest.protocol_handlers")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/short_name/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/short_name/index.html new file mode 100644 index 0000000000..bf1d19d15a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/short_name/index.html @@ -0,0 +1,44 @@ +--- +title: short_name +slug: Mozilla/Add-ons/WebExtensions/manifest.json/short_name +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/short_name +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型String
必須No
例 + 
+"short_name": "My Extension"
+
+ +

拡張機能の短い名前。与えられた場合、これは name 項目が長過ぎるコンテキストで使われます。短い名前は 12 文字を超えないことが推奨されます。manifest.json に短い名前が入ってない場合、name が代わりに使われて切り捨てられることがあります。

+ +

これはローカライズ可能なプロパティです。

+ +

例

+ +
"short_name": "My Extension"
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.short_name")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.html new file mode 100644 index 0000000000..420b92aa5e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.html @@ -0,0 +1,133 @@ +--- +title: sidebar_action +slug: Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"sidebar_action": {
+  "default_icon": {
+    "16": "button/geo-16.png",
+    "32": "button/geo-32.png"
+  },
+  "default_title": "My sidebar",
+  "default_panel": "sidebar/sidebar.html"
+}
+
+ +

サイドバーはブラウザーウィンドウの左側の、ウェブページの横に表示されるペインです。ブラウザーはユーザーに現在利用できるサイドバーを表示して表示するサイドバーを選ぶUIを提供します。

+ +

sidebar_action キーによりサイドバーの既定のプロパティを定義できます。このプロパティは {{WebExtAPIRef("sidebarAction")}} API.を使って変更できます。

+ +

構文

+ +

sidebar_action キーは下記に載っているプロパティを持つことのあるオブジェクトです。唯一の必須プロパティは default_panel です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
browser_styleBoolean +

オプション、デフォルトでは true。

+ +

Use this to include a stylesheet in your popup that will make it look consistent with the browser's UI and with other extensions that use the browser_style property.

+
default_iconObject or String +

これはサイドバーのアイコンを指定するのに使います。このアイコンはブラウザーのUI内でサイドバーを開いたり閉じたりするのに表示されます。

+ +

Icons are specified as URLs relative to the manifest.json file itself.

+ +

You can specify a single icon file by supplying a string here:

+ + 
+"default_icon": "path/to/geo.svg"
+ +

To specify multiple icons in different sizes, specify an object here. The name of each property is the icon's height in pixels, and must be convertible to an integer. The value is the URL. For example:

+ + 
+    "default_icon": {
+      "16": "path/to/geo-16.png",
+      "32": "path/to/geo-32.png"
+    }
+ +

See Choosing icon sizes for more guidance on this.

+ +

This property is optional: if it is omitted, the sidebar doesn't get an icon.

+
default_panelString +

サイドバーのコンテンツを指定する HTML ファイルのパス。

+ +

HTML ファイルには、普通のウェブページと同様に CSS と JavaScript ファイルを <link> と <script> 要素を使って入れることができます。

+ +

普通のウェブページと異なり、パネル内で実行される JavaScript はすべての WebExtension APIs にアクセスできます(もちろん、拡張機能が持っている権限に従います)。

+ +

このプロパティは必須です。

+ +

これはローカライズ可能なプロパティです。

+
default_titleString +

サイドバーのタイトル。これはブラウザーのUIの中でサイドバーを一覧したり開くのに使われ、サイドバーが開いた時には上に表示されます。

+ +

This property is optional: if it is omitted, the sidebar's title is the extension's name.

+ +

This is a localizable property.

+
+ +

例

+ +
"sidebar_action": {
+  "default_icon": "sidebar.svg",
+  "default_title": "My sidebar!",
+  "default_panel": "sidebar.html",
+  "browser_style": true
+}
+ +

For a simple example of an extension that uses a sidebar, see annotate-page.

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.sidebar_action")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html new file mode 100644 index 0000000000..ea5d11b1cc --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/theme/index.html @@ -0,0 +1,979 @@ +--- +title: theme +slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme +tags: + - Add-ons + - Themes +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme +--- +
{{AddonSidebar}}
+ +
+

Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in https://github.com/mozilla/addons/issues/501. If you want to share a theme with other users, you'll need to make it either a lightweight theme or a dynamic theme.

+
+ + + + + + + + + + + + + + + + +
型Object
必須いいえ
例 + 
+"theme": {
+  "images": {
+    "headerURL": "images/sun.jpg"
+  },
+  "colors": {
+    "accentcolor": "#CF723F",
+    "textcolor": "#000"
+  }
+}
+
+ +

theme キーを使って Firefox に適用する静的なテーマを定義します。

+ +
+

If your manifest.json file includes the theme key, the extension is assumed to be a theme and any other WebExtension keys are ignored. If you want to include a theme with an extension, please see the {{WebExtAPIRef("theme")}} API.

+
+ +

画像フォーマット

+ +

下記の画像フォーマットはすべての画像プロパティでサポートされています:

+ + + +

構文

+ +

theme キーは次のプロパティを取るオブジェクトです:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
imagesObject +

Firefox 60 以降ではオプション。Firefox 60より前では必須。

+ +

A JSON object whose properties represent the images to display in various parts of the browser. See images for details on the properties that this object can contain.

+
colorsObject +

必須。

+ +

A JSON object whose properties represent the colors of various parts of the browser. See colors for details on the properties that this object can contain.

+
propertiesObject +

オプション

+ +

This object has two properties that affect how the "additional_backgrounds" images are displayed. See properties for details on the properties that this object can contain.

+ +
    +
  • "additional_backgrounds_alignment": an array of enumeration values defining the alignment of the corresponding "additional_backgrounds": array item.
    + The alignment options include: "bottom", "center", "left", "right", "top", "center bottom", "center center", "center top", "left bottom", "left center", "left top", "right bottom", "right center", and "right top". If not specified, defaults to "left top".
    + Optional
    • +
  • "additional_backgrounds_tiling": an array of enumeration values defining how the corresponding "additional_backgrounds": array item repeats, with support for "no-repeat", "repeat", "repeat-x", and "repeat-y". If not specified, defaults to "no-repeat".
    + Optional
    • +
+
+ +

images

+ +

All URLs are relative to the manifest.json file and cannot reference an external URL.

+ +

Images should be 200 pixels high to ensure they always fill the header space vertically.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
名前型説明
headerURLString +

Fully optional from Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60. Note also that in Firefox 60 onwards, any {{cssxref("text-shadow")}} applied to the header text is removed if no headerURL is specified (see {{bug(1404688)}}).

+ +

The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.

+
theme_frameString +

Fully optional from Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60.

+ +

Alias for headerURL, provided for Chrome compatibility.

+
additional_backgroundsArray of String +

オプション

+ +

An array of URLs for additional background images to be added to the header area and displayed behind the "headerURL": image. These images layer the first image in the array on top, the last image in the array at the bottom.

+ +

既定では all images are anchored to the upper right corner of the header area, but their alignment and repeat behavior can be controlled by properties of "properties":.

+
+ +

colors

+ +

These properties define the colors used for different parts of the browser. They are all optional except "accentcolor" and "textcolor" where either those properties or their chrome counterparts have to be specified.

+ +

All these properties can be specified as either a string containing any valid CSS color string (including hexadecimal), or an RGB array, such as "tab_text": [ 107 , 99 , 23 ]. But note that in Chrome, colors may only be specified as an RGB array.

+ +

See the example screenshot below to understand the parts of the browser UI that are affected by these properties.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前説明
accentcolor +

The color of the header area background, displayed in the part of the header not covered or visible through the images specified in "headerURL" and "additional_backgrounds".

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "red",
+     "textcolor": "white"
+  }
+}
+ +

+
+
button_background_active +

The color of the background of the pressed toolbar buttons.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "button_background_active": "red"
+  }
+}
+ +

+
+
button_background_hover +

The color of the background of the toolbar buttons on hover.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "button_background_hover": "red"
+  }
+}
+ +

+
+
icons +

The color of toolbar icons.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "icons": "red"
+  }
+}
+ +

+
+
icons_attention +

The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "icons_attention": "red"
+  }
+}
+ +

+
+
popup +

The background color of popups (such as the url bar dropdown and the arrow panels).

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "popup": "red"
+  }
+}
+ +

+
+
popup_border +

The border color of popups.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "popup": "black",
+     "popup_text": "white",
+     "popup_border": "red"
+  }
+}
+ +

+
+
popup_highlight +

The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item).

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "popup_highlight": "red"
+  }
+}
+ +

+
+
popup_highlight_text +

The text color of items highlighted using the keyboard inside popups.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "popup_highlight": "black",
+     "popup_highlight_text": "red"
+  }
+}
+ +

+
+
popup_text +

The text color of popups.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "popup": "black",
+     "popup_text": "red"
+  }
+}
+ +

+
+
tab_line +

The color of the selected tab line.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "tab_line": "red"
+  }
+}
+ +

+
+
tab_loading +

The color of the tab loading indicator and the tab loading burst.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "tab_loading": "red"
+  }
+}
+
+
tab_selected +

The background color of the selected tab.

+ +
See example + + 
+"theme": {
+  "images": {
+  "headerURL": "weta.png"
+},
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "tab_selected": "red"
+  }
+}
+ +

+
+
tab_text +

From Firefox 59, it represents the text color for the selected tab.

+ +

From Firefox 55 to 58, it is the same as "textcolor", provided for Chrome compatibility.

+ +
See example + + 
+"theme": {
+  "images": {
+  "headerURL": "weta.png"
+},
+  "colors": {
+     "accentcolor": "black",
+     "textcolor": "white",
+     "tab_selected": "white",
+     "tab_text": "red"
+  }
+}
+ +

+
+
textcolor +

The color of the text displayed in the header area.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "toolbar": "white",
+    "textcolor": "red"
+  }
+}
+ +

+
+
toolbar +

The background color for the navigation bar, the bookmarks bar, and the selected tab.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "toolbar": "red",
+    "textcolor": "white"
+  }
+}
+ +

+
+
toolbar_bottom_separator +

The color of the line separating the bottom of the toolbar from the region below.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "textcolor": "white",
+    "toolbar_bottom_separator": "red"
+  }
+}
+ +

+
+
toolbar_field +

The background color for fields in the toolbar, such as the URL bar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "textcolor": "white",
+    "toolbar_field": "red"
+  }
+}
+ +

+
+
toolbar_field_border +

The border color for fields in the toolbar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "toolbar": "black",
+    "textcolor": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_border": "red"
+  }
+}
+ +

+
+
toolbar_field_border_focus +

The focused border color for fields in the toolbar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "toolbar": "black",
+    "textcolor": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_border_focus": "red"
+  }
+}
+ +

+
+
toolbar_field_focus +

The focused background color for fields in the toolbar, such as the URL bar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "toolbar": "black",
+    "textcolor": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_focus": "red"
+  }
+}
+ +

+
+
toolbar_field_text +

The color of text in fields in the toolbar, such as the URL bar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "toolbar": "black",
+    "textcolor": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "red"
+  }
+}
+ +

+
+
toolbar_field_text_focus +

The color of text in focused fields in the toolbar, such as the URL bar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "toolbar": "black",
+    "textcolor": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_text_focus": "red"
+  }
+}
+ +

+
+
toolbar_field_separator +

The color of separators inside the URL bar. In Firefox 58 this was implemented as toolbar_vertical_separator.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "toolbar": "black",
+    "textcolor": "white",
+    "toolbar_field_separator": "red"
+  }
+}
+ +

+ +

In this screenshot, "toolbar_vertical_separator" is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.

+
+
toolbar_text +

The color of toolbar text.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "textcolor": "white",
+    "toolbar": "black",
+    "toolbar_text": "red"
+  }
+}
+ +

+
+
toolbar_top_separator +

The color of the line separating the top of the toolbar from the region above.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "textcolor": "white",
+    "toolbar": "black",
+    "toolbar_top_separator": "red"
+  }
+}
+ +

+
+
toolbar_vertical_separator +

The color of the separator next to the application menu icon. In Firefox 58, it corresponds to the color of separators inside the URL bar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "accentcolor": "black",
+    "textcolor": "white",
+    "toolbar": "black",
+    "toolbar_vertical_separator": "red"
+  }
+}
+ +

+
+
+ +

Aliases

+ +

Additionally, this key accepts various properties that are aliases for one of the properties above. These are provided for compatibility with Chrome. If an alias is given, and the non-alias version is also given, then the value will be taken from the non-alias version.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
名前Alias for
bookmark_texttoolbar_text
frameaccentcolor
frame_inactiveaccentcolor
tab_background_texttextcolor
+ +

properties

+ + + + + + + + + + + + + + + + + + + + + +
名前型説明
additional_backgrounds_alignment +

Array of String

+ 		+

Optional.

+ +

An array of enumeration values defining the alignment of the corresponding "additional_backgrounds": array item.
+ The alignment options include:

+ +
    +
  • "bottom"
    • +
  • "center"
    • +
  • "left"
    • +
  • "right"
    • +
  • "top"
    • +
  • "center bottom"
    • +
  • "center center"
    • +
  • "center top"
    • +
  • "left bottom"
    • +
  • "left center"
    • +
  • "left top"
    • +
  • "right bottom"
    • +
  • "right center"
    • +
  • "right top".
    • +
+ +

If not specified, defaults to "left top".

+
additional_backgrounds_tiling +

Array of String

+ 		+

Optional.

+ +

An array of enumeration values defining how the corresponding "additional_backgrounds": array item repeats. Options include:

+ +
    +
  • "no-repeat"
    • +
  • "repeat"
    • +
  • "repeat-x"
    • +
  • "repeat-y"
    • +
+ +

If not specified, defaults to "no-repeat".

+
+ +

例

+ +

A basic theme must define an image to add to the header, the accent color to use in the header, and the color of text used in the header:

+ +
 "theme": {
+   "images": {
+     "headerURL": "images/sun.jpg"
+   },
+   "colors": {
+     "accentcolor": "#CF723F",
+     "textcolor": "#000"
+   }
+ }
+ +

Multiple images can be used to fill the header, using a blank/transparent header image to gain control over the placement of each visible image:

+ +
 "theme": {
+   "images": {
+     "headerURL": "images/blank.png",
+     "additional_backgrounds": [ "images/left.png" , "images/middle.png", "images/right.png"]
+   },
+   "properties": {
+     "additional_backgrounds_alignment": [ "left top" , "top", "right top"]
+   },
+   "colors": {
+     "accentcolor": "blue",
+     "textcolor": "#ffffff"
+   }
+ }
+ +

You can also fill the header with a repeating image, or images, in this case a single image anchored in the middle top of the header and repeated across the rest of the header:

+ +
 "theme": {
+   "images": {
+     "headerURL": "images/blank.png",
+     "additional_backgrounds": [ "images/logo.png"]
+   },
+   "properties": {
+     "additional_backgrounds_alignment": [ "top" ],
+     "additional_backgrounds_tiling": [ "repeat"  ]
+   },
+   "colors": {
+     "accentcolor": "green",
+     "textcolor": "#000"
+   }
+ }
+ +

The following example uses most of the different values for theme.colors:

+ +
  "theme": {
+    "images": {
+      "headerURL": "weta.png"
+    },
+
+    "colors": {
+       "accentcolor": "darkgreen",
+       "textcolor": "white",
+       "toolbar": "blue",
+       "toolbar_text": "cyan",
+       "toolbar_field": "orange",
+       "toolbar_field_border": "white",
+       "toolbar_field_text": "green",
+       "toolbar_top_separator": "red",
+       "toolbar_bottom_separator": "white",
+       "toolbar_vertical_separator": "white"
+    }
+  }
+ +

It will give you a browser that looks something like this:

+ +

+ +

In this screenshot, "toolbar_vertical_separator" is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.

+ +

ブラウザー実装状況

+ + + +

{{Compat("webextensions.manifest.theme", 10)}}

+ +

Chrome compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Firefox propertyChrome property
images/headerURL +

images/theme_frame

+ +

In Chrome, the image is anchored to the top left of the header and tiled if it doesn’t fill the header area.

+
images/additional_backgroundsNot supported
colors/accentcolorcolors/frame
colors/textcolorIncorrectly implemented as colors/tab_text from Firefox 55 to 58, fixed as colors/tab_background_text from Firefox 59 onward
colors/toolbar_textcolors/bookmark_text
properties/additional_backgrounds_alignmentNot supported
properties/additional_backgrounds_tilingNot supported
+ +

In Chrome, all colors must be specified as an array of RGB values, like this:

+ +
"theme": {
+  "colors": {
+     "frame": [255, 0, 0],
+     "tab_background_text": [0, 255, 0],
+     "bookmark_text": [0, 0, 255]
+  }
+}
+ +

From Firefox 59 onward, both the array form and the CSS color form are accepted for all properties. Before that, colors/frame and colors/tab_text required the array form, while other properties required the CSS color form.

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/version/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/version/index.html new file mode 100644 index 0000000000..3f78365404 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/version/index.html @@ -0,0 +1,53 @@ +--- +title: version +slug: Mozilla/Add-ons/WebExtensions/manifest.json/version +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/version +--- +

{{AddonSidebar}}

+ + + + + + + + + + + + + + + + +
型String
必須 +

はい

+
例 + 
+"version": "0.1"
+
+ +

ドットで区切られた数字と ASCII 文字でフォーマットされた拡張機能のバージョンです。バージョンのフォーマットの詳細は Version format ページを見てください。

+ +

Chrome の version 定義の構文は、Firefox のものよりも制限が厳しいことに注意してください。

+ + + +

AMOキュー内でバージョンを "beta" にマークする特別ルールについては maintenance policy を見てください。

+ +

例

+ +
"version": "0.1"
+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.version")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/version_name/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/version_name/index.html new file mode 100644 index 0000000000..1943385204 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/version_name/index.html @@ -0,0 +1,40 @@ +--- +title: version_name +slug: Mozilla/Add-ons/WebExtensions/manifest.json/version_name +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/version_name +--- +

{{AddonSidebar}}

+ + + + + + + + + + + + + + + + +
型String
必須いいえ
例 + 
+"version_name": "0.1 beta"
+
+ +

アップデート目的で使われる version 項目に加えて、version_name はバージョン説明の文字列をセットできて、存在する場合は表示目的に使われます。

+ +

version_name が存在しない場合、version 項目が同様な表示目的で使われます。

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.version_name")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html new file mode 100644 index 0000000000..b32e6230b2 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.html @@ -0,0 +1,100 @@ +--- +title: web_accessible_resources +slug: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources +--- +

{{AddonSidebar}}

+ + + + + + + + + + + + + + + + +
型Array
必須 +

いいえ

+
例 + 
+"web_accessible_resources": [
+  "images/my-image.png"
+]
+
+ +

説明

+ +

ときには、拡張機能に何らかのリソース - たとえば、画像や HTML、CSS、JavaScript - をパッケージして、ウェブページで使用できるようにしたい場合があります。

+ +

たとえば、2 つめの WebExtension で使われている "beastify" 例題エクステンションでは、<img> 要素の src 属性を設定することで、ウェブページの画像を動物に置き換えています。画像は拡張機能とともにパッケージ化されており、ウェブページがそれらをロードできるようにするには、ウェブアクセシブルにする必要があります。

+ +

web_accessible_resources キーは、この方法でウェブページで利用可能にしたいすべてのパッケージされたリソースをリストします。manifest.json ファイルを基準としたパスを指定します。

+ +

コンテンツスクリプトは、ウェブアクセシブルリソースとしてリストする必要がないことに注意してください。

+ +

しかし、拡張機能が {{WebExtAPIRef("webRequest")}} API を使ってパブリックな (例 HTTPS) URL から拡張機能にパッケージされたページにリダイレクトする場合、拡張機能はweb_accessible_resources キーにリストしておく必要があります。

+ +

web_accessible_resources を使う

+ +

例えば、拡張機能に images/my-image.png にある画像ファイルを入れたい場合、このようにします:

+ +
my-extension-files/
+    manifest.json
+    my-background-script.js
+    images/
+        my-image.png
+ +

ウェブページに、この画像を指す src 属性のある <img> 要素を入れるには、 "web_accessible_resources" で次のように指定します:

+ +
"web_accessible_resources": ["images/my-image.png"]
+ +

このファイルは次の URL で利用できます:

+ +
moz-extension://<extension-UUID>/images/my-image.png"
+ +

<extension-UUID> は拡張機能の ID ではありません。これは各ブラウザーインスタンス用にランダムに生成されます。これはウェブサイトがインストールしている拡張機能を調べることで指紋を取ることを防止します。

+ +
+

Chrome では、拡張機能の ID は固定です。リソースを web_accessible_resouce に指定すると、chrome-extension://<your-extension-id>/<path/to/resouce> でアクセス可能です。

+
+ +

この URL を取得する推奨される方法は、browser.runtime.getURL API を使用して、 manifest.json の相対パスとして渡すことです:

+ +
browser.runtime.getURL("images/my-image.png");
+// something like:
+// moz-extension://944cfddf-7a95-3c47-bd9a-663b3ce8d699/images/my-image.png
+ +

この方法は拡張機能が実行されているブラウザがなんであれ正しい URL を取得します。

+ +

ワイルドカード

+ +

web_accessible_resourcesエントリーにはワイルドカードを含めることができます。たとえば下記のエントリーでも "images/my-image.png" のリソースを入れることができます:

+ +
"web_accessible_resources": ["images/*.png"]
+ +

セキュリティ

+ +

ページを web-accessible にすると、あらゆるウェブサイトからそのページにリンクやリダイレクトができます。このページは、通常のウェブページと同様に、あらゆる入力 (例えば POST データ) を、信頼のないソースから取っときたかのように扱うべきです。

+ +

例

+ +
"web_accessible_resources": ["images/my-image.png"]
+ +

"images/my-image.png" のファイルをウェブアクセス可能にしています。

+ +

ブラウザ実装状況

+ + + +

{{Compat("webextensions.manifest.web_accessible_resources")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/match_patterns/index.html b/files/ja/mozilla/add-ons/webextensions/match_patterns/index.html new file mode 100644 index 0000000000..6a30fdc9d7 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/match_patterns/index.html @@ -0,0 +1,432 @@ +--- +title: マッチパターン +slug: Mozilla/Add-ons/WebExtensions/Match_patterns +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Match_patterns +--- +
{{AddonSidebar}}
+ +

マッチパターンは URL のグループを指定する方法です。マッチパターンはいくつかの URL にマッチします。マッチパターンは WebExtensions API を使う拡張機能向けに、いくつかの場所で使用されます。特にコンテンツスクリプトをロードする文書を指定するときや、webRequest リスナーを追加する URL を指定する時に使用します。

+ +

マッチパターンを使用する API は通常マッチパターンのリストを受け取り、URL がパターンのいずれかにマッチする場合は適切なアクションを実行します。たとえば manifest.json 内の content_scripts キーを参照してください。

+ +

マッチパターンの構造

+ +
+

記: ブラウザーによってはサポートしていないスキームがあります。
+ 詳しくはブラウザー互換性テーブルを見てください。

+
+ +

すべてのマッチパターンは文字列で指定します。特別な値 <all_urls> を除き、マッチパターンは３つの部分から成り立っています。 scheme, host, path です。 scheme と host の間は  :// で句切られます。

+ +
<scheme>://<host><path>
+ +

scheme

+ +

 scheme 部は２つの形式のうち、どちらかを指定します。

+ + + + + + + + + + + + + + + + + + +
形式マッチするもの
*"http"か"https"のみ、いくつかのブラウザーでは "ws" と "wss"
http, https, ws, wss, ftp, ftps, data, file のうちどれか 1 つ指定したスキームのみ
+ +

host

+ +

host部は３つ形式のうちどれか 1 つを取ります。

+ + + + + + + + + + + + + + + + + + + + + + +
形式マッチするもの
*すべてのホスト
*. に続くホスト名の一部分指定したホストと任意のサブドメイン
ワイルドカード無しの完全なホスト名指定したホストのみ
+ +

host部にはポート番号は入りません。

+ +

"file"スキームだけは、host部はオプションです。

+ +

ワイルドカード "*" は host の最初のみに適用できることに注意してください。

+ +

path

+ +

パス部は / で開始しなければいけません。

+ +

その後、ワイルドカード * と、URL パスとして許可される文字とを組み合わせたものが続けて入るかもしれません。ホスト部と異なり、パス部はワイルドカード * を途中や終わりに含むことができて、さらに 2 つ以上の * を含められます。

+ +

path の値は、URL パスに URL クエリーストリングを加えた文字列と一致します。クエリーストリングがある場合、それらの間に ? を含んでいます。例えば、foo.bar で終わる URL パスのあらゆるドメインに URL マッチしたい場合、マッチパターンは ['*://*/*foo.bar', '*://*/*foo.bar?*']です。単に bar* ではなく ?* は必要で、最後の * は URL クエリーストリングにも、URL パスの部分でないものにも適用するためです。

+ +

URL フラグメント識別子や、# の後についているものは、path とみなされません。

+ +
+

注: path パターン文字列にポート番号を含めるべきではありません。"http://localhost:1234/*" のようにポート番号を追加するとマッチパターンは無視されます。しかし、"http://localhost:1234" は "http://localhost/*" にマッチします。

+
+ +

<all_urls>

+ +

特殊な値である <all_urls> は、サポートしているすべての scheme の URL（ "http", "https", "file", "ftp", "app" ）にマッチします。

+ +

例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
パターンマッチする例マッチしない例
+

<all_urls>

+ +

すべての URL にマッチ

+ 		+

http://example.org/

+ +

https://a.org/some/path/

+ +

ws://sockets.somewhere.org/

+ +

wss://ws.example.com/stuff/

+ +

ftp://files.somewhere.org/

+ +

ftps://files.somewhere.org/

+ 		+

resource://a/b/c/
+ (サポートされていないスキーム)

+
+

*://*/*

+ +

すべての HTTP, HTTPS, WebSocket URL にマッチ

+ 		+

http://example.org/

+ +

https://a.org/some/path/

+ +

ws://sockets.somewhere.org/

+ +

wss://ws.example.com/stuff/

+ 		+

ftp://ftp.example.org/
+ (マッチしないスキーム)

+ +

ftps://ftp.example.org/
+ (マッチしないスキーム)

+ +

file:///a/
+ (マッチしないスキーム)

+
+

*://*.mozilla.org/*

+ +

"mozilla.org" かそのサブドメインでホストされている HTTP, HTTPS, WebSocket の URL にマッチ

+ 		+

http://mozilla.org/

+ +

https://mozilla.org/

+ +

http://a.mozilla.org/

+ +

http://a.b.mozilla.org/

+ +

https://b.mozilla.org/path/

+ +

ws://ws.mozilla.org/

+ +

wss://secure.mozilla.org/something

+ 		+

ftp://mozilla.org/
+ (マッチしないスキーム)

+ +

http://mozilla.com/
+ (マッチしないホスト)

+ +

http://firefox.org/
+ (マッチしないホスト)

+
+

*://mozilla.org/

+ +

HTTP や HTTPS や WebSocket の"mozilla.org/"のホストのみマッチ

+ 		+

http://mozilla.org/

+ +

https://mozilla.org/

+ +

ws://mozilla.org/

+ +

wss://mozilla.org/

+ 		+

ftp://mozilla.org/
+ (マッチしないスキーム)

+ +

http://a.mozilla.org/
+ (マッチしないホスト)

+ +

http://mozilla.org/a
+ (マッチしないパス)

+
+

ftp://mozilla.org/

+ +

"ftp://mozilla.org/"のみマッチ

+ 		ftp://mozilla.org +

http://mozilla.org/
+ (マッチしないスキーム)

+ +

ftp://sub.mozilla.org/
+ (マッチしないホスト)

+ +

ftp://mozilla.org/path
+ (マッチしないパス)

+
+

https://*/path

+ +

 HTTPS URL で path が "path"のホストのみマッチ

+ 		+

https://mozilla.org/path

+ +

https://a.mozilla.org/path

+ +

https://something.com/path

+ 		+

http://mozilla.org/path
+ (マッチしないスキーム)

+ +

https://mozilla.org/path/
+ (マッチしないパス)

+ +

https://mozilla.org/a
+ (マッチしないパス)

+ +

https://mozilla.org/
+ (マッチしないパス)

+ +

https://mozilla.org/path?foo=1
+ (URL クエリーストリングによりマッチしないパス)

+
+

https://*/path/

+ +

あらゆるホスト上の HTTPS URL で、パスが "path/" で URL にクエリーストリングのないものにマッチ

+ 		+

https://mozilla.org/path/

+ +

https://a.mozilla.org/path/

+ +

https://something.com/path/

+ 		+

http://mozilla.org/path/
+ (マッチしないスキーム)

+ +

https://mozilla.org/path
+ (マッチしないパス)

+ +

https://mozilla.org/a
+ (マッチしないパス)

+ +

https://mozilla.org/
+ (マッチしないパス)

+ +

https://mozilla.org/path?foo=1
+ (URL クエリーストリングによりマッチしないパス)

+
+

https://mozilla.org/*

+ +

HTTPS URL のみにマッチで、"mozilla.org"だけ、パスやクエリーストリングは問わない

+ 		+

https://mozilla.org/

+ +

https://mozilla.org/path

+ +

https://mozilla.org/another

+ +

https://mozilla.org/path/to/doc

+ +

https://mozilla.org/path/to/doc?foo=1

+ 		+

http://mozilla.org/path
+ (マッチしないスキーム)

+ +

https://mozilla.com/path
+ (マッチしないホスト)

+
+

https://mozilla.org/a/b/c/

+ +

この URL 、あるいはフラグメント付きのこのURLにのみマッチ

+ 		+

https://mozilla.org/a/b/c/

+ +

https://mozilla.org/a/b/c/#section1

+ 		これ以外のすべて
+

https://mozilla.org/*/b/*/

+ +

"mozilla.org"でホストされた HTTPS URL で、パスは中間のどこかに "b" を含むもの。クエリーストリングが / で終了していればそれにもマッチ

+ 		+

https://mozilla.org/a/b/c/

+ +

https://mozilla.org/d/b/f/

+ +

https://mozilla.org/a/b/c/d/

+ +

https://mozilla.org/a/b/c/d/#section1

+ +

https://mozilla.org/a/b/c/d/?foo=/

+ +

https://mozilla.org/a?foo=21314&bar=/b/&extra=c/

+ 		+

https://mozilla.org/b/*/
+ (マッチしないパス)

+ +

https://mozilla.org/a/b/
+ (マッチしないパス)

+ +

https://mozilla.org/a/b/c/d/?foo=bar
+ (URL クエリーストリングによりマッチしないパス)

+
+

file:///blah/*

+ +

FILE URL でパスが "blah" で始まるもの

+ 		+

file:///blah/

+ +

file://blah/bleh

+ 		file:///bleh/
+ (マッチしないパス)
+ +

無効なマッチパターン

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
無効なパターン理由
resource://path/サポートされていないスキーム。
https://mozilla.orgパスがない。
https://mozilla.*.org/"*" はホストの先頭に使用する必要があります。
https://*zilla.org/ホスト内の "*" は唯一の文字であるか、"."が続かなければいけません。
http*://mozilla.org/ +

スキーム内の "*" は唯一の文字であるべきです。

+
*://*パスが空: "*://*/*"であるべき。
file://*パスが空: "file:///*"であるべき 。
+ +

ブラウザー実装状況

+ +

scheme

+ + + +

{{Compat("webextensions.match_patterns.scheme",10)}}

diff --git a/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.html new file mode 100644 index 0000000000..68ec4b3ce8 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/modify_a_web_page/index.html @@ -0,0 +1,254 @@ +--- +title: ウェブページを変更する +slug: Mozilla/Add-ons/WebExtensions/Modify_a_web_page +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page +--- +
{{AddonSidebar}}
+ +

拡張機能の一般的な事例の１つはウェブページを変更することです。例えば、ページのスタイルを変更、特定の DOM ノードを隠す、別の DOM ノードをページに挿入する、といいでしょう。

+ +

WebExtensions API での実現方法は２つあります：

+ + + +

どちらの方法のスクリプトもコンテンツスクリプトと呼ばれ、拡張機能を構成する他のスクリプトとは異なります:

+ + + +

この記事ではスクリプトを読み込むそれぞれの方法について説明します。

+ +

URL パターンにマッチしたページを変更する

+ +

まず始めに、"modify-page" という新しいディレクトリーを作成します。このディレクトリーで "manifest.json" というファイルを作成し、以下のように記述します。

+ +
{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["https://developer.mozilla.org/*"],
+      "js": ["page-eater.js"]
+    }
+  ]
+
+}
+ +

content_scripts キーは URL パターンと一致するページにスクリプトを読み込む方法です。この場合、content_scripts は https://developer.mozilla.org/ 以下のすべてのページで "page-eater.js" というスクリプトをロードするようにブラウザーに指示します。

+ +
+

content_scripts の "js" プロパティ は配列なので、マッチしているページに複数のスクリプトを挿入できます。これを行うと、ページによってロードされるいくつかのスクリプトと同じように、ページは同じスコープを共有し、配列にリストされている順序でロードされます。

+
+ +
+

content_scripts キーでは "css" プロパティで CSS スタイルシートを挿入することもできます。

+
+ +

次に、"page-eater.js" というファイルを "modify-page" ディレクトリー内に作り、以下のように記述します。

+ +
document.body.textContent = "";
+
+var header = document.createElement('h1');
+header.textContent = "This page has been eaten";
+document.body.appendChild(header);
+ +

拡張機能をインストール して https://developer.mozilla.org/ を訪れてみましょう。

+ +

{{EmbedYouTube("lxf2Tkg6U1M")}}

+ +
+

このビデオでは addons.mozilla.org で動作するコンテンツスクリプトを示していますが、現在このサイトではコンテンツスクリプトはブロックされています。

+
+ +

自動でページを変更する

+ +

ユーザーがあなたに質問してきたとき、まだページを処理している場合どうしたらいいですか？ この例を更新して、ユーザーがコンテキストメニュー項目をクリックしたときにコンテンツスクリプトを挿入しましょう。

+ +

始めに、"manifest.json" を以下のように更新してください。

+ +
{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "permissions": [
+    "activeTab",
+    "contextMenus"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

これは content_scripts キーを削除し、新たに 2 つのキーを追加しました。

+ + + +

このファイルを作りましょう。"background.js" というファイルを "modify-page" ディレクトリー内に作り以下のように記述します。

+ +
browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+  }
+});
+
+ +

このスクリプトでは context menu item を作成し、特定の id とタイトルを指定します。(コンテキストメニューに表示するテキスト) 次に、イベントリスナーを設定して、ユーザーがコンテキストメニュー項目をクリックしたときに、それが eat-page 項目であるかどうかをチェックします。それが正しければ、tabs.executeScript() API を利用して、"page-eater.js" を挿入します。この API はオプションでタブ ID を引数として取ります、よってタブ ID は省略されています。つまり、スクリプトは現在アクティブなタブに挿入されています。

+ +

この時点で拡張機能は以下のようになっています。

+ +
modify-page/
+    background.js
+    manifest.json
+    page-eater.js
+ +

拡張機能を再読み込みして、ページを開きます (任意のページ)  コンテキストメニューを有効化し、"Eat this page" を選択します。

+ +

{{EmbedYouTube("zX4Bcv8VctA")}}

+ +
+

このビデオでは addons.mozilla.org で動作するコンテンツスクリプトを示していますが、現在このサイトではコンテンツスクリプトはブロックされています。

+
+ +

メッセージ

+ +

コンテンツスクリプトとバックグラウンドスクリプトはお互いの状態に直接アクセスすることはできません。しかし、メッセージを送ることによる対話をすることができます。一方のエンドはメッセージリスナーを設定し、もう一方のエンドはメッセージを送信します。 次の表は、各側面に関連する API をまとめたものです。

+ + + + + + + + + + + + + + + + + + + +
コンテンツスクリプト内バックグラウンドスクリプト内
メッセージ送信browser.runtime.sendMessage()browser.tabs.sendMessage()
メッセージ受信browser.runtime.onMessagebrowser.runtime.onMessage
+ +
+

このワンオフメッセージを送る通信メソッドに加えて、メッセージ交換するコネクションベースの方法も使えます。これらのオプションを選択するアドバイスは、ワンオフメッセージとコネクションベースのメッセージのいずれかを選択するを見てください。

+
+ +

例を更新して、バックグラウンドスクリプトからメッセージを送信する方法を示します。

+ +

始めに "background.js" を編集して、次のようにします。

+ +
browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+function messageTab(tabs) {
+  browser.tabs.sendMessage(tabs[0].id, {
+    replacement: "Message from the extension!"
+  });
+}
+
+function onExecuted(result) {
+    var querying = browser.tabs.query({
+        active: true,
+        currentWindow: true
+    });
+    querying.then(messageTab);
+}
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    let executing = browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+    executing.then(onExecuted);
+  }
+});
+
+ +

次に、"page-eater.js" を挿入し、tabs.query() を使用し、現在アクティブなタブを取得し、tabs.sendMessage() を使用し、そのタブにロードされたコンテンツスクリプトにメッセージを送信します。 メッセージにはペイロード {replacement: "Message from the extension!"} があります。

+ +

次に "page-eater.js" を次のように更新します。

+ +
function eatPageReceiver(request, sender, sendResponse) {
+  document.body.textContent = "";
+  var header = document.createElement('h1');
+  header.textContent = request.replacement;
+  document.body.appendChild(header);
+}
+browser.runtime.onMessage.addListener(eatPageReceiver);
+
+ +

今すぐページを処理する代わりに、コンテンツスクリプトは runtime.onMessageを使ってメッセージを取得します。 メッセージが到着すると、コンテンツスクリプトは前と同じコードを実行しますが、置換テキストは request.replacement から取得されます。

+ +

tabs.executeScript() は非同期関数であり、リスナーが "page-eater.js" に追加された後にのみメッセージを送信するために、"page-eater.js" を実行した後に呼び出される onExecuted を使用します。

+ +
+

Ctrl+Shift+J (Mac では Cmd+Shift+J) を押します。もしくは web-ext run --bc で Browser Console を開きバックグラウンドスクリプトの console.log を見ます。または、 Add-on Debugger  を使用して、ブレークポイントを設定することもできます。 現在、web-ext から 直接 Add-on Debugger を起動する 方法はありません。

+
+ +

コンテンツスクリプトからバックグラウンドページにメッセージを戻したい場合は、 runtime.sendMessage() の代わりに tabs.sendMessage() を使用します。

+ +

例：

+ +
browser.runtime.sendMessage({
+    title: "from page-eater.js"
+});
+ +
これらの例はすべて JavaScript を注入します。 tabs.insertCSS() 関数を使用してプログラムで CSS を挿入することもできます。
+ +

関連項目

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/native_manifests/index.html b/files/ja/mozilla/add-ons/webextensions/native_manifests/index.html new file mode 100644 index 0000000000..079e34adc0 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/native_manifests/index.html @@ -0,0 +1,315 @@ +--- +title: ネイティブマニフェスト +slug: Mozilla/Add-ons/WebExtensions/Native_manifests +tags: + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Native_manifests +--- +
{{AddonSidebar}}
+ +

ネイティブマニフェストは特別な形式の JSON ファイルで、拡張機能のインストールプロセスの範囲外の方法でユーザーのコンピューターに配布されます。例えば、ネイティブマニフェストは端末の管理者やネイティブアプリケーションのインストーラーによって配布されます。

+ +

3つの異なる種類のネイティブマニフェストがあります:

+ + + + + + + + + + + + + + + + +
Native messaging マニフェストnative messaging と呼ぶ機能を可能にします、ここでは拡張機能は端末にインストールされたネイティブアプリとやりとりできます。
Managed storage マニフェスト +

{{WebExtAPIRef("storage.managed")}} API  使って拡張機能がアクセスする読み込み専用データを定義します。

+
PKCS #11 マニフェスト +

拡張機能が {{WebExtAPIRef("pkcs11")}} API を使って PKCS #11 セキュリティモジュールを列挙して、Firefox にインストールできるようにします。

+
+ +

すべてのネイティブマニフェスト用に、ブラウザーがマニフェストを見つけられるように調整する必要があります。 マニフェストの場所 のセクションでこのルールを述べています。

+ +

Native messaging マニフェスト

+ +

native messaging マニフェストは以下のプロパティを含む単一の JSON オブジェクトです:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前種類説明
nameString +

ネイティブアプリケーションの名前です。

+ +

この名前は拡張機能の {{WebExtAPIRef("runtime.connectNative()")}} か {{WebExtAPIRef("runtime.sendNativeMessage()")}} に渡される名前と一致している必要があります。

+ +

OS X と Linux では、native messaging マニフェストの（.json 拡張子を除いた）ファイル名とも一致していなければなりません。

+ +

Windows では、native messaging マニフェストの場所を記した作成済みレジストリキーの名前と一致している必要があります。

+ +

次の正規表現にマッチする必要があります: "^\w+(\.\w+)*$" つまり、名前には(大文字か小文字の)英数字とアンダースコア、ドットのみ含めることができます。最初または最後の文字にドットを使用することはできず、ドットを2つ以上連続させることもできません。

+
descriptionString +

ネイティブアプリケーションの説明です。

+
pathString +

ネイティブアプリケーションのパスです。

+ +

Windows では、マニフェスト自身からの相対パスを指定することもできます。OS X や Linux では絶対パスでなければなりません。

+
typeString +

拡張機能にアプリケーションが接続するために使用する方法を記述します。

+ +

現在のところ、"stdio" のみが指定可能です。これはアプリケーションが標準入力 (stdin) を介してメッセージを受信し、標準出力 (stdout) を使用してメッセージを送信することを示します。

+
allowed_extensionsArray of String +

Add-on ID の配列です。配列中のそれぞれの値はこのネイティブアプリケーションとの通信が許可されている拡張機能を表します。

+ +

つまり、作成する拡張機能の manifest.json ファイルに applications キーを含めたくなるものと思われるため、開発中に明示的なIDを設定しておくと良いでしょう。

+
+ +

例として、"ping_pong" ネイティブアプリケーションのマニフェストを以下に示します:

+ +
{
+  "name": "ping_pong",
+  "description": "Example host for native messaging",
+  "path": "/path/to/native-messaging/app/ping_pong.py",
+  "type": "stdio",
+  "allowed_extensions": [ "ping_pong@example.org" ]
+}
+ +

この設定では、"ping_pong@example.org" という ID の拡張機能が "ping_pong" という名前を適切な {{WebExtAPIRef("runtime")}} API 関数に渡すことで接続を許可されます。 アプリケーション自体は "/path/to/native-messaging/app/ping_pong.py" にあります。

+ +

Managed storage マニフェスト

+ +

managed storage マニフェストには次のプロパティを含む単一の JSON オブジェクトです:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前種類説明
nameString +

ストレージにアクセスできる拡張機能の ID で、拡張機能の applications キーで指定したのと同じものです。

+
descriptionString人間が読める説明で、Firefox には無視されます。
typeString +

"storage" でなければなりません。

+
dataObject +

JSON オブジェクトで、その中にあらゆる有効な JSON 値(文字列、数値、真偽値、配列、オブジェクトを含む)が入ります。これは browser.storage.managed ストレージ領域内のデータになります。

+
+ +

例えば:

+ +
{
+  "name": "favourite-colour-examples@mozilla.org",
+  "description": "ignored",
+  "type": "storage",
+  "data":
+  {
+    "colour": "management thinks it should be blue!"
+  }
+}
+ +

この JSON マニフェストでは、"favourite-colour-examples@mozilla.org" 拡張機能は次のようなコードを使ってデータにアクセスできます:

+ +
var storageItem = browser.storage.managed.get('colour');
+storageItem.then((res) => {
+  console.log(`Managed colour is: ${res.colour}`);
+});
+ +

PKCS #11 マニフェスト

+ +

PKCS #11 マニフェストは以下のプロパティを持った JSON オブジェクトを含むファイルです:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前種類説明
nameString +

PKCS #11 モジュールの名前です。

+ +

pkcs11 API で使われている名前と一致している必要があります。

+ +

OS X と Linux では、マニフェストの (拡張子を除いた) ファイル名とも一致していなければなりません。

+ +

Windows では、マニフェストの場所を記した作成済みレジストリキーの名前と一致している必要があります。

+ +

次の正規表現にマッチする必要があります: "^\w+(\.\w+)*$" つまり、名前には(大文字か小文字の)英数字とアンダースコア、ドットのみ含めることができます。最初または最後の文字にドットを使用することはできず、ドットを2つ以上連続させることもできません。

+
descriptionString +

モジュールの説明です。

+ +

ブラウザー UI (例えば、Firefox の "Security Devices" ダイアログ) で表示される、読みやすい名前を付けるのに使われます。

+
pathString +

モジュールのパスです。

+ +

Windows では、マニフェスト自身からの相対パスを指定することもできます。OS X や Linux では絶対パスでなければなりません。

+
typeString"pkcs11" でなければなりません。
allowed_extensionsArray of String +

Add-on ID の配列です。配列中のそれぞれの値はモジュールとの通信が許可されている拡張機能を表します。

+ +

つまり、作成する拡張機能の manifest.json ファイルに applications キーを含めたくなるものと思われるため、開発中に明示的な ID を設定しておくと良いでしょう。

+
+ +

例えば:

+ +
{
+  "name": "my_module",
+  "description": "My test module",
+  "type": "pkcs11",
+  "path": "/path/to/libpkcs11testmodule.dylib",
+  "allowed_extensions": ["my-extension@mozilla.org"]
+}
+ +

この JSON マニフェストでは、"my_module.json" として保存すれば、"my-extension@mozilla.org" 拡張機能はこのようなコードから "/path/to/libpkcs11testmodule.dylib" のセキュリティーモジュールをインストールすることもできます:

+ +
browser.pkcs11.installModule("my_module");
+ +

マニフェストの場所

+ +

Linux と Mac OS X では、マニフェストを特定の場所に保管する必要があります。Windows では、マニフェストの場所を指定するレジストリキーを作成する必要があります。

+ +

詳しいルールはどのマニフェストの種類でも同じですが、例外として最後から2番目のパスのコンポーネントはマニフェストの種類を特定します。下記の例では、3種類のそれぞれの形を示しています。すべての例において、<name> はマニフェスト内の name プロパティの値です。

+ +

Windows

+ +

グローバルな設定としては、以下の名前のレジストリキーを作成します:

+ +
HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
+HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\ManagedStorage\<name>
+HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\PKCS11Modules\<name>
+ +

このキーにマニフェストへのパスを示す単一の既定の値を設定します。

+ +

Firefox バージョン 64 以降では、32ビットレジストリ view (Wow6432Node) がこれらのキーの中でまずチェックされ、"native" レジストリ view が続いてチェックされます。いずれの view にしてもアプリケーションにふさわしいレジストリを使用してください。

+ +

Firefox バージョン 63　以前では、もし32ビットのアプリケーションであっても、このキーは Wow6432Node 下に作成しないで下さい。以前のバージョンのブラウザは常に32-bit エミュレーションではなくレジストリの "native" view 下のキーを探します。確実に "native" view にキーを作成するために、KEY_WOW64_64KEY または KEY_WOW64_32KEY フラグを RegCreateKeyEx に渡すことができます。Accessing an Alternate Registry View を参照して下さい。

+ +

ユーザごとの設定としては、以下の名前のレジストリキーを作成します:

+ +
HKEY_CURRENT_USER\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
+HKEY_CURRENT_USER\SOFTWARE\Mozilla\ManagedStorage\<name>
+HKEY_CURRENT_USER\SOFTWARE\Mozilla\PKCS11Modules\<name>
+ +

このキーにマニフェストへのパスを示す単一の既定の値を設定します。

+ +

Mac OS X

+ +

グローバルな設定としては、マニフェストを以下に配置します:

+ +
/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
+/Library/Application Support/Mozilla/ManagedStorage/<name>.json
+/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
+ +

個人ごとの設定としては、マニフェストを以下に配置します:

+ +
~/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
+~/Library/Application Support/Mozilla/ManagedStorage/<name>.json
+~/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
+
+ +

Linux

+ +

グローバルな設定としては、マニフェストを以下のいずれかに配置します:

+ +
/usr/lib/mozilla/native-messaging-hosts/<name>.json
+/usr/lib/mozilla/managed-storage/<name>.json
+/usr/lib/mozilla/pkcs11-modules/<name>.json
+
+ +

あるいは:

+ +
/usr/lib64/mozilla/native-messaging-hosts/<name>.json
+/usr/lib64/mozilla/managed-storage/<name>.json
+/usr/lib64/mozilla/pkcs11-modules/<name>.json
+ +

個人ごとの設定としては、マニフェストを以下に配置します:

+ +
~/.mozilla/native-messaging-hosts/<name>.json
+~/.mozilla/managed-storage/<name>.json
+~/.mozilla/pkcs11-modules/<name>.json
diff --git a/files/ja/mozilla/add-ons/webextensions/native_messaging/index.html b/files/ja/mozilla/add-ons/webextensions/native_messaging/index.html new file mode 100644 index 0000000000..e9a5ca39bc --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/native_messaging/index.html @@ -0,0 +1,405 @@ +--- +title: Native messaging +slug: Mozilla/Add-ons/WebExtensions/Native_messaging +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging +--- +
{{AddonSidebar}}
+ +

Native messaging はユーザーのコンピューターにインストールされたアプリケーションと拡張機能との間のメッセージ交換を可能にします。 Native messaging を利用すれば、ネイティブアプリケーションが Web を介してアクセスできなくても拡張機能にサービスを提供できます。典型的な利用例としてはパスワードマネージャーが挙げられます。ネイティブアプリケーションはパスワードの暗号化と保管を行い、拡張機能と通信して Web フォームに入力を行うといったことが可能です。さらに、Native messaging を用いることで、一部のハードウェア等の WebExtension API ではアクセスできないリソースに対してアドオンからアクセスできるようになります。

+ +

対象となるネイティブアプリケーションは、ブラウザーを使用してインストールや管理を行うわけではありません。OS のインストール機構を使ってインストールします。ネイティブアプリケーションそのものに加えて、「ホストマニフェスト」または「アプリマニフェスト」と呼ばれる JSON ファイルを用意しなければなりません。アプリマニフェストファイルにはブラウザーからネイティブアプリケーションにアクセスするための方法を記述します。

+ +

Native messaging を利用する拡張機能は manifest.json の中で "nativeMessaging" permission を要求する必要があります。反対に、ネイティブアプリケーション側ではアプリマニフェストの "allowed_extensions" フィールドに拡張機能の ID を含めることで permission を認める必要があります。

+ +

それで拡張機能は{{WebExtAPIRef("runtime")}} API の関数セットを用いてネイティブアプリケーションと JSON メッセージを交換することができます。ネイティブアプリケーション側では標準入力 (stdin) を介してメッセージを受信し、標準出力 (stdout) を介してメッセージを送信します。

+ +

+ +

Native messaging のサポートは Chrome とほぼ互換性がありますが、主に 2 つの違いがあります。

+ + + +

GitHub の "webextensions-examples" リポジトリの "native-messaging" ディレクトリーに完全な例があります。この記事におけるサンプルコードの大半は、この例から直接持ち込んでいます。

+ +

セットアップ

+ +

拡張機能の manifest

+ +

もし拡張機能をネイティブアプリケーションと通信させたい場合、

+ + + +

以下に manifest.json の例を示します。

+ +
{
+
+  "description": "Native messaging example add-on",
+  "manifest_version": 2,
+  "name": "Native messaging example",
+  "version": "1.0",
+  "icons": {
+    "48": "icons/message.svg"
+  },
+
+  "applications": {
+    "gecko": {
+      "id": "ping_pong@example.org",
+      "strict_min_version": "50.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": "icons/message.svg"
+  },
+
+  "permissions": ["nativeMessaging"]
+
+}
+ +

App manifest

+ +

アプリマニフェストに、ブラウザーがネイティブアプリケーションに接続する方法を記述します。

+ +

アプリマニフェストファイルはネイティブアプリケーションと一緒にインストールする必要があります。ブラウザーはアプリマニフェストファイルを読み込み、検証を行いますが、インストールや管理は行いません。したがって、app manifest ファイルがインストール・アップデートされた時期や方法についてのセキュリティモデルは、WebExtension を使う拡張機能に対してのものというよりはネイティブアプリケーションに対してのものです。

+ +

native アプリマニフェストの文法と場所については、Native manifests を見てください。

+ +

例として、"ping_pong"ネイティブアプリケーションの manifest を以下に示します。

+ +
{
+  "name": "ping_pong",
+  "description": "Example host for native messaging",
+  "path": "/path/to/native-messaging/app/ping_pong.py",
+  "type": "stdio",
+  "allowed_extensions": [ "ping_pong@example.org" ]
+}
+ +

この設定では、"ping_pong@example.org" という ID の 拡張機能において"ping_pong" という名前を {{WebExtAPIRef("runtime")}} API等に渡すことによる接続が許可されます。 アプリケーション自体は "/path/to/native-messaging/app/ping_pong.py" です。

+ +
+

Note for Windows: 上記の例におけるネイティブアプリケーションは Python スクリプトです。Windows においては、この方法で期待通りに Python スクリプトを実行させることは難しいため、代替案として、.bat ファイルを作成してマニフェストからリンクします。

+ +
{
+  "name": "ping_pong",
+  "description": "Example host for native messaging",
+  "path": "c:\\path\\to\\native-messaging\\app\\ping_pong_win.bat",
+  "type": "stdio",
+  "allowed_extensions": [ "ping_pong@example.org" ]
+}
+ +

バッチファイルから Python スクリプトを起動します。

+ +
@echo off
+
+python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py"
+
+ +

メッセージの交換

+ +

上記のセットアップにより、拡張機能はネイティブアプリケーションと JSON メッセージを交換することができます。

+ +

拡張機能側

+ +

ネイティブメッセージはコンテンツスクリプトで直接使うことはできません; バックグラウンドスクリプトで間接的にやりとりする必要があります。

+ +

これを使うには2つのパターンがあります:ネクションベースのメッセージングとコネクションレスメッセージングです。

+ +

コネクションベースのメッセージング

+ +

このパターンでは、 {{WebExtAPIRef("runtime.connectNative()")}} を呼びだし、その時にアプリケーションの名前（アプリマニフェストの "name" プロパティの値）を渡します。既にアプリケーションが起動済みでなかった場合、これによってアプリケーションが起動し、{{WebExtAPIRef("runtime.Port")}} オブジェクトを拡張機能に返します。

+ +

ネイティブアプリは起動時に次の 2 つの引数を取ります:

+ + + +
+

Chrome  では引数の扱いが異なります:

+ + +
+ +

アプリケーションは 拡張機能が Port.disconnect() を呼び出すか、接続されたページが閉じられるまで実行し続けます。

+ +

Port を使用してメッセージを送信するためには、postMessage() 関数を呼び出し、 送信する JSON メッセージを渡します。Port を使用してメッセージを受信するためには、onMessage.addListener() 関数を使用してリスナーを追加します。

+ +

"ping_pong" アプリケーションとコネクションを確立するバックグラウンドスクリプトの例を示します。アプリケーションからのメッセージを受信し、ユーザーがブラウザーアクションをクリックするたびに "ping" メッセージを送信します。

+ +
/*
+On startup, connect to the "ping_pong" app.
+*/
+var port = browser.runtime.connectNative("ping_pong");
+
+/*
+Listen for messages from the app.
+*/
+port.onMessage.addListener((response) => {
+  console.log("Received: " + response);
+});
+
+/*
+On a click on the browser action, send the app a message.
+*/
+browser.browserAction.onClicked.addListener(() => {
+  console.log("Sending:  ping");
+  port.postMessage("ping");
+});
+ +

コネクションレスメッセージング

+ +

このパターンでは、{{WebExtAPIRef("runtime.sendNativeMessage()")}} を呼び、以下を渡します。

+ + + +

それぞれのメッセージごとに新しいアプリケーションのインスタンスが作成されます。アプリの開始時に次の 2 つの引数が渡されます:

+ + + +

アプリからの最初のメッセージは sendNativeMessage() 呼び出しの応答として扱われ、コールバックに渡されます。

+ +

以下に、先程の例を runtime.sendNativeMessage() を使って書き直したものを示します。

+ +
function onResponse(response) {
+  console.log("Received " + response);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+/*
+On a click on the browser action, send the app a message.
+*/
+browser.browserAction.onClicked.addListener(() => {
+  console.log("Sending:  ping");
+  var sending = browser.runtime.sendNativeMessage(
+    "ping_pong",
+    "ping");
+  sending.then(onResponse, onError);
+});
+
+ +

アプリ側

+ +

アプリケーション側では、標準入力を用いてメッセージを受信し、標準出力を用いてメッセージを送信します。

+ +

各メッセージは JSON でシリアライズされ、UTF-8 でエンコードされ、メッセージ長を表す 32-bit の値がネイティブのバイト順で先頭に付加されます。

+ +

アプリケーションからの一つのメッセージの最大サイズは 1MB です。アプリケーションへの一つのメッセージの最大サイズは 4GB です。

+ +

次の NodeJS コードですぐにメッセージを送受信できます:

+ +
#!/usr/local/bin/node
+
+process.stdin.on('readable', () => {
+  var input = []
+  var chunk
+  while (chunk = process.stdin.read()) {
+    input.push(chunk)
+  }
+  input = Buffer.concat(input)
+
+  var msgLen = input.readUInt32LE(0)
+  var dataLen = msgLen + 4
+
+  if (input.length >= dataLen) {
+    var content = input.slice(4, dataLen)
+    var json = JSON.parse(content.toString())
+    handleMessage(json)
+  }
+})
+
+function sendMessage(msg) {
+  var buffer = Buffer.from(JSON.stringify(msg))
+
+  var header = Buffer.alloc(4)
+  header.writeUInt32LE(buffer.length, 0)
+
+  var data = Buffer.concat([header, buffer])
+  process.stdout.write(data)
+}
+
+process.on('uncaughtException', (err) => {
+  sendMessage({error: err.toString()})
+})
+ +

もうひとつ、Python による例を示します。このアプリケーションはアドオンからのメッセージを受信します。Linuxでは、このファイルを実行可能にしてください。メッセージが "ping" であった場合、"pong" というメッセージを返します。これはPython 2のバージョンです:

+ +
#!/usr/bin/python -u
+
+# Note that running python with the `-u` flag is required on Windows,
+# in order to ensure that stdin and stdout are opened in binary, rather
+# than text, mode.
+
+import json
+import sys
+import struct
+
+
+# Read a message from stdin and decode it.
+def get_message():
+    raw_length = sys.stdin.read(4)
+    if not raw_length:
+        sys.exit(0)
+    message_length = struct.unpack('=I', raw_length)[0]
+    message = sys.stdin.read(message_length)
+    return json.loads(message)
+
+
+# Encode a message for transmission, given its content.
+def encode_message(message_content):
+    encoded_content = json.dumps(message_content)
+    encoded_length = struct.pack('=I', len(encoded_content))
+    return {'length': encoded_length, 'content': encoded_content}
+
+
+# Send an encoded message to stdout.
+def send_message(encoded_message):
+    sys.stdout.write(encoded_message['length'])
+    sys.stdout.write(encoded_message['content'])
+    sys.stdout.flush()
+
+
+while True:
+    message = get_message()
+    if message == "ping":
+        send_message(encode_message("pong"))
+ +

Python 3では、受信したバイナリーデータを文字列にデコードしないといけません。アドオンに送り返されるコンテンツは構造体を使ってバイナリーデータにエンコードする必要があります:

+ +
#!/usr/bin/python -u
+
+# Note that running python with the `-u` flag is required on Windows,
+# in order to ensure that stdin and stdout are opened in binary, rather
+# than text, mode.
+
+import json
+import sys
+import struct
+
+
+# Read a message from stdin and decode it.
+def get_message():
+    raw_length = sys.stdin.buffer.read(4)
+
+    if not raw_length:
+        sys.exit(0)
+    message_length = struct.unpack('=I', raw_length)[0]
+    message = sys.stdin.buffer.read(message_length).decode("utf-8")
+    return json.loads(message)
+
+
+# Encode a message for transmission, given its content.
+def encode_message(message_content):
+    encoded_content = json.dumps(message_content).encode("utf-8")
+    encoded_length = struct.pack('=I', len(encoded_content))
+    # use struct.pack("10s", bytes), to pack a string of the length of 10 characters
+    return {'length': encoded_length, 'content': struct.pack(str(len(encoded_content))+"s",encoded_content)}
+
+
+# Send an encoded message to stdout.
+def send_message(encoded_message):
+    sys.stdout.buffer.write(encoded_message['length'])
+    sys.stdout.buffer.write(encoded_message['content'])
+    sys.stdout.buffer.flush()
+
+
+while True:
+    message = get_message()
+    if message == "ping":
+        send_message(encode_message("pong"))
+ +

ネイティブアプリを閉じる

+ +

runtime.connectNative() を使用してネイティブアプリケーションに接続した場合、アプリケーションは拡張機能が Port.disconnect() を呼び出すか接続したページが閉じられるまで実行されます。runtime.sendNativeMessage() を使用してネイティブアプリケーションの実行を開始した場合、アプリケーションはメッセージを受信してレスポンスを送信した後閉じられます。

+ +

ネイティブアプリケーションを閉じるために

+ + + +

トラブルシューティング

+ +

もしうまくいかない場合、ブラウザーコンソールをチェックしてください。ネイティブアプリケーションが何かしらの出力を stderr に送っていた場合、ブラウザーはそれをブラウザーのコンソールにリダイレクトします。そのため、ネイティブアプリケーションが起動できている限り、出力されたエラーメッセージを確認することができます。

+ +

アプリケーションが起動できていなかった場合、問題の手がかりとなるエラーメッセージを確認してください。

+ +
"No such native application <name>"
+ + + +
"Error: Invalid application <name>"
+ + + +
"'python' is not recognized as an internal or external command, ..."
+ + + +
"File at path <path> does not exist, or is not executable"
+ + + +
"This extension does not have permission to use native application <name>"
+ + + +
"TypeError: browser.runtime.connectNative is not a function"
+ + + +
"[object Object]       NativeMessaging.jsm:218"
+ + + +

Chrome での非互換性

+ +

{{Page("Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities", "Native_messaging")}}

diff --git a/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html b/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html new file mode 100644 index 0000000000..99d589b024 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html @@ -0,0 +1,218 @@ +--- +title: パッケージ化とインストール +slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +--- +
{{AddonSidebar}}
+ +

この記事では、WebExtension を Firefox にインストールする方法を 2 つ紹介します。

+ + + +

{{英語版章題("Loading from disk")}}

+ +

ディスクから読み込む

+ +

WebExtension を Firefox で動作させるには、この方法が最もシンプルです。また、ブートストラップ型拡張機能 や Add-on SDK を使ったアドオン といった、再起動の要らないアドオンはすべてこの方法でインストールできます。

+ +

ここでは Firefox 45 以降が必要となります。

+ +

ディスクから読み込むには、

+ + + +

これでアドオンがインストールされ、Firefox を再起動するまで有効になります。

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

{{英語版章題("Updating a temporary add-on")}}

+ +

一時的なアドオンの更新

+ +

この方法でアドオンをインストールした場合、アドオンのファイルを更新すると何が起きるでしょうか？

+ +

{{英語版章題("Before Firefox 48")}}

+ +

Firefox 47 以前

+ + + +
+

Firefox 47 以前では、Firefox を再起動せずに「一時的なアドオンを読み込む」をクリックしても更新は反映されない ことに注意してください。

+
+ +

{{英語版章題("Firefox 48 onwards")}}

+ +

Firefox 48 以降

+ + + +
+

Firefox 48 のみに関する注意点として、about:debugging と about:addons に表示されるアドオンの名前と説明文は、「リロード」ボタンをクリックしても更新されません。この問題は Firefox 49 で修正されます。

+
+ +

{{英語版章題("Package and install")}}

+ +

パッケージ化してインストールする

+ +

ディスクからの読込は 開発 / テスト / デバッグ のサイクルにおいては有効です。しかし、アドオンを他の人と共有したい場合は、アドオンを インストール可能な形式にパッケージ化する必要があります。

+ +

{{英語版章題("Packaging")}}

+ +

パッケージ化

+ +

Firefox のアドオンは XPI ファイルでパッケージ化されます。XPI ファイルとは単なる ZIP ファイルですが、ファイルの拡張子は ".xpi" となります。

+ +

一つ注意しなければならないのは、アドオンのファイルを含んだディレクトリの ZIP ファイルではなく、アドオンのファイルを直接含んだ ZIP ファイルとする必要がある点です。

+ +

Windows

+ +
    +
  1. アドオンのファイルが含まれているフォルダを開きます。
    2. +
  2. ファイルすべてを選択します。
    3. +
  3. 右クリックして "送る" → "圧縮（zip 形式）フォルダー" を選択します。
    4. +
  4. 作成されたファイルの名前を "something.zip" から "something.xpi" に変更します。
    5. +
+ +

+ +

Mac OS X

+ +
    +
  1. アドオンのファイルが含まれているフォルダを開きます。
    2. +
  2. ファイルすべてを選択します。
    3. +
  3. 右クリックして "n 項目を圧縮" を選択します。
    4. +
  4. 作成されたファイルの名前を Archive.zip から something.xpi に変更します。
    5. +
+ +

+ +

Linux / Mac OS X Terminal

+ +
    +
  1. cd path/to/my-addon/
    2. +
  2. zip -r ../my-addon.xpi *
    3. +
+ +

{{英語版章題("Installation")}}

+ +

インストール

+ +

XPI ファイルをインストールする前に、次のどちらかの手順を踏む必要があります。

+ + + +

{{英語版章題("Getting your add-on signed")}}

+ +

アドオンに署名する

+ +

XPI ファイルに署名するには、Signing and distributing your Add-on の記事を参照してください。

+ +

{{英語版章題("Enabling unsigned add-ons")}}

+ +

未署名のアドオンを有効にする

+ +

未署名のアドオンを有効にするには、以下の手順に従ってください。

+ + + +

{{EmbedYouTube("HgtBYDWtH4w")}}

+ +

{{英語版章題("Installing an XPI in Firefox")}}

+ +

XPI ファイルを Firefox にインストールする

+ +

XPI ファイルに署名した場合でも、署名の制約を無効化した場合でも、XPI ファイルをインストールする手順はどちらも同じです。

+ +
    +
  1. about:addons に移動します。
    2. +
  2. XPI ファイルをページにドラッグ & ドロップするか、歯車アイコンのメニューを開いて "ファイルからアドオンをインストール" を選択します。
    3. +
  3. 表示されたダイアログで "インストール" をクリックします。
    4. +
+ +

他にも、"ファイル" → "開く" から XPI ファイルを選択したり、Control+O (Command+O) で選択することも可能です。

+ +

{{英語版章題("Installing your extension of Firefox OS")}}

+ +

アドオンを Firefox OS にインストールする

+ +

USB か Wifi で接続されたデスクトップ PC で WebIDE を起動すれば、WebIDE からアドオンをインストールすることができます。WebIDE で "path/to/my-extension" をパッケージ型アプリとして開いてください。

+ +

manifest.json の認証状況が正しければ、接続されたデバイス（Firefox OS の nightly ビルドで動作しているもの）にアドオンをインストールし、実行することができます。

+ +

このアドオンの初回実行時は、Firefox OS のデバイスで Settings → Add-ons で有効にする必要があります。

+ +

{{英語版章題("Troubleshooting")}}

+ +

トラブルシューティング

+ +

起こりやすい問題には以下のようなものがあります。

+ +

"This add-on could not be installed because it has not been verified."

+ + + +

"This add-on could not be installed because it appears to be corrupt."

+ + + +

{{英語版章題("Nothing happens")}}

+ +

何も起こらない

+ + + +

{{英語版章題("Check the console")}}

+ +

コンソールを確認する

+ +

アドオンが解凍されたり読み込まれる過程に関して、他のエラーメッセージが ブラウザコンソール に表示されている場合があります。

diff --git a/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html b/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html new file mode 100644 index 0000000000..3baef65043 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html @@ -0,0 +1,24 @@ +--- +title: Google Chrome からの移行 +slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +--- +
{{AddonSidebar}}
+ +

WebExtension API で開発する拡張機能は、ブラウザー間で互換性が維持されるように設計されており、大半は Google Chrome や Opera でサポートされている extension API とコード互換性があります。これらのブラウザー向けに書かれた拡張機能はほとんどの場合、少しの変更を加えるだけで Firefox でも動くようになります。ほぼすべての WebExtension API は、Chrome と同様に chrome 名前空間のコールバック関数を使ってサポートされています。chrome 名前空間でサポートされない唯一の API は、わざと Chrome と互換性がないものです。こうしたまれな場合は、API ドキュメントページでは明示的に、browser 名前空間だけでサポートされることを述べています。Chrome や Opera から拡張機能を移行する手順は下記の通り:

+ +
    +
  1. manifest.json の設定項目や使用している WebExtensionAPI が Chrome との非互換性リファレンスに載っているか確認します。もし Firefox でサポートされていない設定項目や API を利用している場合、まだ移行できないかもしれません。 Mozilla はこの手順を自動化するサービスを次にて提供しています: https://www.extensiontest.com/.
    2. +
  2. 拡張機能を Firefox にインストールしてテストします。
    3. +
  3. もし何か問題が見つかったら、 dev-addons mailing list または IRC の  #webextensions に連絡してください。
    4. +
  4. アドオンの署名と配布を行うため、アドオンを AMO に送ります。
    5. +
+ +

展開された拡張機能をロードするのに Chrome のコマンドラインオプションを使用していた場合、開発用に Firefox へ自動的に仮インストールを行う web-ext ツールを使用してみてください。  

+ + + +
diff --git a/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html new file mode 100644 index 0000000000..8b78f7bf11 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html @@ -0,0 +1,68 @@ +--- +title: 拡張機能をパッケージ化する +slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ +--- +
{{AddonSidebar}}
+ +

 

+ +
+
+

Firefox ではパッケージされた拡張機能を "XPI ファイル" と呼び、これは単に色々な拡張機能を集めた ZIP ファイルです。

+ +

AMO にアップロードする時に、XPI 拡張機能を使う必要はありません。

+
+
+ +

 

+ +

開発期間中、拡張機能は manifest.json ファイルとその他の必要なファイル—スクリプト、アイコン、HTML 文書などを含む 1 つのディレクトリで構成されるでしょう。AMO にアップロードするにはこれを 1 つの zip ファイルにまとめる必要があります。

+ +

web-ext を使っている場合、拡張機能をパッケージ化するのに web-ext build を使います。その他の場合、下記の OS ごとの手順に従ってください。

+ +
+

Tip. ZIP ファイルは拡張機能を構成するファイル自身でなくてはならず、これらを含んだディレクトリであってはいけません。

+
+ +

Windows

+ +
    +
  1. あなたの拡張機能を格納したフォルダを開きます。
    2. +
  2. すべてのファイルを選択します。
    3. +
  3. 右クリックメニューの「送る」 から zip圧縮を選びます。
    4. +
+ +

+ +

Mac OS X

+ +
    +
  1. あなたの拡張機能を格納したディレクトリを開きます。
    2. +
  2. すべてのファイルを選択します。
    3. +
  3. 右クリックメニューから圧縮を選びます。
    4. +
+ +

+ +
+
コマンドについて http://www.info-zip.org/mans/zip.html.
+
+ +

Linux / Mac OS X ターミナル

+ +
    +
  1. ターミナルを開きます。
    2. +
  2. 拡張機能を含むディレクトリを開きます、そのコマンドは
    + cd path/to/my-extension/
    3. +
  3. ディレクトリの中身を ZIP します、そのコマンドは
    + zip -r -FS ../my-extension.zip *
    4. +
+ +

 

+ +

 

+ +

 

diff --git "a/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" "b/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" new file mode 100644 index 0000000000..a6e6fd4bc6 --- /dev/null +++ "b/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" @@ -0,0 +1,21 @@ +--- +title: ThunderbirdにおけるWebExtensionsによるアドイン開発 +slug: Mozilla/Add-ons/WebExtensions/ThunderbirdにおけるWebExtensionsによるアドイン開発 +translation_of: Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird +--- +

{{AddonSidebar}}{{Draft}}

+ +

Thunderbirdのアドイン開発はFirefoxと同様の方法でコーディングすることが可能です。
+ テキストエディタや、あなたの選んだコーディングツールで。

+ +

APIの違い

+ +

両者ともGeckoベースであるため、いくつかの違いはあるものの、Thunderbirdでは、Firefoxで使えるAPIの多くをサポートしています。
+ 詳細は、browser compatibility for manifest.json と browser support for JavaScript APIsを参照してください。

+ +

参考

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/tips/index.html b/files/ja/mozilla/add-ons/webextensions/tips/index.html new file mode 100644 index 0000000000..f06ffc8985 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/tips/index.html @@ -0,0 +1,54 @@ +--- +title: Tips and Tricks +slug: Mozilla/Add-ons/WebExtensions/Tips +translation_of: Mozilla/Add-ons/WebExtensions/Tips +--- +

{{AddonSidebar}}

+ +

このページには開発者がWebExtensionsを開発するのに便利ないろいろなコツや技術が書かれています。

+ +

Using advanced JavaScript features from ECMAScript 6 and 7

+ +

Firefoxはたくさんの独創的なECMAScript6の特徴を含んでいます。いくつかの新しい、そして実験的な特徴は、デフォルトではWebやWebExtensionでは使用できません。もしあなたがこれらの機能を使いたい場合、Babelのようなトランスパイラを使用するのがベストでしょう。

+ +

Babelは大半のES6の特徴に対するtransformationsを提供します 

+ +

provides transformations for the vast majority of ES6 features, and enables them by default.

+ +

Since Firefox already fully supports most of these, it's best to configure Babel to ignore them.

+ +

私達は.babelrcファイルの作成やあなたのpackage.jsonのbabelセクションに以下の設定を含めることを提案します。

+ +
{
+  "env": {
+    "firefox": {
+      "sourceMaps": "inline",
+      "blacklist": [
+        "es5.properties.mutators",
+        "es6.arrowFunctions",
+        "es6.destructuring",
+        "es6.forOf",
+        "es6.parameters",
+        "es6.properties.computed",
+        "es6.properties.shorthand",
+        "es6.spec.symbols",
+        "es6.spread",
+        "es6.tailCall",
+        "es6.templateLiterals",
+        "es6.regex.sticky",
+        "es6.regex.unicode"
+      ]
+    }
+  }
+}
+
+ +

Then, to compile an individual script, simply run:

+ +
BABEL_ENV=firefox babel <filename>
+
+ +

Or, to compile every JavaScript file under the directory src and place the compiled files in compiled, copying over non-JavaScript files in the process, run:

+ +
BABEL_ENV=firefox babel -Dd compiled src
+
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html new file mode 100644 index 0000000000..64b172591a --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/browser_action/index.html @@ -0,0 +1,49 @@ +--- +title: ツールバーボタン +slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +tags: + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +--- +
{{AddonSidebar}}
+ +

よくブラウザーアクションとして参照され、 このユーザーインターフェイスオプションはブラウザーのツールバーに追加されるボタンです。 ユーザーはボタンをクリックして拡張機能とやりとりします。

+ +

ツールバーボタン (ブラウザーアクション) はアドレスバーボタン (ページアクション)とよく似ています。違いといつ使うかについてのガイダンスは、ページアクションとブラウザーアクションを見てください。

+ +

ブラウザーアクションを指定する

+ +

ブラウザーアクションのプロパティは manifest.json の browser_action キーで定義します。

+ +
"browser_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

唯一不可欠なキーは default_icon です。

+ +

ブラウザーアクションの指定には 2 つの方法があります: ポップアップがつくのとつかないのです。 ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントがディスパッチされ、これを拡張機能が browserAction.onClicked を使ってリッスンします:

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

ポップアップを指定すると、クリックイベントはディスパッチされません: その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップとやりとりできて、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細はポップアップの記事を見てください。

+ +

拡張機能は 1 つだけのブラウザーアクションを持つ必要があります。

+ +

なお、上に示されている任意のプロパティは browserAction API を使ったコードからも変更できます。

+ +

アイコン

+ +

ブラウザーアクションのアイコンを作る詳細は、Photon Design System 文書の Iconography を見てください。

+ +

例

+ +

Github の webextensions-examples リポジトリには、ブラウザーアクションを使う拡張機能の例がいくつかあります。

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html new file mode 100644 index 0000000000..0744bf9d1f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html @@ -0,0 +1,54 @@ +--- +title: コンテキストメニュー項目 +slug: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +--- +
{{AddonSidebar}}
+ +
+

このユーザーインターフェイスオプションは、ブラウザーのコンテキストメニューに１つ以上の項目を追加します。これはユーザーがウェブページを右クリックした時に利用できるコンテキストメニューです。タブも browser.menus API を通じてコンテキストメニューを持つことができます。

+ +

Example of content menu items added by a WebExtension, from the context-menu-demo example

+ +

このオプションを、特定のブラウザーやウェブページコンテンツに関連する機能をさらすのに使います。例えば、ユーザーが画像をクリックした時にグラフィックエディターを開いたり、ページの一部分が選択されている時にページコンテンツを保存したりする機能を表示できます。メニューにはプレーンなメニュー項目や、チェックボックスや、ラジオボタングループや、 セパレータを追加できます。コンテキストメニュー項目が {{WebExtAPIRef("contextMenus.create")}} を使って追加されたら、すべてのブラウザータブで表示されますが、{{WebExtAPIRef("contextMenus.remove")}} にて削除することで隠すこともできます。

+ +

コンテキストメニュー項目を指定する

+ +

コンテキストメニューを、{{WebExtAPIRef("contextMenus")}} API を使ってブログラム的に管理できます。しかし、このAPIの恩恵を受けるには、manifest.json にて contextMenus パーミッションを要求する必要があります。

+ +
"permissions": ["contextMenus"]
+ +

次に、拡張機能のバックグラウンドスクリプト内にコンテキストメニューを追加 (と更新、削除) することもできます。メニュー項目を作成するには id、タイトル、表示するコンテキストメニューを指定します。

+ +
browser.contextMenus.create({
+  id: "log-selection",
+  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
+  contexts: ["selection"]
+}, onCreated);
+ +

拡張機能はメニュー項目のクリックをリッスンします。項目がクリックされたことや、どのコンテキストメニューでクリックされたかや、クリックが行われたタブの詳細などの情報が渡されて、適切に拡張機能の機能が実行されるのに使われます。

+ +
browser.contextMenus.onClicked.addListener(function(info, tab) {
+  switch (info.menuItemId) {
+    case "log-selection":
+      console.log(info.selectionText);
+      break;
+    ...
+  }
+})
+ +

アイコン

+ +

コンテキストメニューで使うアイコンの作り方の詳細は、Photon Design Systemの文書内の Iconography を見てください。

+ +

例

+ +

GitHub の webextensions-examples リポジトリには、コンテキストメニュー項目を実装した2つの拡張機能の実例があります:

+ + +
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html new file mode 100644 index 0000000000..2df3fb0641 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html @@ -0,0 +1,66 @@ +--- +title: 開発ツールパネル +slug: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels +tags: + - Beginner + - Guide + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels +--- +
{{AddonSidebar}}
+ +
+

この機能は Firefox 54 以降で利用できます。

+
+ +

拡張機能が開発者に使われるツールを提供するとき、ブラウザーの開発ツールに、新しいパネルとしてUIを追加できます。

+ +

Simple example showing the addition of "My panel" to the Developer Tools tabs.

+ +

開発ツールパネルを指定する

+ +

開発ツールパネルは devtools.panels API を使って追加され、特別な開発ツールページから順番に実行されます。

+ +

開発ツールのページを追加するには、拡張機能の manifest.json に devtools_page キーを入れて、 拡張機能内のそのページの HTML ファイルの場所を与えます:

+ +
"devtools_page": "devtools-page.html"
+ +

開発ツールのページから、開発ツールパネルに追加するスクリプトを呼び出します:

+ +
<body>
+  <script src="devtools.js"></script>
+</body>
+ +

スクリプトの中では、パネルのタイトル、アイコン、そのコンテンツを与えるHTMLファイルを指定して、開発ツールパネルを作成します:

+ +
function handleShown() {
+  console.log("panel is being shown");
+}
+
+function handleHidden() {
+  console.log("panel is being hidden");
+}
+
+browser.devtools.panels.create(
+  "My Panel",           // title
+  "icons/star.png",           // icon
+  "devtools/panel/panel.html"          // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(handleShown);
+  newPanel.onHidden.addListener(handleHidden);
+});
+ +

拡張機能はインスペクターウィンドウの中で devtools.inspectedWindow.eval() を使うか、バックグラウンドスクリプトからメッセージを渡してコンテンツスクリプトに挿入することで、コードを実行できます。この方法のより詳しくは Extending the developer tools を見てください。

+ +

開発パネルのデザイン

+ +

開発パネルのウェブページを Firefox のスタイルにマッチさせる方法の詳細は Photon Design System の文書を見てください。

+ +

アイコン

+ +

開発ツールパネルに使うアイコン作成方法の詳細は Photon Design System の文書のIconography を見てください。

+ +

例

+ +

GitHub の webextensions-examples リポジトリには開発ツールパネルを実装した devtools-panels の例があります。

diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html new file mode 100644 index 0000000000..a945d4d1fc --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html @@ -0,0 +1,70 @@ +--- +title: Extension pages +slug: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +tags: + - Beginner + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +--- +
{{AddonSidebar()}}
+ +

拡張機能にはフォームやヘルプなど拡張機能が必要とするコンテンツを提供するためのHTMlを含めることができます。

+ +

Example of a simple bundled page displayed as a detached panel.

+ +

拡張機能に含められた HTML ページは拡張機能がバックグラウンドで動作するのと同じ特権を持った JavaScript の API を利用できますが、これらのページはそれぞれのタブ、JavaScriptイベントキュー、グローバル変数を持ちます。

+ +

バックグラウンドのページは「隠れた拡張ページ」と考えてください。

+ +

拡張ページを指定をする

+ +

HTMLファイルと関連づけられた CSS や JavaScript ファイルを拡張機能に含めることができます。これらのファイルはルートに置くこともできますし、サブディレクトリに分けることもできます。

+ +
/my-extension
+    /manifest.json
+    /my-page.html
+    /my-page.js
+ +

拡張ページを表示する

+ +

拡張ページを表示する際に2つの選択肢があります。それは、 {{WebExtAPIRef("windows.create()")}} と {{WebExtAPIRef("tabs.create()")}} です。

+ +

windows.create() を使うと、例えば、HTML ファイルを detached panel (アドレスバー、ブックマークバーなどといったブラウザ UI がないウィンドウ) 開くことができ、ダイアログのようなユーザーエクスペリエンスを実現できます:

+ +
var createData = {
+  type: "detached_panel",
+  url: "panel.html",
+  width: 250,
+  height: 100
+};
+var creating = browser.windows.create(createData);
+ +

ウィンドウが必要なくなったときは JavaScript で閉じることができます。例えば、以下の例では、ユーザーがボタンをクリックしたときに {{WebExtAPIRef("windows.remove()")}} にウィンドウ の ID を渡しています:

+ +
document.getElementById("closeme").addEventListener("click", function(){
+  var winId = browser.windows.WINDOW_ID_CURRENT;
+  var removing = browser.windows.remove(winId);
+});
+ +

拡張ページと履歴

+ +

デフォルトではこの方法で開かれたページは普通のウェブページを開いたときと同じように履歴に保存されます。履歴に保存したくない場合、 {{WebExtAPIRef("history.deleteUrl()")}} を使ってブラウザから履歴のレコードを削除することができます。

+ +
function onVisited(historyItem) {
+  if (historyItem.url == browser.extension.getURL(myPage)) {
+    browser.history.deleteUrl({url: historyItem.url});
+  }
+}
+
+browser.history.onVisited.addListener(onVisited);
+ +

History API を使には manifest.json で "history" パーミッション をリクエストする必要があります。

+ +

ウェブページのデザイン

+ +

Firefox のスタイルとマッチするようなデザインの方法の詳細はPhoton Design System と browser styles をお読みください。

+ +

例

+ +

GitHubの webextensions-examples リポジトリにはウィンドウの作成を実装する例である window-manipulator が含まれています。

diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..0ce45c98db --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,103 @@ +--- +title: ユーザーインターフェイス +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +
{{AddonSidebar}}
+ +

WebExtension API を使った機能拡張にはいくつかのユーザーインターフェイスオプションが提供されていて、ユーザーがこれによって機能を利用できます。この節では、下記にこのオプションの要約と、各ユーザーインターフェイスオプションの詳細な導入とがあります。

+ +
+

あなたの機能拡張で、これらの UI コンポーネントを使って優れたユーザー体験を生むためのアドバイスとして、ユーザー体験のベストプラクティス の記事を見てください。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI オプション記述例
+

ブラウザーツールバーボタン(ブラウザーアクション)

+ 		ブラウザーツールバーのボタンで、クリック時に機能拡張にイベントを送る。既定では全てのタブででこのボタンが表示されている。Example showing a toolbar button (browser action).
+

ポップアップ付きのツールバーボタン

+ 		ボタンがクリックされた時の、ブラウザーツールバーのボタン上のポップアップ。ポップアップは、ユーザーインタラクションを扱う HTML 文書内で定義される。Example of the pop-up on a toolbar button
+

アドレスバーボタン(ページアクション)

+ 		ブラウザーアドレスバー上のボタンで、クリック時に機能拡張にイベントを送る。既定では、全てのタブでこのボタンは非表示。Example showing an address bar button (page action)
ポップアップ付きのアドレスバーボタン +

ブラウザーアドレスバーのボタン上のポップアップで、クリック時に開く。ポップアップは、ユーザーインタラクションを扱う HTML 文書内で定義される。

+ 		Example of a popup on the address bar button
コンテキストメニュー項目ブラウザーのコンテキストメニュー上の、メニュー項目や、チェックボックスや、ラジオボタン。また、メニューはセパレーターを追加して構造化もできる。メニュー項目がクリックされたとき、機能拡張にイベントが送られる。Example of content menu items added by a WebExtension, from the context-menu-demo example
サイドバー +

ウェブページの隣に表示される HTML 文書で、ページ毎に固有なコンテンツを持つ。サイドバーは機能拡張がインストールされた時に開かれて、ユーザーのサイドバー可視化の選択に従う。サイドバー内のユーザーインタラクションは HTML 文書によって扱われる。

+ 		Example of a sidebar
オプションページ機能拡張に対してユーザーが変更できる設定値を決めるページ。ユーザーはブラウザーのアドオンマネージャーからこのページにアクセスできる。Example showing the options page content added in the favorite colors example.
Extension pageウィンドウやタブの中で、フォームやヘルプやその他必要となるあらゆるコンテンツを提供するには、機能拡張に含めたウェブページを使います。Example of a simple bundled page displayed as a detached panel.
通知OS の通知の仕組みを通じてユーザーに表示される一時的な通知。ユーザーが通知をクリックした時や、(自動的に、あるいはユーザーが要求した場合の両方に)通知が閉じた時、機能拡張にイベントを送る。Example of an extension triggered system notification
アドレスバーサジェストユーザーがキーワードを入力した時のカスタムアドレスバーサジェストExample showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
開発ツールパネルブラウザーの開発ツール内で表示される、タブと関連 HTML 文書。Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
+ +

下記の方法ガイドにはユーザーインターフェイスオプションを作成するためのステップバイステップのガイドがあります。:

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/notifications/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/notifications/index.html new file mode 100644 index 0000000000..94658de2e8 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/notifications/index.html @@ -0,0 +1,50 @@ +--- +title: 通知 +slug: Mozilla/Add-ons/WebExtensions/user_interface/Notifications +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Notifications +--- +
{{AddonSidebar}}
+ +
+

通知では、OS の通知サービスを使って、拡張機能やそのコンテンツについての情報を通信することができます:

+ +

+ +

通知にはユーザーへのアクションの呼びかけを入れることができて、アドオンではユーザーによる通知のクリックや通知を閉じるのをリッスンできます。

+ +

通知を指定する

+ +

{{WebExtAPIRef("notifications")}} API を使って通知をプログラム的に管理できます。この API を使うには manifest.json 内で notifications パーミッションを要求する必要があります:

+ +
"permissions": ["notifications"]
+ +

次に {{WebExtAPIRef("notifications.create")}} を使って通知を作成します。notify-link-clicks-i18n の例では次の通り:

+ +
var title = browser.i18n.getMessage("notificationTitle");
+var content = browser.i18n.getMessage("notificationContent", message.url);
+browser.notifications.create({
+  "type": "basic",
+  "iconUrl": browser.extension.getURL("icons/link-48.png"),
+  "title": title,
+  "message": content
+});
+ +

このコードはアイコンや、タイトルや、メッセージつきの通知を作成します。

+ +

通知にアクションの要求が含まれている場合、通知のクリックをリッスンしてアクションハンドラの関数を呼び出せます:

+ +
browser.notifications.onClicked.addListener(handleClick);
+
+ +

通知にてアクションの要求を発行している場合、オプションの通知の id を定義して、どのアクションをユーザーが選択したかがわかるようにすると良いでしょう。

+ +

アイコン

+ +

通知に使うアイコン作成方法の詳細は、Photon Design System文書内の Iconography を見てください。

+ +

例

+ +

GitHub の webextensions-examples リポジトリには通知を実装した notify-link-clicks-i18n の実例があります。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html new file mode 100644 index 0000000000..524223bc00 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html @@ -0,0 +1,65 @@ +--- +title: オプションページ +slug: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +--- +
{{AddonSidebar}}
+ +
+

オプションページでは、ユーザーから変更できるような拡張機能の設定画面を定義します。ユーザーはアドオンマネージャを通じて、アドオンのオプションページにアクセスできます。

+ +

{{EmbedYouTube("eODy24csH5M")}}

+ +

このページにユーザーがアクセスする方法や、ブラウザー UI との連携については各ブラウザーによって異なります。

+ + + +

このページは、プログラムから runtime.openOptionsPage() を呼び出して開くこともできます。

+オプションページにおけるリソースの読み込み元や、eval() のように安全でない処理は Content Security Policy によって制限されます。詳細は Content Security Policy を参照してください。 + +

オプションページを指定する

+ +

オプションページを作成するには、ページを定義する HTML を書きます。このページは通常のページと同様に、CSS と JavaScript ファイルを入れることができます。このページは、 favourite-colour の例から取ってきていて、JavaScript ファイルが含まれます:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+<body>
+  <form>
+      <label>Favourite colour</label>
+      <input type="text" id="colour" >
+      <button type="submit">Save</button>
+  </form>
+  <script src="options.js"></script>
+</body>
+
+</html>
+ +

ページ内で動く JavaScript はアドオンが権限を持つすべての WebExtension APIs を使うことができます。特に、設定を保管する storage API を使えます。

+ +

ページファイルを拡張機能の中にパッケージします.

+ +

manifest.json 内に options_ui キーも必要です、ここではページの URL を与えます。

+ +
"options_ui": {
+  "page": "options.html",
+  "browser_style": true
+},
+ +

options_ui ページを見てオプションページとバックグラウンド/コンテンツスクリプトとの間でオプションを共有することができます。

+ +

オプションコンテンツのデザイン

+ +

Firefox のスタイルにマッチするオプションコンテンツをデザインする方法は Photon Design System の文書を見てください。

+ +

例

+ +

GitHub の webextensions-examples リポジトリでは、オプションページを使う拡張機能の favourite-colour の例があります。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html new file mode 100644 index 0000000000..c285ad2670 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -0,0 +1,50 @@ +--- +title: アドレスバーボタン +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +tags: + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +
{{AddonSidebar}}
+ +

よくページアクションとして参照され、このユーザーインターフェイスオプションはブラウザーのアドレスバーに追加されるボタンです。ユーザーはボタンをクリックして拡張機能とやりとりします。

+ +

+ +

ウェブページに関係する機能のある時だけにこのボタンを使ってください。既定ではアドレスバーのボタンはすべてのタブにて隠されていて、pageAction.show() と pageAction.hide() を呼び出すことで、特定のタブ上での表示・非表示を制御します。

+ +

ツールバーボタンと比較して、似た振る舞いをしますが、そちらは拡張機能の機能が大抵のウェブページに適用できる状況で使われます。

+ +

ページアクションを指定する

+ +

ページアクションのプロパティは manifest.json の page_action キーで定義します。

+ +
"page_action": {
+  "browser_style": true,
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

唯一不可欠なキーは default_icon です。

+ +

ページアクションの指定には2つの方法があります: ポップアップがつくのとつかないのです。 ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントがディスパッチされ、これを拡張機能が pageAction.onClickedを使ってリッスンします:

+ +
browser.pageAction.onClicked.addListener(handleClick);
+ +

ポップアップを指定すると、クリックイベントはディスパッチされません: その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップとやりとりできて、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細はポップアップの記事を見てください。

+ +

拡張機能は1つだけのページアクションを持つ必要があります。

+ +

なお、上に示されている任意のプロパティはpageAction API を使ったコードからも変更できます。

+ +

例

+ +

GitHub の webextensions-examples リポジトリには、ページアクションを使う拡張機能の例がいくつかあります:

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html new file mode 100644 index 0000000000..7ca9f6f69d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/popups/index.html @@ -0,0 +1,59 @@ +--- +title: ポップアップ +slug: Mozilla/Add-ons/WebExtensions/user_interface/Popups +tags: + - UI + - User Interface + - WebExtensions + - popup +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Popups +--- +
{{AddonSidebar}}
+ +
+

ポップアップはツールバーボタンやアドレスバーボタンに関連したダイアログです。

+ +

+ +

ユーザーがボタンをクリックした時、ポップアップが表示されます。ポップアップの外をクリックすると、ポップアップは閉じます。ポップアップは、そこで実行しているスクリプトから window.close() を呼ぶとプログラム的に閉じられます。しかし、拡張機能の JavaScript からプログラム的に開くことはできません。つまりユーザー操作への反応としてだけ開きます。

+ +

"_execute_browser_action" と "_execute_page_action" ショートカットを使って、ポップアップを開くキーボードショートカットを定義できます。manifest.json の commands  キーの文書を見てください。

+ +

ポップアップを指定する

+ +

通常の Web ページと同じく、ポップアップは HTML ファイルで定義されます（ここに CSS や JavaScript も含めることが可能です）。 ただし、拡張機能が持つパーミッションの範囲で JavaScript から WebExtension API にアクセスできる点で通常のものとは異なります。

+ +

ポップアップの文書はポップアップが表示されるたびに読み込まれて、ポップアップが閉じるたびに開放されます。

+ +

HTML ファイルを拡張機能に入れるには、manifest.json内の browser_action か page_action キーの "default_popup" にて指定します:

+ +
  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  }
+ +

ブラウザーの UI と統一感を持たせるスタイルシートをポップアップに組み込めるようになりました。これを利用するためには、browser_action か page_action キーで "browser_style": true を指定してください。

+ +

ポップアップにおけるリソースの読み込み元や、eval() のように安全でない処理は Content Security Policy によって制限されます。詳細は Content Security Policy を参照してください。

+ +

ポップアップのデバッグ

+ +

ポップアップのマークアップと JavaScript をアドオンデバッガーを使ってデバッグできます。しかしポップアップの自動非表示を不可として、ポップアップの外をクリックした時に隠れてしまうのを防ぐ必要があります。ポップアップのデバッグを読んでください。

+ + + +

ポップアップはその中身に合わせて自動的にリサイズされます。ブラウザーごとにこのアルゴリズムは違う場合があります。

+ +

Firefox では、サイズはポップアップが表示される直前に計算されて、最大で毎秒10回のDOM変形があります。strict モードの文書では、サイズは <body> 要素のレイアウトサイズに基いて計算されます。quirks モードでは、これは <html> 要素です。Firefox はその要素の好ましい幅を計算して、その幅にリフローして、縦のスクロールがないようにリサイズします。最大で 800x600 ピクセル の範囲でユーザーの画面にフィットさせます。（Firefox 60以前では680ピクセルまでとなります。）ユーザーが拡張機能のボタンをメニューに動かしたり、ツールバーからオーバーフローした場合、ポップアップはメニューのパネル内に出てきて、固定の幅となります。

+ +

Firefox Android 57 では、ポップアップは新規タブの通常ページとして表示されます。

+ + + +

Firefox のスタイルにマッチするポップアップのウェブページをデザインする方法は、Photon Design System の文書を見てください。

+ +

例

+ +

GitHub の webextensions-examples リポジトリには、ポップアップ付きブラウザーアクションを使う拡張機能の beastify の例があります。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html new file mode 100644 index 0000000000..2034198dc6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -0,0 +1,55 @@ +--- +title: サイドバー +slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +--- +
{{AddonSidebar}}
+ +
+

サイドバーはブラウザーウィンドウの横側の、ウェブページの隣に表示されるペイン(枠)です。ブラウザーはユーザーに、 現在利用しているサイドバーを表示するUIと表示させるサイドバーを選ぶUIを提供します。例えば、Firefox には"表示 > サイドバー" メニューがあります。サイドバーは同時に一つだけ表示できて、すべてのタブとすべてのブラウザーウィンドウに表示されます。

+ +

ブラウザーにはいくつかの組み込み済みのサイドバーがあります。例えば、Firefox にはブックマークと連携するサイドバーがあります:

+ +

sidebar_action というmanifest.json キーを使って、拡張機能はブラウザーに独自のサイドバーを追加できます。それは組み込みのサイドバーと一緒に一覧表示され、ユーザーが組み込みサイドバーと同じメカニズムで開くことができます。

+ +

"browser action"ポップアップと同様に、サイドバーのコンテンツを HTML 文書で指定できます。ユーザーがサイドバーを開く時、サイドバーの文書がブラウザーである各ウィンドウへと読み込まれます。各ウィンドウは独立した環境のインスタンスを保持します。新しいウィンドウが開いた時も同様に独自にサイドバー文書を保持します。

+ +

{{WebExtAPIRef("sidebarAction.setPanel()")}} 関数を使って特定のタブに文書をセットできます。サイドバーはどこのウィンドウに所属しているのかを、 {{WebExtAPIRef("windows.getCurrent()")}} APIを使ってできます。

+ +
// sidebar.js
+browser.windows.getCurrent({populate: true}).then((windowInfo) => {
+  myWindowId = windowInfo.id;
+});
+ +

これは、windowごとに出しわけしたいときに有用な方法です。参考例としてこちらを参照してください。 "annotate-page".

+ +

Sidebar documents は  backgroundや popupスクリプトと同じ特権のJavaScript APIs にアクセスできます。 background page に{{WebExtAPIRef("runtime.getBackgroundPage()")}}を使いアクセスできます(incognito mode windowでなければ(訳注：プライベートタブのことかと思います))。そして {{WebExtAPIRef("tabs.sendMessage()")}} や {{WebExtAPIRef("runtime.sendNativeMessage()")}}のように messeagin APIを使って、 content scripts や ネイティブアプリケーションと連携することが可能です。

+ +

Sidebar documents はウィンドウのクローズ時かユーザがサイドバーを閉じた時にunloadされます。このように backgroundと違って常に生きているわけではありませんがポップアップと違い、ユーザがWebページと連携している間読み込まれたままでいられます。

+ +

サイドバーは初回インストール時に自動で開きます。これは拡張機能にサイドバーがあることをユーザに理解させてくれます。ただしプログラム的にサイドバーを開くことはできません。ユーザのみが開くことができます（訳注：ちなみにブラウザのツールバーボタンを押したときにサイドバーを開くプログラムは動作する）。

+ +

サイドバーを指定する

+ +

サイドバーを使うには初期起動documentを sidebar_action セクションとしてmanifest.json に a default title とiconとともに設定します。

+ +
"sidebar_action": {
+  "default_title": "My sidebar",
+  "default_panel": "sidebar.html",
+  "default_icon": "sidebar_icon.png"
+}
+ +

これら3つは同時に、{{WebExtAPIRef("sidebarAction")}} API を使ってプログラム的に変更可能です。

+ +

Title とicon は UIとしてブラウザがサイドバーのリストアップをするときユーザに示す内容です。例えば Firefoxの "表示> サイドバー" メニューで見ることができます。

+ +

サイドバーデザイン

+ +

Firefox スタイルにサイドバーをマッチさせる方法の詳細は次の文書を参考にしてください。 Photon Design System.

+ +

例

+ +

GitHub 上のwebextensions-examples repository に、サイドバーを実装した例としてannotate-page があります(訳注：annotateは注釈を意味します。サンプルはざっと見たところサイドバー上のメモ機能のようです)。

+
diff --git a/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html b/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html new file mode 100644 index 0000000000..3eb93ad7c9 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html @@ -0,0 +1,451 @@ +--- +title: 2 つめの拡張機能 +slug: Mozilla/Add-ons/WebExtensions/Walkthrough +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +
{{AddonSidebar}} +

初めての拡張機能を一通り読んでいる場合、既に拡張機能の書き方を知っていることと思います。この記事では、API の使い方をより詳しく説明するため、前回よりも少し複雑なアドオンを書いてみます。

+ +

この拡張機能では Firefox のツールバーにボタンを新しく追加します。ユーザーがこのボタンをクリックすると、動物を選択できるポップアップが表示されます。ユーザーが動物を選択すると、ウェブページのコンテンツが選択した動物の画像に置き換わります。

+ +

これらの機能を以下のように実装していきます。

+ + + +

この拡張機能は次のような全体構成になっています。

+ +

+ +

この拡張機能はシンプルですが、WebExtensions API の基本的なコンセプトを多く含んでいます。

+ + + +

ソースコード一式は GitHub で参照できます 。

+ +

この拡張機能を作成するには、Firefox 45 以上が必要です。

+ +

拡張機能を書く

+ +

新しいディレクトリーを作成し、そのディレクトリーに移動します。

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

それでは、"beastify" ディレクトリー配下に新しいファイル "manifest.json" を作成します。以下の内容を書き込んで保存してください。

+ +
{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/ja/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+ + + +

パスはすべて manifest.json 自身からの相対パスで指定することに注意します。

+ +

アイコン

+ +

拡張機能にはアイコンを用意すると良いでしょう。このアイコンは、アドオンマネージャーで拡張機能のリスト横に表示されます（アドオンマネージャーは "about:addons" の URL から確認できます）。今回の manifest.json では "icons/beasts-48.png" を用意していると宣言しています。

+ +

"icons" ディレクトリーを作成して、そこにアイコンを "beasts-48.png" という名前で 保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは Aha-Soft’s Free Retina iconset から引用したものであり、該当する ライセンス の下で使用しています）。

+ +

アイコンを自分で用意する場合 48x48 ピクセルのサイズにする必要があります。高解像度のディスプレイに 96x96 ピクセルのアイコンを表示させたい場合は、manifest.json の icons オブジェクトに 96 というプロパティで設定してください。

+ +
"icons": {
+  "48": "icons/beasts-48.png",
+  "96": "icons/beasts-96.png"
+}
+ +

ツールバーのボタン

+ +

ツールバーのボタンにもアイコンが必要です。今回の manifest.json では "icons/beasts-32.png" を用意していると宣言しています。

+ +

アイコンを "beasts-32.png" という名前で "icons" ディレクトリー内に保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは IconBeast Lite のアイコン集 から引用したものであり、該当する ライセンス の下で使用しています）。

+ +

ポップアップを使わない場合、ユーザーがボタンをクリックした際にはクリックイベントが拡張機能に向けて送出されます。ポップアップを使う場合にはクリックイベントは送出されず、代わりにポップアップが開きます。今回はポップアップが必要なので、次の項で作成しましょう。

+ +

ポップアップ

+ +

今回のポップアップでは、ユーザーが 3 つの動物から 1 つ選択できる機能を持つこととします。

+ +

拡張機能のルートディレクトリー配下に "popup" というディレクトリーを新しく作成します。ここにはポップアップ用のコードを保管します。ポップアップは次の 3 ファイルから構成されます。

+ + + +
mkdir popup
+cd popup
+touch choose_beast.html choose_beast.css choose_beast.js
+ +

choose_beast.html

+ +

HTML ファイルは次のようになります。

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+<body>
+  <div id="popup-content">
+    <div class="button beast">Frog</div>
+    <div class="button beast">Turtle</div>
+    <div class="button beast">Snake</div>
+    <div class="button reset">Reset</div>
+  </div>
+  <div id="error-content" class="hidden">
+    <p>Can't beastify this web page.</p><p>Try a different page.</p>
+  </div>
+  <script src="choose_beast.js"></script>
+</body>
+
+</html>
+ +

"popup-content" という ID の <div> 要素があって、動物の選択をする要素が入っています。"error-content" という ID の <div> 要素と "hidden" クラスもあります。それはポップアップの初期化に問題がある場合に使います。

+ +

通常のウェブページと同じように CSS と JS ファイルを読み込んでいることに注意してください。

+ +

choose_beast.css

+ +

この CSS ではポップアップのサイズを固定し、3 つの選択肢がポップアップを埋めるようにし、基本的なスタイリングを施しています。また要素を class="hidden" で隠してもいます: つまり "error-content" <div> は既定では隠れています。

+ +
html, body {
+  width: 100px;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+  background-color: #E5F2F2;
+}
+
+.reset {
+  background-color: #FBFBC9;
+}
+
+.reset:hover {
+  background-color: #EAEA9D;
+}
+ +

choose_beast.js

+ +

これがポップアップ用の JavaScript です:

+ +

+/**
+ * ページのすべてを隠す CSS、ただし
+ * "beastify-image" クラスを持つ要素は除く
+ */
+const hidePage = `body > :not(.beastify-image) {
+                    display: none;
+                  }`;
+
+/**
+ * ボタンクリックをリッスンし、ページ内のコンテンツスクリプトに
+ * 適切なメッセージを送る
+ */
+function listenForClicks() {
+  document.addEventListener("click", (e) => {
+
+    /**
+     * 動物の名前を受け取って、対応する画像の URL を取得する
+     */
+    function beastNameToURL(beastName) {
+      switch (beastName) {
+        case "Frog":
+          return browser.extension.getURL("beasts/frog.jpg");
+        case "Snake":
+          return browser.extension.getURL("beasts/snake.jpg");
+        case "Turtle":
+          return browser.extension.getURL("beasts/turtle.jpg");
+      }
+    }
+
+    /**
+     * アクティブなタブにページを隠す CSS を挿入して
+     * 動物の URL を取得し、
+     * アクティブなタブのコンテンツスクリプトに "beastify" メッセージを送る
+     */
+    function beastify(tabs) {
+      browser.tabs.insertCSS({code: hidePage}).then(() => {
+        let url = beastNameToURL(e.target.textContent);
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "beastify",
+          beastURL: url
+        });
+      });
+    }
+
+    /**
+     * アクティブなタブからページを隠す CSS を削除し、
+     * アクティブなタブのコンテンツスクリプトに "reset" メッセージを送る
+     */
+    function reset(tabs) {
+      browser.tabs.removeCSS({code: hidePage}).then(() => {
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "reset",
+        });
+      });
+    }
+
+    /**
+     * ただコンソールにエラーをログ出力する
+     */
+    function reportError(error) {
+      console.error(`Could not beastify: ${error}`);
+    }
+
+    /**
+     * アクティブなタブを取得し、
+     * "beastify()" か "reset()" を適切に呼び出す
+     */
+    if (e.target.classList.contains("beast")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(beastify)
+        .catch(reportError);
+    }
+    else if (e.target.classList.contains("reset")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(reset)
+        .catch(reportError);
+    }
+  });
+}
+
+/**
+ * スクリプトにエラーがあった。
+ * ポップアップのエラーメッセージを表示し、通常の UI を隠す。
+ */
+function reportExecuteScriptError(error) {
+  document.querySelector("#popup-content").classList.add("hidden");
+  document.querySelector("#error-content").classList.remove("hidden");
+  console.error(`Failed to execute beastify content script: ${error.message}`);
+}
+
+/**
+ * ポップアップを読み込んだ時、コンテンツスクリプトをアクティブなタブに挿入し、
+ * クリックハンドラーを追加する。
+ * スクリプトの挿入ができない場合、エラー処理をする。
+ */
+browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+.then(listenForClicks)
+.catch(reportExecuteScriptError);
+ +

開始するのは 96行です。ポップアップスクリプトはポップアップが読み込まれ次第、アクティブなタブのコンテンツスクリプトを実行し、その手段は browser.tabs.executeScript() API です。コンテンツスクリプトの実行が成功したら、タブが閉じられるかユーザーが別のページに移動するまで、コンテンツスクリプトがページにロードされたままになります。

+ +

browser.tabs.executeScript() の呼び出しがよく失敗する理由は、コンテンツスクリプトをすべてのページでは実行できないことです。例えば、about:debugging のような権限のあるブラウザーページでは実行できませんし、addons.mozilla.org ドメイン内のページでも実行できません。失敗した場合、reportExecuteScriptError() は "popup-content" <div> を隠して、"error-content" <div> を表示し、エラーを console にログ出力します。

+ +

コンテンツスクリプトの実行が成功したら、listenForClicks() を呼び出します。これはポップアップのクリックをリッスンします。

+ + + +

beastify() 関数は次の 3 つを行います:

+ + + +

reset() 関数は動物化を取り消す:

+ + + +

コンテンツスクリプト

+ +

拡張機能のルートディレクトリー配下に "content_scripts" というディレクトリーを新しく作成します。続いてそこに "beastify.js" という名前のファイルを作成し、下記のスクリプトを記述します。

+ +
(function() {
+  /**
+   * グローバルなガード変数をチェック、設定する。
+   * コンテンツスクリプトが再び同じページに挿入された場合、
+   * 次は何もしない。
+   */
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+
+  /**
+   * 動物の画像の URL を受け取り、既存の動物をすべて削除し、次に
+   * 画像を指す IMG 要素の作成・スタイル適用を行い、
+   * 作成したノードをドキュメント内に挿入する
+   */
+  function insertBeast(beastURL) {
+    removeExistingBeasts();
+    let beastImage = document.createElement("img");
+    beastImage.setAttribute("src", beastURL);
+    beastImage.style.height = "100vh";
+    beastImage.className = "beastify-image";
+    document.body.appendChild(beastImage);
+  }
+
+  /**
+   * ページからすべての動物を削除する
+   */
+  function removeExistingBeasts() {
+    let existingBeasts = document.querySelectorAll(".beastify-image");
+    for (let beast of existingBeasts) {
+      beast.remove();
+  }
+  }
+
+  /**
+   * バックグラウンドスクリプトからのメッセージをリッスンし、
+   * "beastify()" か "reset()" を呼び出す。
+   */
+  browser.runtime.onMessage.addListener((message) => {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+ +

このコンテンツスクリプトが最初にすることは、グローバル変数の window.hasRun のチェックです: セットされていればスクリプトは早くリターンし、そうでなければ window.hasRun をセットして処理し続けます。こうする理由は、ユーザーがポップアップを開くたびに、ポップアップはアクティブなタブのコンテンツスクリプトを実行して、そのために 1 つのタブに複数の実行スクリプトのインスタンスができてしまいます。これが起きると、最初のインスタンスだけが処理するのを確かめる必要があります。

+ +

その次に、始まる場所は 40行で、ここでコンテンツスクリプトはポップアップからのメッセージをリッスンし、その手段は browser.runtime.onMessage API です。上で見たように、ポップアップスクリプトは 2種類の異なるメッセージを送ります: "beastify" と "reset"

+ + + +

動物

+ +

最後に、動物の画像を用意しておく必要があります。

+ +

拡張機能のルートディレクトリー配下に   "beasts" という名前のディレクトリーを新しく作成し、その中に 3 つの画像を適切な名前で保存します。画像は GitHub リポジトリ から、またはここからでも取得できます。

+ +

+ +

動かしてみよう

+ +

正しいファイルが正しい場所にあるかどうか、もう一度確認してください。

+ +
beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json
+ +

Firefox 45 以降では、拡張機能をディスクから一時的にインストールできるようになりました。

+ +

Firefox で "about:debugging" を開き、"一時的なアドオンを読み込む" をクリックし、自分で作成した manifest.json ファイルを選択してください。拡張機能のアイコンが Firefox のツールバーに表示されているはずです。

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

適当なウェブページを開き、拡張機能のアイコンをクリックし、動物を選択してください。するとウェブページが動物の画像に置き換わるはずです。

+ +

{{EmbedYouTube("YMQXyAQSiE8")}}

+ +

コマンドラインから開発する

+ +

仮インストールを web-ext ツールを用いて自動化できます。次を試してください:

+ +
cd beastify
+web-ext run
+
diff --git a/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..18f9ae7071 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,57 @@ +--- +title: 拡張機能とは何か？ +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +tags: + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

拡張機能はウェブブラウザーに機能を追加します。標準化されている web 技術（JavaScript / HTML / CSS）に専用の JavaScript API をいくつか加えて書かれます。とりわけ、拡張機能はブラウザーに新しい機能を追加したり、特定のウェブサイトが持つ見た目やコンテンツを変更したりできます。

+ +

ウェブサイト全体の改良: アドオンを使ってブラウザー内の機能やウェブサイトからの情報を届けます。ユーザーが訪れたページの詳細を集めるようにできて、サービスを向上させることができます。

+ +

+ +

例: Amazon Assistant for Firefox, OneNote Web Clipper, Grammarly for Firefox

+ +

ユーザーの個性を見せる: ブラウザー機能拡張はユーザーによってブラウズされるページコンテンツを操作できます。例えば、ユーザーのお気に入りのロゴや写真を、訪れるすべてのページの背景として追加できます。拡張機能は Firefox UI の見た目を更新する力を与えることもできます (スタンドアローンの テーマアドオンを使っても同様に Firefox UI を更新できます)。

+ +

+ +

例: MyWeb New Tab, Tabliss, VivaldiFox

+ +

ウェブページのコンテンツを追加/削除: ウェブページで触れられた国や都市への旅行ガイドへのアクセスを提供してウェブページのしつこい広告をユーザーがブロックするのを補助したり、読む体験の一貫性を提供するためにページの再フォーマットをしたいかもしれません。ページの HTML と CSS にアクセスして更新する力を持って、拡張機能はユーザーが見たい方法でウェブを見るのを助けることができます。

+ +

+ +

例: uBlock Origin, Reader, Toolbox for Google Play Store™

+ +

ツールや新しいブラウズ機能を追加: タスクボードに新しい機能を追加したり、URL やハイパーリンクやページのテキストから QR コード画像を生成したりします。WebExtensions APIs の柔軟な UI オプションや力を得て、ブラウザーに新機能を簡単に追加できます。そしてほぼあらゆるウェブサイトの機能を改良できて、それはあなたのウェブサイトだけとは限りません。

+ +

+ +

例: Swimlanes for Trello and Tomato Clock

+ +

ゲーム: オフラインで遊べるような伝統的なコンピューターゲームや、新しいゲームの可能性を探検できます。例えば、日々のブラウジングにゲームを取り込むなど。

+ +

 

+ +

例: Asteroids in Popup, Solitaire Card Game New Tab, 2048 Prime.

+ +

開発ツールを追加: あなたのビジネスに沿った開発ツールを提供したり、共有しておきたい便利なテクニックやウェブ開発へのアプローチを提供できます。いずれの方法でも、開発者ツールバーに新規タブを追加することで、組み込みの Firefox 開発ツールを改良できます。

+ +

例: Web Developer, Web React Developer Tools, aXe Developer Tools

+ +

Firefox 用の拡張機能は WebExtensions APIs を使って作成され、この API はクロスブラウザーで動作可能な拡張機能を開発するための技術です。この API の大半は、Google Chrome や Opera でサポートされている extension API と互換性があります。これらのブラウザー向けに書かれた拡張機能のほとんどは、少し変更を加えるだけで Firefox や Microsoft Edge でも動かせるようになります。この API は完全にマルチプロセス Firefox にも対応しています。

+ +

何かアイデアがあったり、レガシーアドオンを WebExtensions API に移植する手助けが必要な場合、ご連絡は dev-addons メーリングリスト や Add-ons room や Matrix までお願いします。英語のサポートです。

+ +

次のステップ

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/what_next_/index.html b/files/ja/mozilla/add-ons/webextensions/what_next_/index.html new file mode 100644 index 0000000000..28e21dedca --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/what_next_/index.html @@ -0,0 +1,60 @@ +--- +title: 次にどうするのか？ +slug: Mozilla/Add-ons/WebExtensions/What_next_ +tags: + - Beginner + - Extensions + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +--- +
{{AddonSidebar}}
+ +

ブラウザー拡張機能のアイデアを実現化していく準備ができているでしょう。開発の旅に出る前に、いくつかの注意点を意識することはスムーズに旅をする上で価値があります。

+ +

開発環境

+ +

ブラウザー拡張機能を開発するためには、どんな特別な開発ツールや環境構築も必要ありません。テキストエディターだけで素晴らしいブラウザー拡張機能を作成することはいくらでも可能です。しかし、ウェブ用の開発で再利用したいツールと環境を持っている場合もあるでしょう。その場合は、いくつかのことを意識する必要があります。

+ +

圧縮や難読化ツールを使用して最終コードを提出する場合には、AMO レビュープロセスにソースコードを提供する必要があります。また、使用するツール (圧縮、難読化、ビルド用) は、オープンソース (または無期限の無料提供) かつレビュー担当者のコンピューター上 (Windows、Mac、Linux) で実行可能である必要があります。残念ながらレビュー担当者は有償ツール、またはウェブベースのツールでは作業することができません。

+ +

ビルドツールに関する詳細

+ +

サードパーティライブラリー

+ +

サードパーティライブラリーはブラウザー拡張機能に複雑な特徴や機能性を素早く追加するための優れた手段です。AMO レビュープロセスに拡張機能を提出する時、どんなサードパーティライブラリーが使用されているかも検討されます。効率的なレビューのため、サードパーティライブラリーは常に公式ウェブサイトやリポジトリーからダウンロードし、ライブラリーが圧縮されている場合はソースコードへのリンクを提供してください。サードパーティライブラリーはいかなる方法でも変更できないことに注意してください。

+ +

ソースコードの提出に関する詳細

+ +

Firefox アドオン配布同意事項

+ +

Firefox のリリース版、またはベータ版にインストールを行うために、拡張機能に署名する必要があります。署名は、addons.mozilla.org (AMO) で行われ、Firefox アドオン配布同意事項の条件に従います。この契約の目的は、Firefox ユーザーに対し、Firefox での体験を強化するような、十分にサポートされた高品質のアドオンを提供することにあります。

+ +

同意約内容を確認する

+ +

署名に関する詳細

+ +

レビュープロセス

+ +

署名のためにブラウザー拡張機能が提出されると、自動審査の対象となります。また、自動審査においてマニュアル審査が必要と判定された場合には、マニュアル審査の対象となる場合もあります。ブラウザー拡張機能は自動審査を通過するまで署名は行われず、マニュアル審査を通過しなかった場合に署名が取り消されることがあります。この審査の過程は厳密なガイドラインに従っているため、審査で問題になりそうな点を確認して回避することは簡単です。

+ +

レビューポリシーとガイドラインに関する詳細

+ + + +

AMO にブラウザー拡張機能を掲載することを選んだ場合、拡張機能は AMO のウェブサイト、Firefox ブラウザーのアドオンマネージャー、または Mozilla のウェブサイト上のいずれかの場所に表示されます。拡張機能がどのようにおすすめとして選ばれるかを取り上げたガイドラインの一覧を作成しました。これらのガイドラインに従うことで、拡張機能をおすすめされるための最高の機会を得ることになります。

+ +

アドオンのおすすめに関する詳細

+ +

学習体験を続ける

+ +

これまでの内容を知ったところで、今度はブラウザー拡張機能の開発について詳しく説明します。以下のセクションを確認してください:

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/work_with_the_bookmarks_api/index.html b/files/ja/mozilla/add-ons/webextensions/work_with_the_bookmarks_api/index.html new file mode 100644 index 0000000000..daca995565 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/work_with_the_bookmarks_api/index.html @@ -0,0 +1,199 @@ +--- +title: Bookmarks API を使う +slug: Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API +tags: + - Add-ons + - Beginner + - Bookmarks + - Extensions + - How-to + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API +--- +

{{AddonSidebar}}

+ +

ブックマークにより、ユーザーはウェブページのリストを集めたり編集したりできて、お気に入りに簡単に戻ることができます。Bookmarks API を使って、拡張機能はユーザーができるのとほぼ同じ方法でブックマークを操作できます。

+ +

権限

+ +

Bookmarks API を利用するには、拡張機能の manifest.json ファイルで "bookmarks" 権限を要求する必要があります:

+ +
"permissions": [
+  "bookmarks"
+],
+ +

機能

+ +

Bookmarks API は、拡張機能にとって、ユーザーがブックマークとその機能でできることを可能にします:

+ + + +

実例を一通り見る

+ +

Bookmarks API の使い方を理解するため、bookmark-it の例を見てみましょう。この例ではツールバーアイコン ({{WebExtAPIRef("browserAction")}}) を追加し、これがクリックされたときに、ブックマークから現在のページを追加や削除します。ページが他の方法でブックマークされている(または削除されている)場合、ページのブックマーク状態を表示するようにアイコンが更新されます。

+ +

この動画で拡張機能を表示します:

+ +

{{EmbedYouTube("hCDN0FotiFw")}}

+ +

manifest.json

+ +

拡張機能を記述する manifest.json:

+ +
{
+  "manifest_version": 2,
+  "name": "Bookmark it!",
+  "version": "1.1",
+  "description": "A simple bookmark button",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/bookmark-it",
+ +

アドオンマネージャーの代わりに、拡張機能を表すアイコンを定義します。

+ +
  "icons": {
+    "48": "icons/bookmark-it.png",
+    "96": "icons/bookmark-it@2x.png"
+  },
+ +

権限のリクエスト。"bookmarks" は Bookmarks API を利用するのに要求されます。アクティブなタブの URL とタイトルを読み込んだり、ページのブックマークを作成/検索するのに、"tabs" が要求されます。こうした詳細にアクセスするのに Tabs API が必要なのは、Bookmark API を Tabs API なしに使うのが考えにくいということです。

+ +
  "permissions": [
+    "bookmarks",
+    "tabs"
+  ],
+ +

基本的なツールバーボタンの詳細をセットします。ボタン機能の大半は、ページのブックマーク状態が分かった後に、コード内でセットされます。

+ +
  "browser_action": {
+    "default_icon": "icons/star-empty-38.png",
+    "default_title": "Bookmark it!"
+  },
+ +

ページのブックマークを追加/削除してツールバーボタンの特色をセットするバックグラウンドスクリプトを定義します。

+ +
  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

background.js

+ +

他のバックグラウンドスクリプトと同様に、background.js は拡張機能が開始してすぐに実行されます。最初にスクリプトは updateActiveTab() を呼び出し、ここでは {{WebExtAPIRef("tabs.query")}} を使って現在のタブの Tabs オブジェクトを取得して開始し、そのオブジェクトを updatetab() に渡します、コードは次の通り:

+ +
  var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+  gettingActiveTab.then(updateTab);
+ +

updatetab() は 最初にアクティブなタブの URL を isSupportedProtocol() に渡します:

+ +
  function updateTab(tabs) {
+    if (tabs[0]) {
+      currentTab = tabs[0];
+      if (isSupportedProtocol(currentTab.url)) {
+ +

isSupportedProtocol() はアクティブタブに表示される URL がブックマークできるかを決めます。タブの URL からプロトコルを抽出するために、拡張機能は HTMLHyperlinkElementUtils を利用して <a> 要素にタブの URL を追加してから、protocol プロパティを使ってプロトコルを取得します。

+ +
  function isSupportedProtocol(urlString) {
+    var supportedProtocols = ["https:", "http:", "ftp:", "file:"];
+    var url = document.createElement('a');
+    url.href = urlString;
+    return supportedProtocols.indexOf(url.protocol) != -1;
+  }
+ +

ブックマークがプロトコルをサポートしている場合、拡張機能はタブの URL がブックマーク済みかどうかを決めて、その場合に updateIcon() を呼び出します:

+ +
      var searching = browser.bookmarks.search({url: currentTab.url});
+      searching.then((bookmarks) => {
+        currentBookmark = bookmarks[0];
+        updateIcon();
+ +

updateIcon() は、URL がブックマーク済みかどうかにより、ツールバーボタンのアイコンとタイトルをセットします。

+ +
function updateIcon() {
+  browser.browserAction.setIcon({
+    path: currentBookmark ? {
+      19: "icons/star-filled-19.png",
+      38: "icons/star-filled-38.png"
+    } : {
+      19: "icons/star-empty-19.png",
+      38: "icons/star-empty-38.png"
+    },
+    tabId: currentTab.id
+  });
+  browser.browserAction.setTitle({
+    // Screen readers can see the title
+    title: currentBookmark ? 'Unbookmark it!' : 'Bookmark it!',
+    tabId: currentTab.id
+  });
+}
+ +

ツールバーボタンが初期化されると、拡張機能はツールバーボタンのクリックを、toggleBookmark() を呼び出して、監視し始めます

+ +
browser.browserAction.onClicked.addListener(toggleBookmark);
+ +

toggleBookmark() は、URL がブックマークにあるかどうか探す updateTabs() の検索結果を使い、現在の URL のブックマークを削除するか、追加するのかを決定します。

+ +
function toggleBookmark() {
+  if (currentBookmark) {
+    browser.bookmarks.remove(currentBookmark.id);
+  } else {
+    browser.bookmarks.create({title: currentTab.title, url: currentTab.url});
+  }
+}
+ +

ツールバーアイコンを更新するため、拡張機能はブックマークの作成/削除を監視します。この方法の利点は、拡張機能によるブックマーク更新と、拡張機能の外のユーザーの更新の両方を捕捉できることです。

+ +
// listen for bookmarks being created
+browser.bookmarks.onCreated.addListener(updateActiveTab);
+
+// listen for bookmarks being removed
+browser.bookmarks.onRemoved.addListener(updateActiveTab);
+ +

最後に、拡張機能はアクティブなタブの URL変更や、ユーザーが他のタブやウィンドウに移動するのを監視します。これらの動作は閲覧 URL と、拡張機能のツールバーアイコンを変えることがあります。

+ +
// listen to tab URL changes
+browser.tabs.onUpdated.addListener(updateActiveTab);
+
+// listen to tab switching
+browser.tabs.onActivated.addListener(updateActiveTab);
+
+// listen for window switching
+browser.windows.onFocusChanged.addListener(updateActiveTab);
+ +

関連項目

+ +

より詳しく学習するには、Bookmarks API リファレンスを見てみてください。

diff --git a/files/ja/mozilla/add-ons/webextensions/working_with_files/index.html b/files/ja/mozilla/add-ons/webextensions/working_with_files/index.html new file mode 100644 index 0000000000..299643f95c --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/working_with_files/index.html @@ -0,0 +1,160 @@ +--- +title: ファイルの操作 +slug: Mozilla/Add-ons/WebExtensions/Working_with_files +tags: + - Guide + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Working_with_files +--- +
{{AddonSidebar()}}
+ +

拡張機能にて完全な機能を提供するのにファイルを操作する必要があるかもしれません。この記事ではファイルを扱うための 5 つのメカニズムを見ていきます:

+ + + +

それぞれのメカニズムに対し、各 API ドキュメンテーションやガイド、対応する API の使用法の例のリファレンスと一緒に、使い方を紹介します。

+ +

ダウンロード API を使ってファイルをダウンロード

+ +

この仕組みでは、あなたのウェブサイト(や URL で決められたあらゆる場所)からユーザーのコンピューターにファイルを入手できます。主要なメソッドは {{WebExtAPIRef("downloads.download()")}} で、その簡単なフォームで URL を受け付けて、その URL からユーザーの既定のダウンロードフォルダーにファイルをダウンロードします:

+ +
browser.downloads.download({url: "https://example.org/image.png"})
+ +

ユーザーが saveAs パラメーターで指定した場所にダウンロードさせることもできます。

+ +
+

Using URL.createObjectURL() you can also download files and blobs defined in your JavaScript, which can include local content retrieved from IndexedDB.

+
+ +

ダウンロード API はダウンロードをキャンセル、停止、再開、消去、削除することもできます; ダウンロードマネージャーでダウンロード済みのファイルを探します; コンピューターのファイルマネージャーでダウンロード済みのファイルを表示します; 関連付けられたアプリケーションでそのファイルを開きます。

+ +

この API を使うには manifest.json ファイルにて "downloads" API パーミッションが必要です。

+ +

例: Latest download
+ API リファレンス: downloads API

+ +

ファイルピッカーを使って拡張機能でファイルを開く

+ +

ユーザーのコンピューターからのファイルを扱いたい場合、1 つの選択はコンピューターのファイルブラウザーを使ってユーザーがファイル選択できるようにすることです。新しいページを作るか既存のページにコードを挿入して、ファイルピッカーをユーザーに提供するため HTML input 要素の file タイプを使います。ユーザーがファイルを選ぶと、ページに関連付けられたスクリプトにより、DOM File API を使ってウェブアプリケーションと同様な方法でファイルの中身にページからアクセスできます。

+ +

例: Imagify
+ ガイド: Using files from web applications
+ API リファレンス: HTML input element | DOM File API

+ +
+

選択したフォルダーの全ファイルにアクセスや処理したい場合、<input type="file" webkitdirectory="true"/> を使ってフォルダーを選択して、そこにある全ファイルを返すようにできます。

+
+ +

ドラッグアンドドロップを使って拡張機能でファイルを開く

+ +

Web Drag and Drop API では別のファイルピッカーがあります。このメソッドを使うには、UI にフィットする ‘drop zone’ を設置して、dragenter, dragover, drop イベントのリスナーを要素に追加します。ドロップイベントのハンドラーでは、DataTransfer.files を使って dataTransfer プロパティから提供されたオブジェクトからユーザーにドロップされたあらゆるファイルに、コードからアクセスできます。すると DOM File API を使ってファイルにアクセス・操作することができます。

+ +

例: Imagify
+ ガイド: Using files from web applications | File drag and drop
+ API リファレンス: DOM File API

+ +

 IndexedDB ファイルストレージライブラリーを使ってローカルにファイル保存する

+ +

拡張機能がローカルにファイル保存する必要がある場合、idb-file-storage ライブラリーは 完結な PromiseベースのIndexedDB APIラッパーであり、ストレージやファイルやblobの取得を助けます。

+ +

Firefoxでは、このライブラリーは非標準の IDBMutableFile APIのラッパーとしてPromiseベースのAPIも提供します (IDBMutableFile API を使うと、拡張機能はIndexedDB データベースファイルオブジェクトの作成と保存ができて、それによりメモリーにファイルを読み込むことなくファイルの中身を読み書きできるAPIが提供されます)

+ +

このライブラリーのキーとなる機能は:

+ + + +

Store Collected Images の例ではこの機能の大半の使い方を示します。(IDBMutableFile は含まれていませんが、idb-file-storage examples にて、ライブラリーの他の多くの例と一緒に見ることができます)。

+ +

Store Collected Images の例では、画像コンテキストメニューを使ってユーザーが画像を追加できます。選択された画像はポップアップメニューに集められて、名前付きコレクションに保存されます。ツールバーボタンの({{WebExtAPIRef("browserAction")}}) ナビゲートコレクションのページを開き、そこでユーザーは選択を狭められるフィルターオプションを使って、保存された画像を見たり消去したりできます。この例を見てください。

+ +

/utils/ 内の image-store.js を見てライブラリーの動作を理解できます:

+ +

store を作成して画像を保存する

+ +
async function saveCollectedBlobs(collectionName, collectedBlobs) {
+ const storedImages = await getFileStorage({name: "stored-images"});
+
+ for (const item of collectedBlobs) {
+    await storedImages.put(`${collectionName}/${item.uuid}`, item.blob);
+ }
+}
+ +

saveCollectedBlobs is called when the user clicks save in the popup and has provided a name for the image collection. First, getFileStorage creates, if it does not exist already, or retrieves the IndexedDB database “stored-images” to the object storedImages. storedImages.put then adds each collected image to the database, under the collection name, using the blob’s unique id (the file name). If the image being store has the same name as one already in the database, it is overwritten. If you want to avoid this, query the database first using imagesStore.list() with a filter for the file name, and, if the list returns a file, add a suitable suffix to the name of the new image to store a separate item.

+ +

保管された画像を表示用に取得する

+ +
export async function loadStoredImages(filter) {
+ const imagesStore = await getFileStorage({name: "stored-images"});
+ let listOptions = filter ? {includes: filter} : undefined;
+ const imagesList = await imagesStore.list(listOptions);
+ let storedImages = [];
+ for (const storedName of imagesList) {
+    const blob = await imagesStore.get(storedName);
+    storedImages.push({storedName, blobUrl: URL.createObjectURL(blob)});
+ }
+ return storedImages;
+}
+
+ +

loadStoredImages is called when the user clicks view or reload in the navigate collection page. getFileStorage opens the “stored-images” database, then imagesStore.list gets a filtered list of the stored images. This list is then used to retrieve images with imagesStore.get and build a list to return to the UI.

+ +

Note the use of URL.createObjectURL(blob) to create a URL that references the image blob. This URL is then used in the UI (navigate-collection.jscollection.js) to display the image.

+ +

集まった画像を削除する

+ +
async function removeStoredImages(storedImages) {
+ const imagesStore = await getFileStorage({name: "stored-images"});
+ for (const storedImage of storedImages) {
+    URL.revokeObjectURL(storedImage.blobUrl);
+    await imagesStore.remove(storedImage.storedName);
+ }
+}
+
+ +

removeStoredImages is called when the user clicks delete in the navigate collection page. Again, getFileStorage opens the “stored-images” database then imagesStore.remove removes each image from the filtered list of images.

+ +

Note the use of URL.revokeObjectURL() to explicitly revoke the blob URL. This enables the garbage collector to free the memory allocated to the URL. If this is not done, the memory will not get returned until the page on which it was created is closed. If the URL was created in an extension’s background page, this is not unloaded until the extension is disabled, uninstalled, or reloaded, so holding this memory unnecessarily could affect browser performance. If the URL is created in an extension’s page (new tab, popup, or sidebar) the memory is released when the page is closed, but it is still a good practice to revoke the URL when it is no longer needed.

+ +

Once the blob URL has been revoked any attempt to load it will result in an error. 例えば、if the blob url was used as the SRC attribute of an IMG tag, the image will not load and will not be visible. It is therefore good practice to remove any revoked blob urls from generated HTML elements when the blob URL is revoked.

+ +

Example: Store Collected Images
+ API References:  idb-file-storage library

+ +
+

Note: You can also use the full Web IndexedDB API to store data from your extension. This can be useful where you need to store data that isn’t handled well by the simple key/value pairs offered by the DOM Storage API.

+
+ +

ローカルアプリでファイルを処理する

+ +

Where you have a native app or want to deliver additional native features for file processing, use native messaging to pass a file to a native app for processing.

+ +

You have two options:

+ + + +

To add the file or blob you want the native application to process use JSON.stringify().

+ +

To use this method the extension must request the "nativeMessaging" permission in its manifest.json file. Reciprocally, the native application must grant permission for the extension by including its ID in the "allowed_extensions" field of the app manifest.

+ +

Example: Native Messaging (illustrates simple messaging only)
+ Guides: Native messaging
+ API references: runtime API

diff --git a/files/ja/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html b/files/ja/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html new file mode 100644 index 0000000000..5dd16ac2da --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html @@ -0,0 +1,629 @@ +--- +title: Tabs API を使う +slug: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API +tags: + - Add-ons + - Beginner + - Extensions + - How-to + - WebExtensions + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API +--- +

{{AddonSidebar}}

+ +

タブを使うとユーザーはブラウザーウィンドウに複数のウェブページを開いてウェブページ間をスイッチできるようになります。Tabs API により、タブを操作して、新しい方法でタブを使ったり拡張機能の機能として配布できます。

+ +

このハウツー記事では次のようなことを見ていきます:

+ + + +

その次には、API で提供されるその他のいろいろな機能を見て終わります。

+ +
+

注: There are some Tab API features covered elsewhere. These are the methods you can use to manipulate tab content with scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, and {{WebExtAPIRef("tabs.executeScript")}}). If you want more information on these methods, see the Concepts article Content scripts and the how-to guide Modify a web page.

+
+ +

権限と Tabs API

+ +

Tabs API 機能の大半では権限は不要ですが、次の例外はあります:

+ + + +

下記は、拡張機能の manifest.json ファイルで "tabs" 権限を要求する方法です:

+ +
"permissions": [
+  "<all_urls>",
+  "tabs"
+],
+
+ +

この要求により、訪問するすべてのウェブサイトですべての Tabs API 機能を使うことができます。また、host権限不要の {{WebExtAPIRef("tabs.executeScript")}} や {{WebExtAPIRef("tabs.insertCSS")}} を使うのに、"activeTab"の形で権限を要求する別のこの権限は "tabs" に <all_urls> つきのものと同じですが、次の 2 つの制限があります:

+ + + +

このアプローチの利点は、拡張機能が “Access your data for all websites” という警告をユーザーに表示しないことです。これは <all_urls> 権限により、拡張機能がいつでもどんなタブでも実行できるのに対し、"activeTab" では、現在のタブでのユーザーが要求したアクションのみ実行するためです。

+ +

タブとそのプロパティの探検

+ +

すべてのブラウザーウィンドウのすべてのタブのリストを取得したいときもあるでしょう。ある条件にマッチするタブ、例えば特定のタブから開かれた、あるいはあるドメインのページを表示したもの、のサブセットを発見したいこともあるでしょう。タブのリストを持っていれば、そのプロパティを詳しく知りたくなるでしょう。

+ +

これが {{WebExtAPIRef("tabs.query")}} の出てくる場所です。単独で使ってすべてのタブを取得したり、queryInfo オブジェクト—これでタブがアクティブかとか、現在のウィンドウ内かとかといった、17 の条件のいくつかを指定する条件—をつけて、{{WebExtAPIRef("tabs.query")}} はタブの情報を含んだ {{WebExtAPIRef("tabs.Tab")}} オブジェクトの配列を返します。

+ +

現在のタブだけの情報が欲しいときは、そのタブの {{WebExtAPIRef("tabs.Tab")}} オブジェクトを {{WebExtAPIRef("tabs.getCurrent")}} を使って取得できます。タブの ID がある場合、{{WebExtAPIRef("tabs.Tab")}} オブジェクトを {{WebExtAPIRef("tabs.get")}} を使って取得できます。

+ +

方法の実例

+ +

{{WebExtAPIRef("tabs.query")}} と {{WebExtAPIRef("tabs.Tab")}} の使われ方を見るために、tabs-tabs-tabs の例で “switch to tabs” のリストをツールバーボタンのポップアップに追加するのを見てみましょう。

+ +

The tabs tabs tabs toolbar menu showing the switch to tap area

+ +

manifest.json

+ +

これが manifest.json です:

+ +
{
+  "browser_action": {
+    "browser_style": true,
+    "default_title": "Tabs, tabs, tabs",
+    "default_popup": "tabs.html"
+  },
+  "description": "A list of methods you can perform on a tab.",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs",
+  "manifest_version": 2,
+  "name": "Tabs, tabs, tabs",
+  "permissions": [
+    "tabs"
+  ],
+  "version": "1.0"
+}
+
+ +
+

次のことに注意します:

+ + +
+ +

tabs.html

+ +

tabs.html では拡張機能のポップアップのコンテンツを定義します。

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="tabs.css"/>
+ </head>
+
+<body>
+
+ <div class="panel">
+    <div class="panel-section panel-section-header">
+     <div class="text-section-header">Tabs-tabs-tabs</div>
+    </div>
+
+    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
+
+
+…
+
+Define the other menu items
+…
+
+    <div class="switch-tabs">
+
+     <p>Switch to tab</p>
+
+     <div id="tabs-list"></div>
+
+    </div>
+ </div>
+
+ <script src="tabs.js"></script>
+
+</body>
+
+</html>
+
+ +

上記のまとめとして:

+ +
    +
  1. メニュー項目が定義されます。
    2. +
  2. タブのリストを入れるため、ID が tabs-list の空の div が定義されます。
    3. +
  3. tabs.js が呼ばれます。
    4. +
+ +

tabs.js

+ +

tabs.js では、タブのリストが作られて、ポップアップに追加される方法を見ていきましょう。

+ +

ポップアップの作成

+ +

まず、tabs.html が読み込まれたとき、listTabs() を実行するイベントハンドラを追加します。:

+ +
document.addEventListener("DOMContentLoaded", listTabs);
+ +

listTabs() は最初に getCurrentWindowTabs() を呼び出します。ここで現在のウィンドウ内のタブの {{WebExtAPIRef("tabs.Tab")}} オブジェクトを取得するのに{{WebExtAPIRef("tabs.query")}} が使われます:

+ +
function getCurrentWindowTabs() {
+  return browser.tabs.query({currentWindow: true});
+}
+
+ +

今度は、ポップアップのコンテンツを作成するために ListTabs() が準備できています。

+ +

開始するには:

+ +
    +
  1. tabs-list div を取得。
    2. +
  2. 文書のフラグメントを作成 (ここにリストが作成される)。
    3. +
  3. カウンターをセット。
    4. +
  4. tabs-list div のコンテンツをクリアする。
    5. +
+ +
function listTabs() {
+ getCurrentWindowTabs().then((tabs) => {
+    let tabsList = document.getElementById('tabs-list');
+    let currentTabs = document.createDocumentFragment();
+    let limit = 5;
+    let counter = 0;
+
+    tabsList.textContent = '';
+
+ +

次に、それぞれのタブのリンクを作ります:

+ +
    +
  1.  {{WebExtAPIRef("tabs.Tab")}} オブジェクトからの最初の 5項目でループする。
    2. +
  2. 各項目ごとに、文書のフラグメントのハイパーリンクを追加する。 +
      +
    • リンクのラベル—つまり、そのテキスト—が、タブのタイトル (ない場合はその ID)を使って、セットされる
      • +
    • タブの ID を使ってリンクのアドレスがセットされる。
      • +
    +
    3. +
+ +
    for (let tab of tabs) {
+     if (!tab.active && counter <= limit) {
+        let tabLink = document.createElement('a');
+
+        tabLink.textContent = tab.title || tab.id;
+
+       tabLink.setAttribute('href', tab.id);
+        tabLink.classList.add('switch-tabs');
+        currentTabs.appendChild(tabLink);
+     }
+
+     counter += 1;
+
+    }
+
+ +

最後に、tabs-list div に文書のフラグメントが書き込まれる:

+ +
    tabsList.appendChild(currentTabs);
+  });
+}
+
+ +

アクティブタブを操作する

+ +

関連するもう 1 つの例として、“Alert active tab” インフォオプションがあり、これはアクティブなタブのすべての {{WebExtAPIRef("tabs.Tab")}} オブジェクトのプロパティをアラートにダンプするものです:

+ +
 else if (e.target.id === "tabs-alertinfo") {
+   callOnActiveTab((tab) => {
+     let props = "";
+     for (let item in tab) {
+       props += `${ item } = ${ tab[item] } \n`;
+     }
+     alert(props);
+   });
+ }
+
+ +

callOnActiveTab() では、アクティブなセットを求めて {{WebExtAPIRef("tabs.Tab")}} オブジェクトをループすることで、アクティブなタブを探します:

+ +
document.addEventListener("click", function(e) {
+ function callOnActiveTab(callback) {
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+ }
+}
+
+
+ +

タブを作成、複製、移動、更新、読み込み、削除する

+ +

Having gathered information about the tabs you’ll most likely want to do something with them—either to offer users features for manipulating and managing tabs or to implement functionality in your extension.

+ +

The following functions are available:

+ + + +
+

NOTE: 

+ +

These functions all require the ID (or IDs) of the tab they are manipulating:

+ + + +

Whereas the following functions will act on the active tab (if no tab ID is provided): 

+ + +
+ +

方法の実例

+ +

The tabs-tabs-tabs example exercises all of these features except for updating a tab’s URL The way in which these APIs are used is similar, so we’ll look at one of the more involved implementations, that of the “Move active tab to the beginning of the window list” option.

+ +

But first, here is a demonstration of the feature in action:

+ +

{{EmbedYouTube("-lJRzTIvhxo")}}

+ +

manifest.json

+ +

None of the functions require a permission to operate, so there are no features in the manifest.json file that need to be highlighted.

+ +

tabs.html

+ +

tabs.html defines the “menu” displayed in the popup, which includes the “Move active tab to the beginning of the window list” option, with a series of <a> tags grouped by a visual separator. Each menu item is given an ID, which is used in tabs.js to determine which menu item is being requested.

+ +
    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
+    <a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
+
+    <div class="panel-section-separator"></div>
+
+
+    <a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
+
+    <a href="#" id="tabs-reload">Reload active tab</a><br>
+    <a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
+ +

tabs.js

+ +

To implement the “menu” defined in tabs.html, tabs.js includes a listener for clicks in tabs.html:

+ +
document.addEventListener("click", function(e) {
+ function callOnActiveTab(callback) {
+
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+}
+}
+
+ +

A series of if statements then look to match the ID of the item clicked.

+ +

This code snippet is for the “Move active tab to the beginning of the window list” option:

+ +
 if (e.target.id === "tabs-move-beginning") {
+   callOnActiveTab((tab, tabs) => {
+     var index = 0;
+     if (!tab.pinned) {
+       index = firstUnpinnedTab(tabs);
+     }
+     console.log(`moving ${tab.id} to ${index}`)
+     browser.tabs.move([tab.id], {index});
+   });
+ }
+
+ +

It's worth noting the use of console.log(). This enables you to output information to the debugger console, which can be useful when resolving issues found during development.

+ +

Example of the console.log output, from the move tabs feature, in the debugging console

+ +

The move code first calls callOnActiveTab() which in turn calls getCurrentWindowTabs() to get a {{WebExtAPIRef("tabs.Tab")}} object containing the active window’s tabs. It then loops through the object to find and return the active tab object:

+ +
 function callOnActiveTab(callback) {
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+ }
+
+ +
ピン止めされたタブ
+ +

A feature of tabs is that the user can pin tabs in a window. Pinned tabs are placed at the start of the tab list and cannot be moved. This means that the earliest position a tab can move to is the first position after any pinned tabs. So, firstUnpinnedTab() is called to find the position of the first unpinned tab by looping through the tabs object:

+ +
function firstUnpinnedTab(tabs) {
+ for (var tab of tabs) {
+   if (!tab.pinned) {
+     return tab.index;
+   }
+ }
+}
+
+ +

We now have everything needed to move the tab: the active tab object from which we can get the tab ID and the position the tab is to be moved to. So, we can implement the move:

+ +
     browser.tabs.move([tab.id], {index});
+ +

The remaining functions to duplicate, reload, create, and remove tabs are implemented similarly.

+ +

タブのズームレベルを操作する

+ +

The next set of functions enable you to get ({{WebExtAPIRef("tabs.getZoom")}}) and set ({{WebExtAPIRef("tabs.setZoom")}}) the zoom level within a tab. You can also retrieve the zoom settings ({{WebExtAPIRef("tabs.getZoomSettings")}}) but, at the time of writing, the ability to set the settings ({{WebExtAPIRef("tabs.setZoomSettings")}}) wasn’t available in Firefox.

+ +

The level of zoom can be between 30% and 300% (represented as decimals 0.3 to 3).

+ +

In Firefox the default zoom settings are:

+ + + +

方法の実例

+ +

The tabs-tabs-tabs example includes three demonstrations of the zoom feature: zoom in, zoom out, and reset zoom. Here is the feature in action:

+ +

{{EmbedYouTube("RFr3oYBCg28")}}

+ +

Let’s take a look at how the zoom in is implemented.

+ +

manifest.json

+ +

None of the zoom functions require permissions, so there are no features in the manifest.json file that need to be highlighted.

+ +

tabs.html

+ +

We have already discussed how the tabs.html defines the options for this extension, nothing new or unique is done to provide the zoom options.

+ +

tabs.js

+ +

tabs.js starts by defining several constants used in the zoom code:

+ +
const ZOOM_INCREMENT = 0.2;
+const MAX_ZOOM = 3;
+const MIN_ZOOM = 0.3;
+const DEFAULT_ZOOM = 1;
+
+ +

It then uses the same listener we discussed earlier so it can act on clicks in tabs.html.

+ +

For the zoom in feature, this runs:

+ +
 else if (e.target.id === "tabs-add-zoom") {
+   callOnActiveTab((tab) => {
+     var gettingZoom = browser.tabs.getZoom(tab.id);
+     gettingZoom.then((zoomFactor) => {
+       //the maximum zoomFactor is 3, it can't go higher
+       if (zoomFactor >= MAX_ZOOM) {
+         alert("Tab zoom factor is already at max!");
+       } else {
+         var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
+         //if the newZoomFactor is set to higher than the max accepted
+         //it won't change, and will never alert that it's at maximum
+         newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
+         browser.tabs.setZoom(tab.id, newZoomFactor);
+       }
+     });
+   });
+ }
+
+ +

This code uses callOnActiveTab() to get the details of the active tab, then {{WebExtAPIRef("tabs.getZoom")}} gets the tab’s current zoom factor. The current zoom is compared to the defined maximum (MAX_ZOOM) and an alert issued if the tab is already at the maximum zoom. Otherwise, the zoom level is incremented but limited to the maximum zoom, then the zoom is set with {{WebExtAPIRef("tabs.getZoom")}}.

+ +

タブの CSS を操作する

+ +

Another significant capability offered by the Tabs API is the ability to manipulate the CSS within a tab—add new CSS to a tab ({{WebExtAPIRef("tabs.insertCSS")}}) or remove CSS from a tab ({{WebExtAPIRef("tabs.removeCSS")}}).

+ +

This can be useful, 例えば、 if you want to highlight certain page elements or change the default layout of the page.

+ +

方法の実例

+ +

The apply-css example uses these features to add a red border to the web page in the active tab. Here is the feature in action:

+ +

{{EmbedYouTube("bcK-GT2Dyhs")}}

+ +

Let’s walk through how it’s set up.

+ +

manifest.json

+ +

To use the CSS features you need either:

+ + + +

The latter is the most useful, as it allows an extension to use {{WebExtAPIRef("tabs.insertCSS")}} and {{WebExtAPIRef("tabs.removeCSS")}} in the active tab when run from the extension’s browser or page action, context menu, or a shortcut.

+ +
{
+  "description": "Adds a page action to toggle applying CSS to pages.",
+
+ "manifest_version": 2,
+ "name": "apply-css",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
+
+ "background": {
+
+    "scripts": ["background.js"]
+ },
+
+ "page_action": {
+
+    "default_icon": "icons/off.svg",
+    "browser_style": true
+ },
+
+ "permissions": [
+    "activeTab",
+    "tabs"
+ ]
+
+}
+
+ +

You will note that "tabs" permission is requested in addition to "activeTab". This additional permission is needed to enable the extension’s script to access the tab’s URL, the importance of which we’ll see in a moment.

+ +

The other main features in the manifest.json file are the definition of:

+ + + +

background.js

+ +

On startup, background.js sets some constants to define the CSS to be applied, titles for the “page action”, and a list of protocols the extension will work in:

+ +
const CSS = "body { border: 20px solid red; }";
+const TITLE_APPLY = "Apply CSS";
+const TITLE_REMOVE = "Remove CSS";
+const APPLICABLE_PROTOCOLS = ["http:", "https:"];
+
+ +

When first loaded, the extension uses {{WebExtAPIRef("tabs.query")}} to get a list of all the tabs in the current browser window. It then loops through the tabs calling initializePageAction().

+ +
var gettingAllTabs = browser.tabs.query({});
+
+gettingAllTabs.then((tabs) => {
+ for (let tab of tabs) {
+   initializePageAction(tab);
+ }
+});
+
+ +

initializePageAction uses protocolIsApplicable() to determine whether the active tab’s URL is one the CSS can be applied to:

+ +
function protocolIsApplicable(url) {
+ var anchor =  document.createElement('a');
+ anchor.href = url;
+ return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
+}
+
+ +

Then, if the example can act on the tab, initializePageAction() sets the tab’s pageAction (navigation bar) icon and title to use the “off” versions before making the pageAction visible:

+ +
function initializePageAction(tab) {
+
+ if (protocolIsApplicable(tab.url)) {
+   browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+   browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+   browser.pageAction.show(tab.id);
+ }
+}
+
+ +

Next, a listener on pageAction.onClicked waits for the pageAction icon to be clicked, and calls toggleCSS when it is.

+ +
browser.pageAction.onClicked.addListener(toggleCSS);
+ +

toggleCSS() gets the title of the pageAction and then takes the action described:

+ + + +
function toggleCSS(tab) {
+
+
+ function gotTitle(title) {
+
+    if (title === TITLE_APPLY) {
+     browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
+     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
+     browser.tabs.insertCSS({code: CSS});
+    } else {
+     browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+     browser.tabs.removeCSS({code: CSS});
+    }
+ }
+
+ var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
+
+ gettingTitle.then(gotTitle);
+}
+
+ +

Finally, to ensure that the pageAction is valid after each update to the tab, a listener on {{WebExtAPIRef("tabs.onUpdated")}} calls initializePageAction() each time the tab is updated to check that the tab is still using a protocol to which the CSS can be applied.

+ +
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
+ initializePageAction(tab);
+});
+
+ +

その他の興味深い機能

+ +

There are a couple of other Tabs API features that don’t fit into one of the earlier sections:

+ + + +

関連項目

+ +

If you want to learn more about the Tabs API, check out:

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..c08554e9f6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,153 @@ +--- +title: 初めての拡張機能 +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +tags: + - Guide + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

この記事では、Firefox 用の拡張機能をどのように作ればよいのか、その初めから最後までを一通り説明します。この拡張機能は "mozilla.org" とそのサブドメインから読み込まれたページに赤い枠を付けるだけです。

+ +

このサンプルのソースコードは GitHub で公開しています（https://github.com/mdn/webextensions-examples/tree/master/borderify）。

+ +

これ以降は、バージョン 45 以降の Firefox が必要となります。

+ +

拡張機能を書く

+ +

新しいディレクトリーを作成し、そのディレクトリーに移動します。例えば、コマンドライン/ターミナルでは次のようにできます:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

それでは、"borderify" ディレクトリー配下に新しいファイル "manifest.json" を作成します。以下の内容を書き込んで保存してください。

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Adds a solid red border to all webpages matching mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

ここで最も興味深いキーは content_scripts です。このキーは、指定したパターンにマッチする URL のウェブページにスクリプトを読み込ませるよう Firefox に指示するものです。今回は、"borderify.js" というスクリプトを "mozilla.org" とそのサブドメインの HTTP / HTTPS ページすべてに読み込ませるように指定しています。

+ + + +
+

時折、あなたの拡張機能用に ID を指定する必要があります。アドオンの ID が必要なとき、manifest.json 内に applications キーを入れて gecko.id プロパティをセットします:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

拡張機能にはアイコンを用意すると良いでしょう。このアイコンは、アドオンマネージャーでアドオンのリスト横に表示されます。今回の manifest.json では "icons/border-48.png" を用意していると宣言しています。

+ +

まずは "borderify" ディレクトリーの下に "icons" ディレクトリーを作成します。次に、アイコンを "border-48.png" という名前で "icons" ディレクトリー内に保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは Google Material Design iconset から引用したものであり、Creative Commons Attribution-ShareAlike ライセンスの下で使用しています）。

+ +

ここでアイコンを自分で用意する場合は 48x48 ピクセルのサイズにする必要があります。高解像度のディスプレイには 96x96 ピクセルのアイコンを表示させたい場合は、manifest.json の icons オブジェクトに 96 というプロパティで設定してください。

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

他の方法として、SVG ファイルを指定すれば正しく拡大・縮小されて表示されます。(しかし、SVG にテキストが含んだアイコンを使っている場合、SVG エディターの "convert to path" ツールでテキストを展開し、適切なサイズ/位置に拡大/縮小したくなるかもしれません。)

+ + + +

borderify.js

+ +

最後に、"borderify" ディレクトリーの下に "borderify.js" というファイルを作成します。次の内容を書き込んで保存してください。

+ +
document.body.style.border = "5px solid red";
+ +

このスクリプトは、manifest.json の content_scripts キーで指定したパターンにマッチするページに読み込まれます。読み込まれたスクリプトは、そのページ自身のスクリプトと同じようにドキュメントへ直接アクセスします。

+ + + +

動かしてみよう

+ +

ここで、必要なファイルが正しい場所に保存されているか再確認してください。

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

インストール

+ +

Firefox の場合: about:debugging ページを開いて、"この Firefox" (Firefox の新しいバージョンで)をクリックし、"一時的なアドオンを読み込む" をクリックし、アドオンのディレクトリーにあるファイルをどれか 1 つ選択します。

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

ここでインストールされたアドオンは Firefox を再起動するまで有効です。

+ +

あるいは、web-ext ツールを使ってコマンドラインから拡張機能を実行することもできます。

+ +

テスト

+ +

それでは "mozilla.org" 配下のページを開いてみましょう。ページが赤い枠で囲まれていることを確認できるはずです。

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

ただ addons.mozilla.org では試さないで! このドメインでは現在、コンテンツスクリプトがブロックされています。

+
+ +

もう少し実験をします。コンテンツスクリプトを編集して、枠線の色を変更したり、ページのコンテンツに何か他の操作を加えてみましょう。コンテンツスクリプトを保存し、"about:debugging"の"再読み込み"ボタンをクリックして拡張機能ファイルを再読み込みすると、加えた変更がすぐに反映されているはずです。

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

パッケージ化と公開

+ +

自分が作ったアドオンを他の人にも使ってもらうには、アドオンをパッケージとしてまとめた後、署名するために Mozilla へ送信する必要があります。詳細は拡張機能の公開を参照してください。

+ +

次のステップ

+ +

これで Firefox 用 WebExtension の開発手順について概念を学ぶことが出来ました。それでは次のステップに進みましょう。

+ + diff --git "a/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" "b/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" new file mode 100644 index 0000000000..751de9fe15 --- /dev/null +++ "b/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" @@ -0,0 +1,17 @@ +--- +title: 前提条件 +slug: Mozilla/Add-ons/WebExtensions/前提条件 +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +

WebExtension API を使って開発するには、いくつかの小さいセットアップが必要です。

+ + -- cgit v1.2.3-54-g00ecf