chrome-extension
拡張機能
esa.io

esa のメインカラムの横幅をウインドウいっぱいに広げる Google Chrome 拡張を作りました


概要

esa のメインカラムの横幅は 800px に固定されています。ときどき、ネストが深いリストや 1 行が長いコードブロックを含んだ記事の場合、横幅を広げられたら見やすくなりそうだったので Google Chrome 拡張を作りました。


機能


  • 拡張機能を有効にするとメインカラムの横幅を 100% に変更します。

  • 右カラムは非表示になります。

  • 右上の拡張機能のアイコンからこの機能の ON/OFF が行えます。(インストール直後は OFF になっているので、Enabled ボタンをクリックしてください)


適用されたイメージ

wide-column-model-for-esa.png


Chrome Web Store

https://chrome.google.com/webstore/detail/wide-column-mode-for-esa/bjbeipanlhaibjhnjbipfgpoafljiili?hl=ja


ソースコード

https://github.com/suzuki86/wide-column-mode-for-esa


今回得られた Google Chrome 拡張機能に関する知見


  • 設定値を保存するのに chrome.storage.local.set() メソッド、設定値を取り出すのに chrome.storage.local.get() メソッドが便利でした。

  • 拡張機能のアイコンをクリックしたときに表示される HTML (および Javascript ) から、Content Script で定義されているメソッドを呼び出すには、 chrome.tabs.sendMessage() メソッドと chrome.extension.onMessage.addListener() メソッドを使って通信する必要がありました。