Chrome Extension – Примеры – Browser UI

View Github Repository Open presentation in a new window

vomchik

See all presentation from vomchik

Chrome Extension – Примеры – Browser UI

0 0

presentation-chrome-extension-intro

Short presentation about develop Chrome's extensions

On Github vomchik / presentation-chrome-extension-intro

Chrome Extension

Пишем плагинчики одной левой

Владимир Мацола / @vomchik

Друг, что за экстеншен?

Расширение (Extension) - это небольшая программа которая дает возможность значиетельно расширить возможности браузера.

Примеры

AdBBlock

Google Translator

Evernote Clipper

Feedly

Pocket

Browser UI

Browser Actions

Context Menus

Desktop Notifications

Omnibox

Options Pages

Override Pages

  • New Tab
  • Bookmark Manager
  • History

Page Actions

Browser Interaction

  • Bookmarks
  • Cookies
  • Extending DevTools
  • Events
  • History
  • Management
  • Tabs
  • Windows

Chrome APIs

http://developer.chrome.com/extensions/api_index.html

Поехали

  • Открываем Сhrome
  • Вводим chrome://extensions
  • Отмечаем галочку Developer mode

Структура проекта

manifest.json

{
    "manifest_version": 2,
    "name": "My Super Extension",
    "version": "1.0.90",
    "icons": { "16": "16x16.png", "128": "128x128.png" },
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ],
    ...
}

manifest.json

{
    ...,
    "background" : {
        "page": "background.html"
    },
    "content_scripts":[
       {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["frontend.js"]
       }
    ],
    "options_page": "options.html",
    ...
}

manifest.json

{
    ...,
    "web_accessible_resources": [
        "css/main.css",
        "js/main.js"
    ],
    "browser_action": {
        "default_title": "My Super Extension",
        "default_icon" : "16x16.png",
        "default_popup": "login.html"
    }
}

manifest.json

http://developer.chrome.com/extensions/manifest.html

Вопросы?