From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../mozilla/add-ons/webextensions/api/index.html | 61 +++++ .../add-ons/webextensions/api/privacy/index.html | 72 +++++ files/pl/mozilla/add-ons/webextensions/index.html | 125 +++++++++ .../manifest.json/description/index.html | 40 +++ .../add-ons/webextensions/manifest.json/index.html | 105 ++++++++ .../manifest.json/manifest_version/index.html | 41 +++ .../webextensions/manifest.json/name/index.html | 40 +++ .../webextensions/manifest.json/version/index.html | 45 ++++ .../pierwsze_kroki_z_web-ext/index.html | 296 +++++++++++++++++++++ .../tw\303\263j_pierwszy_webextension/index.html" | 152 +++++++++++ 10 files changed, 977 insertions(+) create mode 100644 files/pl/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/pl/mozilla/add-ons/webextensions/api/privacy/index.html create mode 100644 files/pl/mozilla/add-ons/webextensions/index.html create mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/description/index.html create mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/index.html create mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html create mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/name/index.html create mode 100644 files/pl/mozilla/add-ons/webextensions/manifest.json/version/index.html create mode 100644 files/pl/mozilla/add-ons/webextensions/pierwsze_kroki_z_web-ext/index.html create mode 100644 "files/pl/mozilla/add-ons/webextensions/tw\303\263j_pierwszy_webextension/index.html" (limited to 'files/pl/mozilla/add-ons/webextensions') diff --git a/files/pl/mozilla/add-ons/webextensions/api/index.html b/files/pl/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..724bf34516 --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,61 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +
{{AddonSidebar}}
+ +
+

JavaScript APIs for WebExtensions can be used inside the extension's background scripts and in any other documents bundled with the extension, including browser action or page action popups, sidebars, options pages, or new tab pages. A few of these APIs can also be accessed by an extension's content scripts (see the list in the content script guide).

+ +

To use the more powerful APIs you need to request permission in your extension's manifest.json.

+ +

You can access the APIs using the browser namespace:

+ +
function logTabs(tabs) {
+  console.log(tabs)
+}
+
+browser.tabs.query({currentWindow: true}, logTabs)
+
+ +
+

Many of the APIs are asynchronous, returning a {{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)
+
+ +
+

Note that this is different from Google Chrome's extension system, which uses the chrome namespace instead of browser, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports chrome and callbacks as well as browser and promises. Mozilla has also written a polyfill which enables code that uses browser and promises to work unchanged in Chrome: https://github.com/mozilla/webextension-polyfill.

+ +

Firefox also implements these APIs under the chrome namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.

+ +

Microsoft Edge uses the browser namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.

+ +

Not all browsers support all the APIs: for the details, see Browser support for JavaScript APIs.

+ +

Tip: Throughout the JavaScript API listings you will find short code examples that illustrate how the API is used. You can exercise these examples, without needing to create a web extension, using the console in the Toolbox. For example, here is the first code example on this page running in the Toolbox console in Firefox Developer Edition:

+ +

Illustration of a snippet of web extension code run from the console in the Toolbox

+ +

JavaScript API listing

+ +

See below for a complete list of JavaScript APIs:

+
+ +
{{LandingPageListSubpages}}
diff --git a/files/pl/mozilla/add-ons/webextensions/api/privacy/index.html b/files/pl/mozilla/add-ons/webextensions/api/privacy/index.html new file mode 100644 index 0000000000..321f0f8834 --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/api/privacy/index.html @@ -0,0 +1,72 @@ +--- +title: privacy +slug: Mozilla/Add-ons/WebExtensions/API/privacy +tags: + - API + - Add-ons + - Extensions + - NeedsTranslation + - Privacy + - Reference + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/privacy +--- +
{{AddonSidebar}}
+ +

Access and modify various privacy-related browser settings.

+ +

To use the privacy API, you must have the "privacy" API permission.

+ +

Properties

+ +
+
{{WebExtAPIRef("privacy.network")}}
+
Access and modify privacy settings relating to the network.
+
{{WebExtAPIRef("privacy.services")}}
+
Access and modify privacy settings relating to the services provided by the browser or third parties.
+
{{WebExtAPIRef("privacy.websites")}}
+
Access and modify privacy settings relating to the behavior of websites.
+
+ +

Browser compatibility

+ +

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

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

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

+
+ + diff --git a/files/pl/mozilla/add-ons/webextensions/index.html b/files/pl/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..1682fefbed --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,125 @@ +--- +title: Browser extensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - Landing + - Manifest + - Rozszerzenia + - WebExtensions + - Wtyczki +translation_of: Mozilla/Add-ons/WebExtensions +--- +
{{AddonSidebar}}
+ +
Rozszerzenia mogą być poszerzane i modyfikowane możliwościami przeglądarki.  Rozszerzenia dla Firefox są budowane przy użyciu WebExtension APIs, systemu wspólnego dla przeglądarek do rozwoju rozszerzeń. Duży zakres systemu jest zgodny z extension API wspieranych przez Google Chrome, Opera oraz the W3C Draft Community Group.
+ +
 
+ +
Rozszerzenia napisane dla tych przeglądarek będą w większości przypadków działać w Firefox czy Microsoft Edge z kilkoma zmianami (just a few changes). API jest także w pełni zgodny z wieloprocesowością Firefox (multiprocess Firefox).
+ +

 

+ +

Jeśli masz pomysły czy pytania lub potrzebujesz pomocy w zamieszczeniu dodatku do użycia przez WebExtension APIs, możesz dotrzeć do nas poprzez dev-addons mailing list lub zamieszczenie hasztagu: #extdev na IRC.

+ +
+
+

Na początek

+ + + +

Jak 

+ + + +

Interface użytkownika

+ + + +

Pojęcia

+ + + +

Porty

+ + + +

Dynamika pracy Firefox

+ + +
+ +
+

Odsyłacz

+ +

JavaScript API

+ + + +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}
+ +

Klucze Manifest 

+ + + +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
+
+
diff --git a/files/pl/mozilla/add-ons/webextensions/manifest.json/description/index.html b/files/pl/mozilla/add-ons/webextensions/manifest.json/description/index.html new file mode 100644 index 0000000000..fdeb8fa3f9 --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/manifest.json/description/index.html @@ -0,0 +1,40 @@ +--- +title: description +slug: Mozilla/Add-ons/WebExtensions/manifest.json/description +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/description +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypString (ciąg znaków)
ObowiązkoweNie
Przykład + 
+"description": "Zastępuje rysunki zdjęciami kotów."
+
+ +

Krótki opis rozszerzenia, który jest przeznaczony do wyświetlenia w interfejsie przeglądarki użytkownika.

+ +

Jest to właściwość umiejscowiona.

+ +

Przykład

+ +
"description": "Zastępuje obrazki zdjęciami kotów."
+ +

Zgodność z przeglądarkami

+ + + +

{{Compat("webextensions.manifest.description")}}

diff --git a/files/pl/mozilla/add-ons/webextensions/manifest.json/index.html b/files/pl/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..3421ac49a3 --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,105 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +
{{AddonSidebar}}
+ +

The manifest.json file is a JSON-formatted file, and is the only file that every extension using WebExtension APIs must contain.

+ +

Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality, such as background scripts, content scripts, and browser actions.

+ +

manifest.json keys are listed below:

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
+ +
 
+ +

"manifest_version", "version", and "name" are the only mandatory keys. "default_locale" must be present if the "_locales" directory is present and must be absent otherwise. "applications" is not supported in Google Chrome, and is mandatory in Firefox before Firefox 48 and Firefox for Android.

+ +

Browser compatibility

+ +

{{Compat("webextensions.manifest")}}

+ +

Example

+ +

Quick syntax example for manifest.json:

+ +
{
+  "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"]
+}
+ +

 

diff --git a/files/pl/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html b/files/pl/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html new file mode 100644 index 0000000000..f220ce01c9 --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/manifest.json/manifest_version/index.html @@ -0,0 +1,41 @@ +--- +title: manifest_version +slug: Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version +--- +

{{AddonSidebar}}

+ + + + + + + + + + + + + + + + +
TypNumber (numer)
ObowiązkowyTak
Przykład + 
+"manifest_version": 2
+
+ +

Ten klucz określa wersję pliku manifest.json użytego w rozszerzeniu.

+ +

Obecnie zawsze musi to być 2.

+ +

Przykład

+ +
"manifest_version": 2
+
+ +

Zgodność z przeglądarkami

+ + + +

{{Compat("webextensions.manifest.manifest_version")}}

diff --git a/files/pl/mozilla/add-ons/webextensions/manifest.json/name/index.html b/files/pl/mozilla/add-ons/webextensions/manifest.json/name/index.html new file mode 100644 index 0000000000..1e4ade2df8 --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/manifest.json/name/index.html @@ -0,0 +1,40 @@ +--- +title: name +slug: Mozilla/Add-ons/WebExtensions/manifest.json/name +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/name +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypString (Ciąg znaków)
ObowiązkowyTak
Przykład + 
+"name": "Moje rozszerzenie"
+
+ +

Nazwa rozszerzenia. Jest używana do zidentyfikowania rozszerzenia w przeglądarce użytkownika i na takich serwisach jak np. addons.mozilla.org.

+ +

Jest to "właściwość zlokalizowana".

+ +

Przykład

+ +
"name": "Moje rozszerzenie"
+ +

Zgodność z przeglądarkami

+ + + +

{{Compat("webextensions.manifest.name")}}

diff --git a/files/pl/mozilla/add-ons/webextensions/manifest.json/version/index.html b/files/pl/mozilla/add-ons/webextensions/manifest.json/version/index.html new file mode 100644 index 0000000000..327d877861 --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/manifest.json/version/index.html @@ -0,0 +1,45 @@ +--- +title: version +slug: Mozilla/Add-ons/WebExtensions/manifest.json/version +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/version +--- +

{{AddonSidebar}}

+ + + + + + + + + + + + + + + + +
TypString (ciąg znaków)
ObowiązkoweTak
Przykład + 
+"version": "0.1"
+
+ +

Wersja rozszerzenia, sformatowana jako liczby i znaki ASCII oddzielone kropkami. Szczegółowe informacje na temat formatu wersji znajdują się na stronie Format Wersji.

+ +

Pamiętaj, że składnia zdefiniowana dla version w Chromie jest bardziej restrykcyjna niż ta używana w  przeglądarce Firefox:

+ + + +

Przykład

+ +
"version": "0.1"
+ +

Zgodność z przeglądarkami

+ + + +

{{Compat("webextensions.manifest.version")}}

diff --git a/files/pl/mozilla/add-ons/webextensions/pierwsze_kroki_z_web-ext/index.html b/files/pl/mozilla/add-ons/webextensions/pierwsze_kroki_z_web-ext/index.html new file mode 100644 index 0000000000..d88ccda07e --- /dev/null +++ b/files/pl/mozilla/add-ons/webextensions/pierwsze_kroki_z_web-ext/index.html @@ -0,0 +1,296 @@ +--- +title: Pierwsze kroki z web-ext +slug: Mozilla/Add-ons/WebExtensions/Pierwsze_kroki_z_web-ext +translation_of: Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext +--- +
{{AddonSidebar}}
+ +

web-ext is a command line tool designed to speed up various parts of the extension development process, making development faster and easier. This article explains how to install and use web-ext.

+ +

Instalacja

+ +

web-ext is a node-based application that you install with the nodejs/npm tool. Install web-ext using the following command:

+ +
npm install --global web-ext
+ +

web-ext requires the current LTS (long-term support) version of NodeJS.

+ +

To test whether the installation worked run the following command, which displays the web-ext version number:

+ +
web-ext --version
+ +

Użycie web-ext

+ +

Before you start using web-ext, locate an example extension to use—if you don't have one, use one from the webextensions-examples repo.

+ +

Testing out an extension

+ +

Test an extension in Firefox by cd'ing into your extension's root directory and entering:

+ +
web-ext run
+ +

This starts Firefox and loads the extension temporarily in the browser, just as you can on the about:debugging page.

+ +

See the run reference guide to learn more.

+ +

Automatic extension reloading

+ +

The run command watches your source files and tells Firefox to reload the extension after you edit and save a file. For example, if you changed the name property in your manifest.json file, Firefox displays the new name. This makes it easy to try out new features because you can see the effect immediately. The automatic reloading feature is active by default, you use it like this:

+ +
web-ext run
+ +

You can also press the r key in the web-ext terminal to trigger an extension reload.

+ +

If you experience unexpected behavior with the reloading feature, please file a bug. You can also disable reloading like this:

+ +
web-ext run --no-reload
+ +
+

Extension reloading is only supported in Firefox 49 or higher.

+
+ +

Testing in different versions of Firefox

+ +

To run your extension in a version of Firefox Desktop other than the default, use the --firefox option to specify a full path to the binary file. Here is an example for Mac OS:

+ +
web-ext run --firefox=/Applications/FirefoxNightly.app/Contents/MacOS/firefox-bin
+ +

On Windows, the path needs to include firefox.exe, for example:

+ +
web-ext run --firefox="C:\Program Files\Mozilla Firefox\firefox.exe"
+ +

See the run command reference to learn more.

+ +

Testing in Firefox 48

+ +

Firefox 48 was the first stable version to use the WebExtension platform, but it doesn't allow web-ext to install an extension remotely. You need to run your extension in Firefox 48 using:

+ +
web-ext run --pre-install
+ +

Testing in Firefox for Android

+ +

To run your extension in Firefox for Android, follow these instructions to set up your computer and device.

+ +

With your device connected to your development computer, run:

+ +
web-ext run --target=firefox-android
+ +

This command displays the device ID for your connected Android device or devices. If you don't see a list of device IDs, make sure you set up the device for development correctly.

+ +

Now, add the device ID to the command:

+ +
web-ext run --target=firefox-android --android-device=<device ID>
+ +

If you've multiple versions of Firefox installed, you may need to choose a specific version. For example:

+ +
web-ext run --target=firefox-android ... --firefox-apk=org.mozilla.firefox
+ +

The first time you run this command, you may need to grant Android permissions for the APK. This is because the command needs read / write access to the device storage, so that Firefox for Android can run on a temporary profile. The web-ext output guides you in how to grant these permissions.

+ +

The web-ext command does not alter any of your existing Firefox for Android preferences or data. To see more information about how web-ext is interacting with your device, run the command with --verbose.

+ +

See the run command reference to learn more.

+ +

Debugging in Firefox for Android

+ +

When using web-ext run to test an extension on Firefox for Android, you'll notice a message like this in the console output:

+ +
You can connect to this Android device on TCP port 51499
+
+ +

This is a remote debugger port that you can connect to with Firefox's developer tools. In this case, you'd connect to host localhost on port 51499.

+ +

See this guide for more information about debugging an extension on Firefox for Android.

+ +

Testing unsigned extensions

+ +

When you execute web-ext run, the extension gets installed temporarily until you close Firefox. This does not violate any signing restrictions. If instead you create a zip file with web-ext build and try to install it into Firefox, you will see an error telling you that the add-on is not signed. You will need to use an unbranded build or use a development build to install unsigned extensions.

+ +

Using a custom profile

+ +

By default, the run command will create a temporary Firefox profile. To run your extension with a specific profile use the --firefox-profile option, like this:

+ +
web-ext run --firefox-profile=your-custom-profile
+ +

This option accepts a string containing the name of your profile or an absolute path to the profile directory. This is helpful if you want to manually configure some settings that will always be available to the run command.

+ +

Keeping profile changes

+ +

The run command does not save any changes made to the custom profile specified by --firefox-profile. To keep changes, add this option:

+ +
web-ext run --keep-profile-changes --firefox-profile=your-custom-profile
+ +

This may be helpful if your extension has many different run states.

+ +
+

This option makes the profile specified by --firefox-profile completely insecure for daily use. It turns off auto-updates and allows silent remote connections, among other things. Specifically, it will make destructive changes to the profile that are required for web-ext to operate.

+
+ +

Packaging your extension

+ +

Once you've tested your extension and verified that it's working, you can turn it into a package for submitting to addons.mozilla.org using the following command:

+ +
web-ext build
+ +

This outputs a full path to the generated .zip file that can be loaded into a browser.

+ +
+

The generated .zip file doesn't work on Firefox without signing or adding applications.gecko.id key into manifest.json.  For more information, please refer WebExtensions and the Add-on ID page.

+
+ +

web-ext build is designed to ignore files that are commonly not wanted in packages, such as .git, node_modules, and other artifacts.

+ +

See the build reference guide to learn more.

+ +

Signing your extension for distribution

+ +

As an alternative to publishing your extension on addons.mozilla.org, you can self-host your package file but it needs to be signed by Mozilla first. The following command packages and signs a ZIP file, then returns it as a signed XPI file for distribution:

+ +
web-ext sign --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET
+ +

The API options are required to specify your addons.mozilla.org credentials.

+ + + +

See the sign reference guide to learn more.

+ +

Signing extensions without an explicit ID

+ +

web-ext supports signing extensions that do not declare the applications.gecko.id property in their manifest. The first time you sign an extension without an explicit ID, addons.mozilla.org will generate an ID and web-ext will save it to .web-extension-id in the working directory. You should save the ID file so that you can sign future versions of the same extension. If you lose the ID file, you will have to add back the applications.gecko.id property or use the --id option when signing, for example:

+ +
web-ext sign --api-key=... --api-secret=... --id="{c23c69a7-f889-447c-9d6b-7694be8035bc}"
+ +

Signing in a restricted environment

+ +

If you're working in an environment that restricts access to certain domains, you can try using a proxy when signing:

+ +
web-ext sign --api-key=... --api-secret=... --api-proxy=https://yourproxy:6000
+ +

See the --api-proxy option to learn more.

+ +

The following domains are used for signing and downloading files:

+ + + +

Checking for code "lint"

+ +

Before trying out your extension with the run command or submitting your package to addons.mozilla.org, use the lint command to make sure your manifest and other source files do not contain any errors. Example:

+ +
web-ext lint
+ +

This uses the addons-linter library to walk through your source code directory and report any errors, such as the declaration of an unknown permission.

+ +

See the lint reference guide to learn more.

+ +

Setting option defaults in a configuration file

+ +

You can specify --config=my-config.js to set default values for any option. Here is an example with the build command:

+ +
web-ext --config=my-config.js build
+ +

The file should be a CommonJS module as understood by NodeJS and must export each configuration value. Here is how you would set the default value of --verbose to true:

+ +
module.exports = {
+  verbose: true,
+};
+ +

If you want to specify options that only apply to a specific command, you nest the configuration under the command name. Here is an example of adding configuration for --overwrite-dest that only applies to the build command as well as --firefox that only applies to the run command:

+ +
module.exports = {
+  // Global options:
+  verbose: true,
+  // Command options:
+  build: {
+    overwriteDest: true,
+  },
+  run: {
+    firefox: 'nightly',
+  },
+};
+ +

To create a configuration key for a command line option, you remove the preceding dashes and convert the name to camel case. As you can see from this example, --overwrite-dest was converted to overwriteDest.

+ +

If an option can be specified multiple times on the command line then you define it as an array. For example, here is how to specify multiple --ignore-files patterns:

+ +
module.exports = {
+  ignoreFiles: [
+    'package-lock.json',
+    'yarn.lock',
+  ],
+};
+ +

Automatic discovery of configuration files

+ +

web-ext will load existing configuration files in the following order:

+ + + +

If a home directory config and a local directory config define the same option, the value from the latter file will be used.

+ +

To disable automatic loading of configuration files, set this option:

+ +
web-ext --no-config-discovery run
+ +

To diagnose an issue related to config files, re-run your command with --verbose. This will tell you which config file affected which option value.

+ +

Specifying different source and destination directories

+ +

The preceding commands use default directories for the extension source and artifact creation (for example, built .zip files). The defaults are:

+ + + +

You can specify different source and destination directories using the --source-dir and --artifacts-dir options when running your commands. Their values can be relative or absolute paths, but must always be specified as strings. Here is an example of specifying both options when building an extension:

+ +
web-ext build --source-dir=webextension-examples/notify-link-clicks-i18n --artifacts-dir=zips
+ +

Outputting verbose messages

+ +

To see in detail what web-ext is doing when you run a command, include the --verbose option. For example:

+ +
web-ext build --verbose
+ +

Viewing all commands and options

+ +

You can list all commands and options like this:

+ +
web-ext --help
+ +

You can list options for a specific command by adding it as an argument:

+ +
web-ext --help run
+ +

Detecting temporary installation

+ +

Your extension can detect whether it was installed using web-ext run, rather than as a built and signed extension downloaded from addons.mozilla.org. Listen for the {{WebExtAPIRef("runtime.onInstalled")}} event and check the value of details.temporary.

+ +

Using web-ext from a script

+ +

You can use web-ext as a NodeJS module. Here is more information, with example code.

+ +

See also

+ + diff --git "a/files/pl/mozilla/add-ons/webextensions/tw\303\263j_pierwszy_webextension/index.html" "b/files/pl/mozilla/add-ons/webextensions/tw\303\263j_pierwszy_webextension/index.html" new file mode 100644 index 0000000000..f5f1f8e3fc --- /dev/null +++ "b/files/pl/mozilla/add-ons/webextensions/tw\303\263j_pierwszy_webextension/index.html" @@ -0,0 +1,152 @@ +--- +title: Twoje pierwsze rozszerzenie +slug: Mozilla/Add-ons/WebExtensions/Twój_pierwszy_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

W tym artykule przejdziemy przez tworzenie rozszerzenia dla przeglądarki Firefox od początku do końca. Rozszerzenie to tylko dodaje czerwoną ramkę do stron załadowanych z "mozilla.org" lub dowolnej z jej poddomen.

+ +

Kod źródłowy dla tego przykładu znajduje się na GitHub'ie: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Najpierw, będziesz potrzebować przeglądarki Firefox w wersji 45 lub nowszej.

+ +

Pisanie rozszerzenia

+ +

Stwórz nowy folder i przejdź do niego:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Teraz stwórz nowy plik o nazwie "manifest.json" bezpośrednio w katalogu "borderify". Wprowadź do niego poniższy kod:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Dodaje czerwoną ramkę we wszystkich stronach powiązanych z domeną mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

Najbardziej interesującym kluczem jest tutaj content_scripts, który mówi przeglądarce, który skrypt wczytać do stron internetowych, których adres spełnia określony wzór. W tym przypadku prosimy przeglądarkę o wczytanie skryptu o nazwie "borderify.js" na wszystkich stronach HTTP i HTTPS obsługiwanych przez domenę "mozilla.org" bądź jakąkolwiek jej poddomenę.

+ + + +
+

W niektórych sytuacjach musisz nadać ID swojemu rozszerzeniu. Jeśli potrzebujesz nadać rozszerzeniu ID, dołącz klucz applications do manifest.json i przypisz mu pole id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@przyklad.pl"
+  }
+}
+
+ +

icons/border-48.png

+ +

Rozszerzenie powinno mieć ikonę. Będzie ona wyświetlona na liście dodatków w menadżerze rozszerzeń. Nasz manifest.json zapowiada, że będziemy mieć ikonę w "icons/border-48.png".

+ +

Stwórz folder "icons" bezpośrednio w katalogu "borderify". Zapisz tam ikonę o nazwie "border-48.png". Możesz użyć tej naszej przykładowej, która pochodzi ze zbioru ikon Google Material Design i jest używana zgodnie z warunkami licencji Creative Commons Attribution-ShareAlike.

+ +

Jeśli zdecydujesz się dodać własną ikonę, to powinna być w formacie 48x48 pikseli. Możesz także dodać ikonę o rozmiarze 96x96 pikseli dla ekranów o wysokiej rozdzielczości i jeśli dodasz ją, to powinna ona zostać przypisana jako wartość pola 96 obiektu icons 
+ w pliku manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

Ewentualnie możesz dodać plik SVG tutaj, więc zostanie on poprawnie przeskalowany. (Jeśli jednak używasz SVG, a twoja ikona zawiera napisy, możesz chcieć użyć narzędzia "przekonwertuj do ścieżki" w edytorze SVG, by spłaszczyć tekst, więc będzie skalowo dopasowany do położenia/rozmiaru).

+ + + +

borderify.js

+ +

Ostatecznie stwórz plik o nazwie "borderify.js" bezpośrednio w katalogu "borderify". Wpisz do niego poniższy kod:

+ +
document.body.style.border = "5px solid red";
+ +

Ten skrypt będzie załadowany na stronach spełniających wzór określony w kluczu content_scripts w pliku manifest.json. Skrypt ma bezpośredni dostęp do dokumentu, podobnie jak skrypty wczytane przez stronę.

+ + + +

Wypróbujmy

+ +

Najpierw dokładnie sprawdź, czy odpowiedne pliki są w właściwych miejsacach:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Instalacja

+ +

Otwórz "about:debugging" w przeglądarce Firefox, kliknij "Załaduj tymczasową wtyczkę" i wybierz jakikolwiek plik z katalogu z Twoim rozszerzeniem:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

Rozszerzenie zostanie teraz zainstalowane i pozostanie tam do momentu ponownego uruchomienia Firefoksa.

+ +

Alternatywnie, możesz także uruchomić swoje rozszerzenie za pomocą wiersza poleceń używając narzędzie web-ext.

+ +

Testowanie

+ +

Teraz spróbuj odwiedzić jakąś stronę należącą do "mozilla.org" i powinienieś zobaczyć czerwoną ramkę wokół strony:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Jednakże nie próbuj tego na addons.mozilla.org! Obecnie skrypty są blokowane na tej domenie.

+
+ +

Spróbuj trochę poeksperymentować. Edytuj zawartość skryptu by zmienić kolor ramki lub zrób coś innego z zawartością strony. Zapisz skrypt i przeładuj pliki rozszerzenia kilkając przycisk "Przeładuj" w about:debugging. Możesz zobaczyć zmiany odrazu:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Pakowanie i publikowanie

+ +

Aby inni użytkownicy mogli korzystać z Twojego rozszerzenia, musisz je zapakować i wysłać do Mozilli w celu podpisania go. 
+ Aby dowiedzieć się więcej, zajrzyj do artykułu "Publikowanie własnego rozszerzenia".

+ +

Co dalej?

+ +

Teraz gdy ty masz pomysł na temat procesu tworzenia rozszerzeń (WebExtension) dla Firefoxa, to spróbuj:

+ + -- cgit v1.2.3-54-g00ecf