1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Organization

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

概要

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

機能

  • 拡張機能を有効にするとメインカラムの横幅を 100% に変更します。
  • 右カラムは非表示になります。
  • 右上の拡張機能のアイコンからこの機能の ON/OFF が行えます。(インストール直後は OFF になっているので、Enabled ボタンをクリックしてください)

適用されたイメージ

wide-column-model-for-esa.png

Chrome Web Store

ソースコード

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

  • 設定値を保存するのに chrome.storage.local.set() メソッド、設定値を取り出すのに chrome.storage.local.get() メソッドが便利でした。
  • 拡張機能のアイコンをクリックしたときに表示される HTML (および Javascript ) から、Content Script で定義されているメソッドを呼び出すには、 chrome.tabs.sendMessage() メソッドと chrome.extension.onMessage.addListener() メソッドを使って通信する必要がありました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?