Building the ZENKAKU HANKAKU Converter Chrome Extension: A Developer’s Journey

Access the ZENKAKU HANKAKU Converter Extension here

The Idea Behind the Extension

So, I was filling out a form to send my luggage to the airport before my flight, and I ran into a bit of a problem. The form asked for my name and address in Zenkaku and Hankaku formats, but no matter what I typed, it kept saying the text was invalid.

It took me a while to find a good website to help with converting the text, and that’s when it hit me: “Why not just build something myself to make this easier in the future?” And that’s how the idea for this extension came about.

ZENKAKU (全角) and HANKAKU (半角) are two different character width formats used in the Japanese writing system.

• ZENKAKU (full-width) characters take up more space, and both alphabetic characters and symbols are displayed in the full-width format. This is commonly used for Japanese kanji, hiragana, katakana, and even English letters or punctuation.
• On the other hand, HANKAKU (half-width) characters take up half the space and are typically used for numeric characters and symbols when a more compact layout is required.

Step-by-Step Development

Design Features

The extension has 3 simple features:

1. Automatically converts text to Zenkaku and Hankaku as users type.
2. A clean, intuitive interface with clear input and output sections.
3. Fully functional offline once installed.

Technology Stack

Moji.js is a client-side JavaScript library I use for converting between Zenkaku, Hankaku, and kana/kanji.

Since Chrome extensions run in the browser while Moji.js is a Node.js package, I must bundle it for browser compatibility. For this, I use Parcel

Implementation Process

I need to initialize the extension project with npm.

Open the terminal and navigate to the extension project directory. Run the following command to initialize a package.json file:

npm init -y

Install Moji.js via npm by running the following command in the terminal:

npm install moji

Install Parcel to bundle the extension with the following command:

npm install --save-dev parcel-bundler

Set up the project structure as shown below:

zenkaku-hankaku-extension/
├── dist/
├── src/
│   ├── icon16.png     # You can generate the 16x16 icon image yourself
│   ├── icon48.png.    # You can generate the 48x48 icon image yourself
│   ├── icon128.png.   # You can generate the 128x128 icon image yourself
│   ├── index.html
│   ├── popup.js
|   ├── styles.css
├── package.json
├── package-lock.json
├── node_modules/

Implement the index.html file, which will serve as the extension’s UI. The complete implementation is available here: index.html

Implement the style.css file to provide the extension with a clean, user-friendly design. The complete implementation is available here: style.css

Create the JavaScript logic in the popup.js file. This file handles the conversion of text to Zenkaku and Hankaku. The complete implementation is available here: popup.js

Now I need to bundle the JavaScript with Parcel. Add a script section to the package.json file:

"start": "npx parcel src/index.html"

Run the following command to bundle my code:

npm run start

This will bundle my files and create a dist/ directory of the bundled files inside.

Finally, I will need to set up the manifest.json file for the extension. Here’s how it might look:

{
    "manifest_version": 3,
    "name": "ZENKAKU HANKAKU Converter",
    "version": "1.0",
    "description": "Convert text to Zenkaku and Hankaku",
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "icon128.png"
    },
    "permissions": []
}

And I move the manifest.json file and icon images to the dist/ directory.

The extension is now complete and ready for local testing 😃

Test the Extension Locally

1. Open Chrome and go to chrome://extensions/.
2. Enable “Developer Mode” (toggle in the top right).
3. Click on “Load unpacked” and select the dist folder.
4. Test the extension thoroughly to ensure everything works as expected.

To publish my extension in the Chrome Web Store, I followed the official Google guide. It’s very thorough, so you can easily follow it if you’re interested.

I’ve walked you through the entire process, from turning an idea into action, all the way to having the extension live in the Chrome Web Store.

I hope you found something interesting!

The completed source code can be found in this GitHub repository: https://github.com/buingoctruong/zenkaku-hankaku-extension/tree/master