Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
388
Help us understand the problem. What is going on with this article?
@Ancient_Scapes

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

More than 1 year has passed since last update.

概要

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

とのことです!

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

388
Help us understand the problem. What is going on with this article?
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
Ancient_Scapes
たまに記事を書く
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
388
Help us understand the problem. What is going on with this article?