391
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

外部に公開しないミニマムなchrome拡張機能を作るのは1時間も使わずにできる

概要

今回は超ミニマムな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すればおkです。

  const elements = document.querySelectorAll('.セレクタ');
  elements.forEach(function(element) {
    element.addEventListener('click', test);
  });

  function test() {
    console.log('test');
  }

こういうのを書けばあるサイトのあるボタンを押した時にconsole.logさせることが可能となります。

あとは自分の書きたい処理を書いてください。

chromeに読み込ませる

  1. chrome://extensions/ にアクセス
  2. デベロッパーモードをオン
  3. [パッケージ化されていない拡張機能を読み込む]で自分の作った拡張機能があるフォルダを指定し読み込み
  4. 拡張機能を適用したいページを開きスーパーリロード Cmd+Shift+R

これで動くはずです。

同僚に配布したいときはそのフォルダを圧縮してSlackなりに投げればいいでしょう。

デバッグしたいときは、何回もchrome拡張を削除して読み込めばおkです。

それ以外の方法があったら教えて下さい。

追記

  • chrome://extensions/にある追加した拡張機能のオンオフボタンの左に再読み込みボタンがあるのでそれを使うと便利です

とのことです!

コメントいただいた方、ありがとうございます!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
391
Help us understand the problem. What are the problem?