Chrome Extensionの実装方法 初心者向け

今回作成した拡張機能について

http://www.mnet.ne.jp/~nakama/https://srad.jp/などのコンテンツはとてもすばらしいが横幅の広い画面でみると疲れてしまう
そんなサイトで使うと読んでいても疲れない横幅に調整することができる拡張機能です。

 

どんな構成で作ったのか

下記のようなディレクトリ構成です

.
├── background.js
├── content_script.js
├── icon.png
├── manifest.json
├── popup.html
├── popup.js
└── styles.css

全コードは、こちら👇👇
https://github.com/yona-dev/optimal-width

Chrome Extensionのライフサイクルは下記のイメージ.

Chrome Extensionのライフサイクル

ここからは、各ファイルの説明になります

manifest.json

Chrome Extensionを作る上で必ず必要となるファイル
拡張機能がどのような構成かを書くファイルです

{
    "name": "Optimal Width",
    "manifest_version": 2,
    "version": "1.0",
    "description": "this extension is auto width size",
    "browser_action": {
        "default_title": "Optimal Width",
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "contextMenus",
        "tabs"
    ],
    "content_scripts": [
        {
            "js": ["content_script.js", "popup.js"],
            "matches": ["http://*/*", "https://*/*"]
        }
    ],
    "background": {
        "scripts": ["background.js"]
    }
}

  • browser_actionにdefault_popupを設定することで、アイコンをクリックした時にhtmlを読み込むことができる
  • content_scripts.jsにpopup.htmlで読み込むjsも指定しておかないとエラーとなる
  • permissionsにtabsを設定しないとchrome.tabs.sendMessage()を使うことができない

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./styles.css">
    <title>optimal-width</title>
</head>
<body>
    <main>
        <div class="container">
            <input type="range" name="rangeWidth" value="800" min="650" max="1400">
            <p class="current">800px</p>
        </div>
    </main>
<script src="popup.js"></script>
</body>
</html>

    • スタイルは、通常通りに読み込むことができる.特に意識する必要はなさそう
    • <script src="popup.js"></script>はmanifest.jsonのcontent_scriptsに設定しておこないと読み込むことができない
      また、<script>タグで直接記載することもできなかった
    • input: rangeを使って、スライダーコントローラを作成した

styles.css

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffdae7;
    height: 2px;
    border-radius: 6px;
    min-width: 100%;
}

input[type="range"]:focus,
input[type="range"]:active {
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid #fb5986;
    background-color: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}

.current {
    font-size: .8rem;
    color: #6e6e6e;
    text-align: center;
}

  • appearance:noneにして、デザインを変更.この辺りは好み

popup.js

window.addEventListener('load', function() {
    const range = document.querySelector('input[name=rangeWidth]')
    const current = document.querySelector('.current');
    range.addEventListener('input', function(e) {
        let currentText = range.value + 'px'
        current.textContent = currentText
        chrome.tabs.query({active:true, currentWindow:true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {
                command: "CHANGE_WIDTH",
                width: currentText
            })
        })
    })
})

  • input: rangeの現在の値を取得して、content_scriptsへメッセージを送信する処理
  • addEventListenerに’change’を定義していたが、スライダーが止まった位置でイベントが発火されてしまったので、’input’イベントにして連続的に発火するように対応した
  • chrome.tabs.sendMessage()には処理させるタブを指定する必要があるので、chrome.tabs.query()で取得するようにした

content_scripts.js

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.command) {
        if (msg.command == "CHANGE_WIDTH") {
            var target = document.getElementsByTagName('body')[0];
            target.style.width = msg.width;
            target.style.margin = "0 auto";
            sendResponse("finish optimize width");
        }
    }
});

  • chrome.runtime.onMessage.addListenerでpopup.jsから送信されてくるメッセージを受け取れるよう定義
  • 送信されてきたコマンドを見て処理を実行
    • body要素にスライダーから取得した、650px~1400pxの値を動的に設定
    • 中央で表示させるため、margin: 0 auto;を設定

拡張機能のインストール方法

  1. git clone https://github.com/yona-dev/optimal-width.git
  2. Chrome menu > その他ツール > 拡張機能
  3. 「パッケージ化されていない拡張機能を読み込む」でcloneしたディレクトリを指定

上記手順で拡張機能をインストールすることができます.
需要があれば、Chromeウェブストアからインストールできるようにしようと思ってます

まとめ

ブックマークレット(Bookmarklet)では実現できないようなことができるので自分なりに自動化したい機能をつくるのにはいいなと感じました.
他サイトのDOMをいじれるというのは発想次第でいろいろな機能を実装することができるかもしれない.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA