build your own chrome extension with angularjs

build a chrome extension with angular.js

JSRomandie, May 2014@flrent

summary

1) what is a chrome extension ?

2) the chrome platform (manifest, APIs)

3) angular!4) distribution (internal/store)5) Get started and feedback

what is a chrome extension ?

what can you do with a chrome extension ?

get/modify tabs content (!)

browser popup

leverage web products build a dev tool

capture tab screen

use storage (local/sync)

send desktop notifications

take control of the browser(!)

context menus

3 kinds

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

browser action - page action - popup

chrome extension layers

http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/

content scripts- run in tabs- DOM access- isolated scope - limited chrome.* APIs access- access to resources via

‘web_accessible_resources’ property

background pages / events pages

- runs in background- html and js- full chrome.* APIs access

popup scripts

- active only when popup is open

- html and js- chrome.* APIs access

the chrome manifest

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

app content

app meta

app permissions & resources

the (BB) chrome manifest

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

{ "name": "BugBuster CSS Selector", "version": "0.2.0", "manifest_version": 2, "description": "__MSG_appDescription__", "icons": { "16": "images/icon-16.png", "128": "images/icon-128.png" }, "default_locale": "en", "background": { "page": "messager.html" }, "browser_action": { "default_icon": { "19": "images/icon-19.png", "38": "images/icon-38.png" }, "default_title": "BugBuster - Web Application Testing Made Easy", "default_popup": "recorder.html" }, "externally_connectable": { "matches": [ "*://*.bugbuster.com/*", "*://bugbuster.dev/*" ] }, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "web_accessible_resources": [ "http://fonts.googleapis.com/", "48.png", "https://*.google-analytics.com/**/*" ],

"permissions": [ "http://*/*", "https://*/*", "contextMenus", "storage", "notifications", "clipboardRead", "clipboardWrite", "tabs", "<all_urls>" ], "content_scripts": [ { "matches": [ "http://*/*", "https://*/*" ], "exclude_matches": [ "http://localhost/*", "http://bugbuster.dev/*", "https://app.bugbuster.com/*" ], "css": [ "selector.css" ], "js": [ "selector.js" ], "run_at": "document_end", "all_frames": false } ]}

communication

http://www.penguinhustle.com/blog/how-to-write-your-first-chrome-extension/

communication : one time requests- sending from content script

- sending from background scripts

- receiving from both

communication : long-lived connections- opening a channel from content script

- receving on the background page

communication : others

- cross-extension messaging

- web pages messaging

- native messaging

permissions/APIs

• background• bookmarks• clipboardRead• clipboardWrite• contentSettings• contextMenus• cookies• history• idle

• management• notifications• pageCapture• tabs• topSites• webNavigation• webRequest• webRequestBlocking

chrome.permissions.request({permissions: ['tabs'], origins: ['http://www.google.com/’]}, function(granted) {}

);

angular.js

state manager

Content-Security-Policy compliant framework - no inline JS- no inline event bindings- no eval

- restore state- services

https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy

distribution

manual distribution

Chrome Web Store- 5$ one time fee- stats- updates- soon to be required for Chrome Windows

- need active developer mode- CRX file- unpacked

http://blog.chromium.org/2013/11/protecting-windows-users-from-malicious.html

getting started

scaffold project

- https://github.com/yeoman/generator-chrome-extension

- angular, bootstrap, jquery- background, popup, content

script- grunt build, bower- mocha, chai, sinon.js tests

Yeoman

- https://github.com/flrent/chrome-extension-angular-base

personal feedback

- mindset change (scopes, APIs)

- (channel) messaging is hard

- updates/installations keep old context

- very powerful but be careful

Thank you

Florent Lamoureuxworking at BugBuster

@flrent

https://github.com/flrent/chrome-extension-angular-base