• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

Google Chrome/拡張機能

Google Chrome/拡張機能/開発

Top / Google Chrome / 拡張機能 / 開発

https://developer.chrome.com/extensions/

Chrome ウェブストアでホスティング必須に

• http://googledevjp.blogspot.jp/2014/03/chrome-chrome.html

ドキュメント

• https://developer.chrome.com/extensions/getstarted.html
• https://developer.chrome.com/extensions/overview.html

日本語ドキュメント

• マニフェストのver1当時の情報。ちょっと古い。
• http://dev.screw-axis.com/doc/chrome_extensions/

概要

• ネイティブコードを書かないでブラウザを拡張できる。

構成要素

• HTML
• CSS
• JavaScript

主な機能

Google Chrome/拡張機能/ブラウザアクション

• 右上のツールバーにボタンを追加できる
• ポップアップ内にHTMLを表示可能

  "browser_action": {
    "default_icon": "images/icon19.png",/*ボタンとして使用される画像*/
    "default_title": "Browser Action", /*マウスオーバー時に表示されるテキスト*/
    "default_popup": "popup.html" /*ボタンをクリックした際に表示するHTML*/
  }

Google Chrome/拡張機能/ページアクション

• Omnibox内にアイコン（ボタン）を追加できる

  "page_action": {
    "default_icon": "icons/foo.png", // required
    "default_title": "Do action",    // optional; shown in tooltip
    "default_popup": "popup.html"    // optional
  }

Google Chrome/拡張機能/コンテントスクリプト

• 対象ページを表示する際に，そのページのコンテキスト上でJavaScriptを実行
• サンドボックスみたいな感じで実行される(DOMにはアクセスできるけどJSの関数・変数とかは無理)

• 表示されたページのDOM操作とか
• ロードされたページの一部として動作
• バックグラウンドページとメッセージ通信を行える

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

Google Chrome/拡張機能/イベントページ

• 必要に応じてバックグラウンド動作 (Chrome 22～)
• 必要なときにロードされる

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

Google Chrome/拡張機能/バックグラウンドページ (deprecated)

• Chromeの起動中、バックグラウンドでJavaScriptを実行させておくことができる
• Consider using event pages instead.

    "background": {
      "scripts": ["background.js"]
    },
    //"page": "background.html"

ファイル

• A manifest file (manifest.json)
• One or more HTML files (unless the extension is a theme)
• Optional: One or more JavaScript files
• Optional: Any other files your extension needs — for example, image files

manifest.json

• バージョン2の最低限は下記

  {
  "name": "拡張機能の名前",
  "version": "拡張機能のバージョン",
  "manifest_version": 2,
  },

• Manifest version 1 was deprecated in Chrome 18

変更点

• content_security_policyの追加

  script-src 'self'; object-src 'self'

• web_accessible_resourcesの追加
  • A package's resources are no longer available by default to external websites (as the src of an image, or a script tag)

• バックグラウンドページ
  • background_pageがbackgroundに変更

• ブラウザアクションの変更
  • The browser_actions key in the manifest, and the chrome.browserActions API are gone.
    • Use the singular browser_action? and chrome.browserAction instead.
  • The icons property of browser_action has been removed.
    • Use the default_icon? property or chrome.browserAction.setIcon? instead.
  • The name property of browser_action has been removed.
    • Use the default_title? property or chrome.browserAction.setTitle? instead.
  • The popup property of browser_action has been removed.
    • Use the default_popup? property or chrome.browserAction.setPopup? instead.
  • The default_popup property of browser_action can no longer be specified as an object. It must be a string.

• ページアクションの変更
  • The page_actions key in the manifest, and the chrome.pageActions API are gone.
    • Use the singular page_action? and chrome.pageAction? instead.
  • The icons property of page_action has been removed.
    • Use the default_icon? property or chrome.pageAction.setIcon? instead.
  • The name property of page_action has been removed.
    • Use the default_title? property or chrome.pageAction.setTitle? instead.
  • The popup property of page_action has been removed.
    • Use the default_popup property or chrome.pageAction.setPopup? instead.
  • The default_popup property of page_action can no longer be specified as an object. It must be a string.
  • The chrome.self API has been removed.
    • Use chrome.extension instead.

• chrome.extension.getTabContentses? (!!!) and chrome.extension.getExtensionTabs? are gone.
  • Use chrome.extension.getViews({ "type": "tab" }) instead.
• Port.tab is gone. Use Port.sender instead.

セキュリティ

3つのコンテキストが存在し、それぞれは完全に分かれているので、お互いが干渉してしまうことはない。さらに、拡張同士も独立したコンテキストで実行される。

拡張コンテキスト

• タブ操作やクロスドメイン通信などの特権を実行でき、コンテントコンテキストと通信したり、スクリプトを実行したりといったことが可能

コンテントコンテキスト

• 読み込んだページのDOMを操作することができ、拡張コンテキストと相互に通信が可能
• Google Chrome/拡張機能/コンテントスクリプト

ページコンテキスト

• 元のページのHTML
• 通常のウェブページで実行されるコンテキストで、コンテントコンテキストとはDOM経由でしかやり取りできない
• 拡張コンテキストとは完全に分断

Google Chrome/拡張機能/What's New?

Developer's Guide

ブラウザUI

Google Chrome/拡張機能/ブラウザアクション (chrome.browserAction)

• ツールバーにボタンを追加する
  • アイコン (19x19px, BMP, GIF, ICO?, JPEG, or PNG)
  • ツールチップ
  • バッジ - ボタン上にテキストを表示する機能 （4文字以内）
  • ポップアップ

  "browser_action": {
    "default_icon": "images/icon19.png",/*ボタンとして使用される画像*/
    "default_title": "Browser Action", /*マウスオーバー時に表示されるテキスト*/
    "default_popup": "popup.html" /*ボタンをクリックした際に表示するHTML*/
  }

Google Chrome/拡張機能/コンテキストメニュー? (chrome.contextMenus?)

• 右クリックメニュー
• 複数個の場合は1つの親メニューにまとめられる

    "permissions": [
    "contextMenus"
    ],
   "icons": {
      "16": "icon-bitty.png",/*コンテキストメニュー用*/
      "48": "icon-small.png",
      "128": "icon-large.png"
    },

Google Chrome/拡張機能/デスクトップ通知

• 重要なイベントをユーザに通知

  "permissions": [
    "notifications"
  ]

• webkitNotificationsはdeprecated
• Web NotificationsはシンプルはHTMLのみ
• リッチな通知用にchrome.notificationsを準備中

Google Chrome/拡張機能/Omnibox? (chrome.omnibox?)

• Omniboxにキーワードを登録可能

   "omnibox": { "keyword" : "aaron" },
    "icons": {
      "16": "16-full-color.png"
    },

Google Chrome/拡張機能/オプションページ?

• 拡張機能の設定画面

  "options_page": "options.html",

Google Chrome/拡張機能/オーバーライドページ?

• 新しいタブの画面とかを独自に実装
  • ブックマークマネージャ - chrome://bookmarks?
  • 履歴 - chrome://history?
  • 新しいタブ - chrome://newtab?

  "chrome_url_overrides" : {
    "pageToOverride": "myPage.html"
  }

Google Chrome/拡張機能/ページアクション (chrome.pageAction?)

• Omnibox内にアイコン表示

  "page_action": {
    "default_icon": "icons/foo.png", // required
    "default_title": "Do action",    // optional; shown in tooltip
    "default_popup": "popup.html"    // optional
  }

ブラウザ操作

Google Chrome/拡張機能/ブックマーク? (chrome.bookmarks?)

• ブックマークを操作

  "permissions": [
    "bookmarks"
  ]

Google Chrome/拡張機能/クッキー? (chrome.cookies?)

• Cookieを読み書き

  "permissions": [
    "cookies",
    "*://*.google.com"
  ]

Google Chrome/拡張機能/Chrome DevToolsの拡張? (chrome.devtools?)

• Chrome DevToolsを拡張

Google Chrome/拡張機能/イベント? (chrome.events?)

• イベントの検出

Google Chrome/拡張機能/履歴? (chrome.history?)

• 履歴の参照

  "permissions": [
    "history"
  ]

Google Chrome/拡張機能/管理? (chrome.management?)

Google Chrome/拡張機能/タブ? (chrome.tabs?)

• Chromeのタブを操作

  "permissions": [
    "tabs"
  ]

Google Chrome/拡張機能/ウィンドウ? (chrome.windows?)

• Chromeのウィンドウを操作

  "permissions": [
    "tabs"
  ]

実装

Google Chrome/拡張機能/アクセシビリティ?

• 拡張自体のアクセシビリティについて

Google Chrome/拡張機能/イベントページ

• 必要に応じてバックグラウンド動作
• 必要なときにロードされる

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

Google Chrome/拡張機能/バックグラウンドページ (deprecated)

• Chromeの起動中，バックグラウンドでJavaScriptを実行させておくことができる
• Consider using event pages instead.

    "background": {
      "scripts": ["background.js"]
    },
    //"page": "background.html"

Google Chrome/拡張機能/コンテントセキュリティポリシー?

• CSP

Google Chrome/拡張機能/コンテントスクリプト

• 対象ページを表示する際に，そのページのコンテキスト上でJavaScriptを実行
• サンドボックスみたいな感じで実行される(DOMにはアクセスできるけどJSの関数・変数とかは無理)
• 表示されたページのDOM操作とか
• バックグラウンドページとメッセージ通信を行える

• できないこと
  • Use chrome.* APIs (except for parts of chrome.extension)
    • メッセージングで間接的に実行可能
  • Use variables or functions defined by their extension's pages
  • Use variables or functions defined by web pages or by other content scripts

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

Google Chrome/拡張機能/クロスオリジンXHR?

• クロスドメイン通信を行う。manifest.jsonで通信を許可するドメインを指定
• XMLHttpRequest

Google Chrome/拡張機能/国際化? (chrome.i18n?)

• _locales/localeCodeというメッセージファイルを用意

Google Chrome/拡張機能/メッセージパッシング

• コンポーネント間の通信
  • chrome.runtime.sendMessage?
  • chrome.tabs.sendMessage?

Google Chrome/拡張機能/パーミッション? (chrome.permissions?)

Google Chrome/拡張機能/NPAPIプラグイン?

• NPAPI
• ネイティブコードのロード

Finishing

Hosting

Other Deployment Options

チュートリアル

• http://code.google.com/chrome/extensions/getstarted.html
• http://h2o-space.com/blog/980 - 日本語解説

OAuth

• http://code.google.com/chrome/extensions/tut_oauth.html

なくなった機能

• Toolstrips
• Mole

スライド

連載

• 先取り！ Google Chrome Extensions
  • http://gihyo.jp/dev/feature/01/chromeExt/
• 続・先取り！ Google Chrome Extensions
  • http://gihyo.jp/dev/serial/01/chrome-extensions

TypeScript

• http://sassembla.github.io/Public/2013:04:10 21-25-10/2013:04:10 21-25-10.html

悪意ある Chrome 拡張機能からユーザーを守るために Chrome ウェブストアでホスティングしましょう

• http://googledevjp.blogspot.jp/2014/03/chrome-chrome.html
• https://productforums.google.com/forum/#!topic/chrome-ja/7qSACiy8EtY
• デベロッパーモードの拡張機能を無効にする

参考

• http://ss-o.net/chrome/extension/first.html
• http://ido.nu/kuma/2009/03/19/chrome-extension-howto/
• http://gihyo.jp/dev/feature/01/chromeExt/0001
• http://d.hatena.ne.jp/love_firefoxportable/20091214/1260801125
• http://d.hatena.ne.jp/secondlife/20091209/1260336600 - ことはじめ