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

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;
    if (url.indexOf('?')!=-1) {
        var param = "&smarty_debug=1";
    }else{
        var param = "?smarty_debug=1";
    }
    if (url.match(/smarty_debug/)) {
        document.links[i].href = document.links[i].href;
    }else if (!url.match(/https:/)) {
        document.links[i].href = document.links[i].href;
    }else if(document.links[i].hash) {
        var index   =  url.indexOf("#");
        var str1         =  url.slice(index);
        var str2         = url.substring(0, index);
        document.links[i].href = str2 + param + str1;
    }else{
        document.links[i].href =url +  param;
    }
    outputLinks += '《' + (i+1) + '番目》' + document.links[i].href + '\n';
}
outputLinks += "以上です。";
console.log( outputLinks );

拡張機能の適用方法

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

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

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