Internationalization (i18n)

Plasmo has built-in support for internationalization (i18n). If you've ever done i18n in any other Chrome extension, these concepts should feel familiar to you.

Plasmo expects your i18n strings in assets/_locales/{lang}/messages.json.

English Example

Add the following to assets/_locales/en/messages.json:

  "extensionName": {
    "message": "with-18n",
    "description": "Name of the extension."
  "extensionDescription": {
    "message": "Example using i18n!",
    "description": "Description of the extension."
  "popup": {
    "message": "This is showing the power of i18n!",
    "description": "Popup message."

Specify the default_locale in your manifest like so:

"manifest": {
    "host_permissions": [
    "default_locale": "en"

Now you should be able to use all the i18n features Chrome provides.

For example, we can fetch i18n strings like so:

import { useState } from "react"

function IndexPopup() {
  const [data, setData] = useState("")

  return (
        display: "flex",
        flexDirection: "column",
        padding: 16
        Welcome to your <a href="">Plasmo</a> Extension!
      <input onChange={(e) => setData(} value={data} />

export default IndexPopup

In the package.json, fetching i18n strings would look something like this:

  "name": "__MSG_extensionName__",
  "displayName": "__MSG_extensionName__",
  "version": "0.0.0",
  "description": "__MSG_extensionDescription__",
  "author": "coldsauce",
  "scripts": {
    "dev": "plasmo dev",
    "build": "plasmo build"

Please refer to the Chrome i18n documentation for more information.

If you'd like to see an example showcasing i18n, check out with-i18n in the Plasmo examples repository.