Chrome拡張機能を作ってローカルで動かしてみる

初めてchromeの拡張機能を作ったが、意外と簡単だったのでメモ。

拡張機能を作る

最低限必要なファイルは下記の２つのみ

manifest.json
content.js

manifest.json

拡張機能の設定ファイル。各項目をJSONで設定する。

{
  "name": "拡張機能名",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "拡張機能の説明",
  "content_scripts": [{
    "matches": ["https://*.dev.xxx.jp/*","https://xxx-local.xxx.jp/*"],
    "exclude_globs":["https://xxx-git001.dev.xxx.jp/*"],
    "js": [
      "content.js"
    ]
  }]
}

今回は公開はせずにローカルで動かす想定なのでiconなどの設定は省略して必要最低限の項目だけ設定した。

↓参考サイト
https://developer.chrome.com/extensions/manifest

qiita.com

content.js

拡張機能の処理を書くファイル（ファイル名はなんでも良い）

とりあえず今回はページ内のリンクにパラメータを付与するだけのシンプルなものを作った

var linkNum = document.links.length;
console.log(`リンクの数は${linkNum}です`);
var outputLinks = "リンク一覧：\n";   // 出力用の変数
// すべてのリンク先を得るループ
for( var i=0 ; i < linkNum ; i++ ) {
    var url = document.links[i].href;

拡張機能の適用方法

メニュー→「その他のツール」→「拡張機能」をクリック

ページ左上の「パッケージ化されていない拡張機能を読み込む」から作成したファイルが置いてあるフォルダを選択

これだけで拡張機能として使うことができる。
ちょっとした機能であれば簡単に作れるので、とても便利。