概要
今回は超ミニマムなchrome拡張機能をつくります
ブックマークレットレベルのコードをくっつける感じです
拡張機能のアイコンを押すとなんか設定できたりするやつもありますが、そこまで作ると手間なので、あるサイトを読み込んだ時だけjsを動かしたいとかそういうレベルのものをつくります
ファイル構成
まずはこの構成のファイル構成を作ります。一旦中身は何もなくていいです。
アイコンは適当にフリー素材の32pxのものを使えばいいと思います^_^
フォルダ
├ content_scripts.js
├ icon_32.png
└ manifest.json
manifest.jsonを埋める
拡張機能用の設定ファイルだと思ってください。
とりあえずコピペで良いと思います。nameの部分とmatchesの部分は自分が使いたいサイトに合わせて変えておきましょう。
manifest.json
{
"name": "名前",
"manifest_version": 2,
"version": "1.0",
"browser_action": {
"default_icon": "icon_32.png"
},
"content_scripts": [
{
"matches": ["https://www.google.com", "https://www.google.com"],
"js": ["content_scripts.js"]
}
]
}
matchesは拡張機能を実行するURLです。ここらへんはググればいくらでも出てくると思います。
jsはそのページで実行するjsです。
あとは雰囲気でわかると思います。
jsに処理を書く
あとは処理を書いてやればOKです。
動いてるか確かめるためにこういう処理を書けばいいと思います。
content_scripts.js
window.onload = function() {
console.log('test');
}
サイトのあるボタンを押した時に自動でなにかを設定したい！とかそういうのだったらaddEventListenerすればおｋです。
const elements = document.querySelectorAll('.セレクタ');
elements.forEach(function(element) {
element.addEventListener('click', test);
});
function test() {
console.log('test');
}
こういうのを書けばあるサイトのあるボタンを押した時にconsole.logさせることが可能となります。
あとは自分の書きたい処理を書いてください。
chromeに読み込ませる
-
chrome://extensions/にアクセス - デベロッパーモードをオン
- [パッケージ化されていない拡張機能を読み込む]で自分の作った拡張機能があるフォルダを指定し読み込み
- 拡張機能を適用したいページを開きスーパーリロード Cmd+Shift+R
これで動くはずです。
同僚に配布したいときはそのフォルダを圧縮してSlackなりに投げればいいでしょう。
デバッグしたいときは、何回もchrome拡張を削除して読み込めばおｋです。
それ以外の方法があったら教えて下さい。
追記
- chrome://extensions/にある追加した拡張機能のオンオフボタンの左に再読み込みボタンがあるのでそれを使うと便利です
とのことです！
コメントいただいた方、ありがとうございます！