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
83
Help us understand the problem. What is going on with this article?
@Tachibana446

Chrome拡張 備忘録 1から10まで

More than 3 years have passed since last update.

はじめに

自分はChromeにマイ拡張機能を搭載して使っているのですが、ときどき機能追加しようとしたときにどうすれば良いのかわからなくなるので備忘録を書いておきます。
間違っていたりしたらコメントいただけるとうれしいです。

eventPageとかbrowserActionとかどれ使えばええねんって方はまとめを御覧ください。

必要なファイル・フォルダ構成

  • manifest.json(必須)
  • html(ブラウザアクションなどを実行したときに表示されるHTML)
  • javascript(プログラム本体)

manifest.json

公式

必須

  • manifest_version 現在有効なのは2(数値)
  • name 拡張機能名 45文字まで
  • version 1~4つまでの数字をドット区切り 更新時は必ずバージョンが上がっていなければならない
    • "1.0.0.1"や"3.4567"など

推奨

  • default_locale
  • description
  • icons
    • { "16": "icon16.png", "48": "icon48.png" }など アイコンは一つあればよい

一つ選択または無し

  • browser_action
  • page_action

オプション 使う機能だけ書けば良い

  • author
  • background バックグラウンドページ/イベントページ(後述)
    • "presistent" : falseが推奨(バックグラウンドページからイベントページへの移行(後述))
  • chrome_settings_override ホーム画面、検索画面、スタートアップ画面の変更機能
  • chrome_ui_override UIの変更 ブックマークとか
  • chrome_url_override ブックマークマネージャ、履歴、新しいタブを変更できる
  • commands キーボードショートカット
  • content_scripts 配列 コンテントスクリプト(後述)
  • homepage_url 拡張機能のホームページ
  • incognito シークレットモードでの動作 spanning / split / not_allowedのいずれか
  • offline_enabled オフライン時に動作するか否か
  • optional_permissions オプションページでのパーミッション
  • options_page オプションページのHTML
  • options_ui オプションページの詳しい設定
    • chrome_style : true  推奨
    • page : HTML。options_pageと同じ
  • permissions 配列 パーミッション
  • update_url Chromeストア以外で自動更新したい場合設定する。ただし現在のWindows版およびベータ版はChromeストア以外で配信されている拡張機能はダウンロードできないらしい

パーミッション

公式
そのスクリプトが使えるChromeの機能
例えばタブ関連を使いたければTabs、ダウンロード機能を使いたければdownloadsなどをpermissionsに書く

プログラム(javascript)を書ける場所

どのような種類の拡張があるか、というより、どこにプログラムを記載できるかで分類分けしてみます。

  • ブラウザアクション/ページアクション(ポップアップのHTML上)
  • イベントページ(旧バックグラウンドページから移行)
  • コンテントスクリプト
  • executeScriptで渡したスクリプト

それぞれの解説

ブラウザアクション/ページアクション

Chrome公式解説ページ
URL・検索バー右側にアイコンが出るタイプの拡張機能
2つの大まかな違いは、ブラウザアクションがブラウザ全体に作用する拡張機能(常時表示される)で、ページアクションがある特定のページに作用する拡張機能 という風に使い分ける
公式では「たくさんのページに作用するならブラウザアクション」「幾つかのページのみに作用するならページアクションを使って」とある

マニフェスト例

{ 
  "name": "My extension",
  "browser_action":{
    "default_icon":{
      "32": "images/icon.png"
    },
    "default_title": "拡張のボタン上ででるツールチップ",
    "default_popup": "popup.html"
  }
}

プログラムの書き方

上記の例であるpopup.htmlで、通常のHTMLのように<script>タグでスクリプトを読み込む。
当然ながら、このスクリプトが操作できるのはポップアップのHTML(popup.html)である。
jqueryなどを使うときは注意。
開いているページの中身などを操作したいときは後述のコンテントスクリプトを使う。

イベントページ

Chrome公式
バックグラウンドページ・イベントページと呼ばれる目に見えないページ上で動作するスクリプト達。
バックグラウンドページは常時ページが保持されるが、イベントページは必要なときだけ動作し、自動で廃棄されるようだ。
イベントページが実行されるタイミングは公式の方にも書いてあるが、だいたいは
- リッスンしていたイベントがディスパッチされた時
- コンテントスクリプトなどがメッセージを送信した時
- ポップアップなどがruntime.getBackgroundPageを呼び出した時

バックグラウンドページはページが保持され続けてしまうので、できるかぎりイベントページを使うように推奨されている。

マニフェスト

{
  ...
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  }
  ...
}

イベントページとバックグラウンドページの違い

マニフェストでpersistentをtrueにするとバックグラウンドページ、falseにするとイベントページ

プログラムの書き方

マニフェストのscriptsで記載したスクリプトが動作する。
イベントページ(見えない)の内容を操作するので注意(jqueryなど)
chrome.*の機能(chrome.tabs.*など)が使えるので、chrome.runtime.onMessage.addListenerでexecuteScriptのスクリプトからメッセージを受け取り、Chromeの機能を使って返してやることに使われることが多い気がする。

コンテントスクリプト

公式
指定されたページで自動的に実行されるスクリプト
matchesでURLを指定する
CSSも読めるので、特定のサイトのURLだけを変えたいような場合はスクリプトを組まなくてもできる(!)

マニフェスト

{
  ...
  "content_scripts":[
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mycss.css"],
      "js": ["jquery.js","myscript.js"]
    }
  ]
}

プログラムの書き方

そのサイトに対して動作する。つまりjqueryなどでそのページを操作できる。
chromeの機能で使用できないものはメッセージパッシングでイベントページにやってもらおう。

executeScript

公式
popupのスクリプトなどから、chrome.tabs.executeScriptで渡すとそのスクリプトが実行される。
また、一部のchrome.*,runtime.*の機能が使えないので、それらを使う時はメッセージパッシングでイベントページにやってもらう
tabsのパーミッションが必要

コード例

popup.js
// jqueryを読み込んでから自分のスクリプトを動作させる
chrome.tabs.getSelected(null, function(selectedTab){
  chrome.tabs.executeScript( selectedTab.id, {
    file: "jquery.min.js"
  },function() {
    chrome.tabs.executeScript( selectedTab.id, {
      file: "myscript.js" 
    }, function(result){ ... });
  });
}

プログラムの書き方

任意のタイミングでそのページにスクリプトを挿入できる。操作するのもそのページ。
ただし、予め使うサイトが決まっているならコンテントスクリプトのほうが良いと思われる。

メッセージパッシング

Message Passingってどう訳すんだろう メッセージ渡し?
公式
その拡張で動作中のスクリプト間でオブジェクトを渡したり出来る機能です。
たとえばExecuteScriptで実行したスクリプトがchrome.tabsを使おうとした時、そのままでは使えないので、メッセージパッシングでイベントページのスクリプトにメッセージを依頼して実行してもらうなどの使い方ができます。
送る方は

chrome.runtime.sendMessage({atai:""},function(response){
  // 相手のメッセージリッスンが終わった後される処理
  var res = response.returnAtai;
});

受ける方は

chrome.runtime.onMessage.addListener(
  function(request,sender,sendResponse){
    var atai = request.atai;
    sendResponse({returnAtai: "値その2"});
  }
);

まとめ

忘れたくないテクニックなど

  • オプションページを開く
    • chrome.runtime.openOptionsPage()
83
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

Comments

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