-
Notifications
You must be signed in to change notification settings - Fork 188
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
105 changed files
with
535 additions
and
510 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
# Internationalization | ||
|
||
This guide is for using the vanilla, `browser.i18n` APIs. There are two other alternatives: | ||
|
||
1. [`@wxt-dev/i18n`](/guide/i18n/installation) - a wrapper around `browser.i18n` APIs with additional features, a simplified localization file format, and editor support | ||
2. Third party packages - You can use any i18n package on NPM, most of which are more feature rich than `browser.i18n` and `@wxt-dev/i18n` | ||
|
||
:::info | ||
Currently, using the `browser.i18n` APIs are the recommended approach. WXT has some built-in support for them and they work well enough. `@wxt-dev/i18n` was recently released, and it will become the recommended approach after some of the bugs have been worked out. Head over to [it's docs](/guide/i18n/introduction.md) to learn more. | ||
::: | ||
|
||
## Setup | ||
|
||
First familiarize yourself with [Chrome's docs](https://developer.chrome.com/docs/extensions/reference/api/i18n). The only difference when using these APIs with WXT is where you put the localization files - in the [`public` directory](/guide/directory-structure/public/). | ||
|
||
``` | ||
<srcDir>/ | ||
└─ public/ | ||
└─ _locales/ | ||
├─ en/ | ||
│ └─ messages.json | ||
├─ de/ | ||
│ └─ messages.json | ||
└─ ko/ | ||
└─ messages.json | ||
``` | ||
|
||
Next, to set a `default_locale` on your manifest, add it to your `wxt.config.ts` file: | ||
|
||
```ts | ||
// wxt.config.ts | ||
export default defineConfig({ | ||
manifest: { | ||
default_locale: 'en', | ||
name: '__MSG_extName__', | ||
description: '__MSG_extDescription__', | ||
}, | ||
}); | ||
``` | ||
|
||
> You can localize the `name` and `description` of your extension from the `manifest` config as well. | ||
Finally, to get a translation, call `browser.i18n.getMessage`: | ||
|
||
```ts | ||
browser.i18n.getMessage('extName'); | ||
browser.i18n.getMessage('extDescription'); | ||
browser.i18n.getMessage(/* etc */); | ||
``` | ||
|
||
## Examples | ||
|
||
See the official localization examples for more details: | ||
|
||
- [I18n](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vanilla-i18n#readme) | ||
- [Vue I18n](https://github.com/wxt-dev/wxt-examples/tree/main/examples/vue-i18n#readme) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# Messaging | ||
|
||
## Overview | ||
|
||
Follow [Chrome's message passing guide](https://developer.chrome.com/docs/extensions/mv3/messaging/) to understand how message passing works in web extensions. In Google's examples, just replace `chrome` with `browser`, and it will work in WXT. | ||
|
||
Here's a basic request/response example: | ||
|
||
```ts | ||
// popup/main.ts | ||
const res = await browser.runtime.sendMessage('ping'); | ||
|
||
console.log(res); // "pong" | ||
``` | ||
|
||
```ts | ||
// background.ts | ||
export default defineBackground(() => { | ||
browser.runtime.onMessage.addListener((message, sender, sendResponse) => { | ||
console.log(message); // "ping" | ||
|
||
// Wait 1 second and respond with "pong" | ||
setTimeout(() => sendResponse('pong'), 1000); | ||
return true; | ||
}); | ||
}); | ||
``` | ||
|
||
## Third Party Libraries | ||
|
||
There are a number of message passing libraries you can use to improve the message passing experience. | ||
|
||
- [`@webext-core/messaging`](https://webext-core.aklinker1.io/guide/messaging/) - "A light-weight, type-safe wrapper around the `browser.runtime` messaging APIs" | ||
- [`@webext-core/proxy-service`](https://webext-core.aklinker1.io/guide/proxy-service/) - "Create RPC-like services that can be called from anywhere but run in the background" | ||
- [`webext-bridge`](https://github.com/zikaari/webext-bridge) - "Messaging in Web Extensions made super easy. Out of the box." | ||
- [`trpc-chrome`](https://www.npmjs.com/package/trpc-chrome) - "tRPC adapter for Web Extensions 🧩" |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
# `browser.scripting` | ||
|
||
[Chrome Docs](https://developer.chrome.com/docs/extensions/reference/api/scripting) • [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting) | ||
|
||
Refer to the browser docs above for basics on how the API works. | ||
|
||
## Execute Script Return Values | ||
|
||
When using `browser.scripting.executeScript`, you can execute content scripts or unlisted scripts. To return a value, just return a value from the script's main function. | ||
|
||
```ts | ||
// entrypoints/background.ts | ||
const res = await browser.scripting.executeScript({ | ||
target: { tabId }, | ||
files: ['injected.js'], | ||
}); | ||
console.log(res); // "Hello John!" | ||
``` | ||
|
||
```ts | ||
// entrypoints/injected.js | ||
export default defineContentScript(() => { | ||
console.log('Script was injected!'); | ||
return 'Hello John!'; | ||
}); | ||
``` |
Oops, something went wrong.