最終更新:2015-05-07 (木) 17:48:03 (1321d)  

Google Chrome/拡張機能/開発 はてなブックマークを見る

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

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

ドキュメント

日本語ドキュメント

概要

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

構成要素

主な機能

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)
  • ブラウザアクションの変更
    • The browser_actions key in the manifest, and the chrome.browserActions API are gone.
    • 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.
  • 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つのコンテキストが存在し、それぞれは完全に分かれているので、お互いが干渉してしまうことはない。さらに、拡張同士も独立したコンテキストで実行される。

拡張コンテキスト

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

コンテントコンテキスト

ページコンテキスト

  • 元のページの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/拡張機能/デスクトップ通知

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?)

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/拡張機能/コンテントセキュリティポリシー?

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?

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

チュートリアル

OAuth

なくなった機能

  • Toolstrips
  • Mole

スライド

連載

TypeScript

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

参考