Help us understand the problem. What is going on with this article?

外部に公開しないミニマムな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/にある追加した拡張機能のオンオフボタンの左に再読み込みボタンがあるのでそれを使うと便利です

とのことです!

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

yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした