Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Develop Chrome Extension

110

Develop Chrome Extension

Develop a Chrome Extension in 2018:
- Why build a Chrome extension?
- Structure and Architecture
- Test and deploy your Chrome extension
- Chrome extension boilerplate by React
- Examples of Chrome extensions

Aleksandr Golovatyi (Alex G)

September 28, 2018
Tweet

Transcript

  1. Develop a Chrome Extension in 2018 Oleksandr Golovatyi Senior Front

    End Developer at AppsFlyer, Co-Founder & Trainer at ”FullStack Academy Kiev”
  2. Develop a Chrome Extension in 2018 •Why build Chrome extension?

    •Structure and Architecture •Test and deploy your Chrome extension •Chrome extension boilerplate by React •Examples of Chrome extensions
  3. Why build a Chrome extension? • Chrome – most popular

    browser • Integration with Chrome • Chrome APIs • Could Extend Chrome & any web site • Standard Web Stack (JS, HTML, CSS)
  4. Manifest File (more …) { "description": "Gets information from Google.",

    "icons": { "128": "icon_128.png" }, "background": { "persistent": false, "scripts": ["bg.js"] }, "permissions": ["http://*.google.com/", "https://*.google.com/"], "browser_action": { "default_title": "", "default_icon": "icon_19.png", "default_popup": "popup.html" } }
  5. Background Script The background script is the extension's event handler;

    it contains listeners for browser events that are important to the extension. { "name": ”My Extension Name", "background": { "scripts": ["background.js"], "persistent": false } }
  6. UI Elements: Popup HTML file that is displayed in a

    special window when the user clicks the toolbar icon.
  7. UI Elements: Context Menu { "name": ”My Extension Name", ...

    "permissions": ["contextMenus", "storage"], "icons": { "16": "globalGoogle16.png", "48": "globalGoogle48.png", "128": "globalGoogle128.png" } ... }
  8. UI Elements: Context Menu var contexts = ["page", "selection", "link"];

    for (var i = 0; i < contexts.length; i++) { var context = contexts[i]; var title = "Test '" + context + "' menu item"; var id = chrome.contextMenus.create({ "title": title, "contexts": [context], "onclick": genericOnClick }); }
  9. UI Elements: Omnibox The omnibox API allows you to register

    a keyword with Google Chrome's address bar
  10. Chrome APIs: Stable APIs • Bookmarks • Commands • contextMenus

    • Cookies • contentSettings • Downloads • Events • History • Identity (OAuth2) • Tabs • Sessions • Storage