ブラウザ上で文字数カウントするChrome拡張機能(全角半角対応)

ブログを始めて約1ヶ月。Google Search Console にも有効なページとして認識され始めた。そこで自身のサイトをgoogle で検索してみると以下のように見えた。

これはひどい・・・タイトルが検索でどう見えるのか全く意識していなかった。一番上の投稿は、使わなくなったけど買ってよかったという内容なのに全くそれが伝わらない。

検索で見える文字数をカウントしてみると、私の環境ではPC で全角26文字、スマホで全角32文字だった。なお半角は0.5文字分となるようだ。

慣れれば検索で見える文字数を意識したタイトルをつけられるようになると思うが、それまでの対策として文字数をカウントすることにした。

文字数をカウントするchrome 拡張機能はいくつかあったが、全角半角の文字数をそれぞれ表示してくれるものは無かったので自分で作ることにした。

ブラウザ上で文字数カウントするChrome拡張機能(全角半角対応)

chrome ウェブストア

ブラウザの右クリックメニューに「文字数カウント」を追加する。以下のように選択したテキストの合計、全角、半角の文字数をそれぞれ表示する。また選択したテキストを全て全角、半角に換算したときの文字数を表示する。

ソースコード

chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create(
    {"id": "textcounter",
    "title": "文字数カウント",
    "contexts":["page", "selection", "link", "editable", "image", "video", "audio"]
    });
});

chrome.contextMenus.onClicked.addListener(onClickHandler);

function onClickHandler(item, tab) {
  var text = item.selectionText;
  var halfWidth = 0;
  var fullWidth = 0;
  for (let i = 0; i < text.length; i++) {
    (text[i].match(/[ -~]/)) ? halfWidth += 1 : fullWidth += 1;
  }

  alert(
    "文字数：" + text.length + "\n" +
    "全角文字数：" + fullWidth + "\n" +
    "半角文字数：" + halfWidth + "\n\n" +
    "全角換算文字数：" + (fullWidth + halfWidth/2) + "\n" +
    "半角換算文字数：" + (halfWidth + fullWidth*2)
  );
};

正規表現で1文字ずつチェックして全角半角を計上している。もう少しスマートな方法がある気もするが目的は達成したので良しとする。