初めてchromeの拡張機能を作ったが、意外と簡単だったのでメモ。
最低限必要なファイルは下記の２つのみ
拡張機能の設定ファイル。各項目をJSONで設定する。
{
"name": "拡張機能名",
"version": "1.0.0",
"manifest_version": 2,
"description": "拡張機能の説明",
"content_scripts": [{
"matches": ["https://*.dev.xxx.jp/*","https://xxx-local.xxx.jp/*"],
"exclude_globs":[
今回は公開はせずにローカルで動かす想定なのでiconなどの設定は省略して必要最低限の項目だけ設定した。
拡張機能の処理を書くファイル（ファイル名はなんでも良い）
とりあえず今回はページ内のリンクにパラメータを付与するだけのシンプルなものを作った
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 );メニュー→「その他のツール」→「拡張機能」をクリック
ページ左上の「パッケージ化されていない拡張機能を読み込む」から作成したファイルが置いてあるフォルダを選択
これだけで拡張機能として使うことができる。
ちょっとした機能であれば簡単に作れるので、とても便利。