Skip to content

Commit

Permalink
Create all files
Browse files Browse the repository at this point in the history
  • Loading branch information
aklinker1 committed Aug 20, 2024
1 parent bea4892 commit 3cb2f5f
Show file tree
Hide file tree
Showing 105 changed files with 535 additions and 510 deletions.
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.
56 changes: 56 additions & 0 deletions docs/.old/guide/extension-apis/i18n.md
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)
36 changes: 36 additions & 0 deletions docs/.old/guide/extension-apis/messaging.md
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.
26 changes: 26 additions & 0 deletions docs/.old/guide/extension-apis/scripting.md
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) &bull; [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!';
});
```
Loading

0 comments on commit 3cb2f5f

Please sign in to comment.