Japan Post Tracking

Posted on 22 September 2019 in dev

I wanted to be able in one click to check status of parcels on Japan Post. I scratched my own itch by developing a Chrome extension.

Tracking in one click

Receiving time to time parcels via Japan Post, I found frustrating to copy-paste the tracking number and then go to the Japan Post website, navigate the site and after a dozen of clicks, finally get the information I wanted.

Developing a Chrome extension

Creating a basic Chrome extension is well documented all over the web. You basically need two files: manifest.json and a js script doing the work.

The files

The manifest.json is here to tell the browser the extension name, version, description and its manifest version. You can add permissions, icons, what script to call and probably several other things.

Here is mine.

{
    "name": "JapanPost Parcel Tracking",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Track your packages with JapanPost. Highlight the tracking number and
                    select the Track menu to be redirected to the Japan Post website.",
    "permissions": [
      "contextMenus"
     ],
    "background": {
      "scripts": ["script.js"]
    },
    "icons": { "16": "icons/favicon-16x16.png",
               "32": "icons/favicon-32x32.png",
               "48": "icons/favicon-48x48.png" },
    "browser_action": {
      "default_icon": "icons/favicon-32x32.png",
      "icons": { "16": "icons/favicon-16x16.png",
                 "32": "icons/favicon-32x32.png",
                 "48": "icons/favicon-48x48.png"
               }
               }

}

The meaty part

The important part is the script which will do what you want. In my case, I needed that whatever text I've selected to be sent over to the Japan Post website.

To do so, I use the chrome.contextMenus.create API which calls a js function get_tracking_number to get the selected tracking number and create a new tab for the Japan Post tracking website with everything already loaded.

function get_tracking_number(tracking) {
  console.log("The selection is " + tracking.selectionText + ".");
  chrome.tabs.create({
    url: "https://trackings.post.japanpost.jp/services/srv/search/direct?reqCodeNo1="+
    tracking.selectionText+"&searchKind=S002&locale=en"
  });
}
chrome.contextMenus.create({
  title: "JP Parcel Track: %s",
  contexts:["selection"],
  onclick: get_tracking_number
});

How to use

Since I didn't pack the extension for a release on the Chrome store, we need to enable the Chrome developer mode and choose the Load unpacked option.

Voila!

Conclusion

The extension does the job. In the future, I could add a way to change the locale for people who want the Japanese version of the tracking results.

That was a nice intro into developing extensions for a browser. Looking at the developer website for chrome, there are a ton of sample apps which could serve as a base for other extensions.

References

chrome js