2. Bed Boys Gang
Mr. Thapakit Student ID: 54701760
Sarakham
Mr. Nattaphat Student ID: 54701995
Khamnon
Mr. Vikornsak Student ID: 54703727
Rakhnoo
Mr. Wissarut Student ID: 54703762
Katathikarn
Mr. Somjean Student ID: 54704041
Sangdao
Mr. Surasak Student ID: 54704304
Phetmanee
3. How do we start ?
Follow the Getting Started Tutorial
Read the Overview
Keep up-to-date by reading the Chromium blog
Subscribe to the chromium-extensions group
5. What are Extensions
?
• Small software programs
• Modify and enhance functionality of
Chrome browser
• Implement using Web Technologies
• Also use to build packaged apps
• Have little to no user interface
• Don’t need to depend on content from
the web
14. Files
• A manifest file (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
17. Asynchronous vs.
•
Synchronous APIs
Most methods in the chrome.*
are asynchronous
• they return immediately, without waiting
for the operation to finish.
• If you need to know the outcome of that
operation, then you pass a callback
function into the method.
• That callback is executed later
(potentially much later), sometime after
chrome.tabs.create(object createProperties,
the method returns. Here's an example of
function callback)
the signature for an asynchronous method:
18. Asynchronous vs.
•
Synchronousare synchronous.
Other chrome.* methods
• Synchronous methods never have a
callback because they don't return until
they've completed all their work.
• Often, synchronous methods have a return
type.
Consider the
• DOMWindow chrome.extension.getBackgroundPage()
chrome.extensions.getBackgroundPage()
method:
21. Communication
•
betweenwithin an extension often
The HTML pages
Pages
need to communicate.
• Because all of an extension's pages execute
in same process on the same thread, the
pages can make direct function calls to each
other.
• The HTML pages within an extension often
need to communicate.
• Because all of an extension's pages execute
in same process on the same thread, the
pages can make direct function calls to each
23. Saving data &
•
Incognito data using the HTML5
Extensions can save
mode
web storage API
(such as localStorage)
• Or by making server requests that result in
saving data.
• Whenever you want to save something, first
consider whether
it's from a window that's in incognito mode.
• By default, extensions don't run in incognito
windows, and packaged apps do.
• You need to consider what a user expects
24. Saving data &
•
Incognito modethe window
Incognito mode promises that
will leave no tracks.
• When dealing with data from incognito
windows, do your best
to honor this promise.
• For example, if your extension normally
saves browsing history
to the cloud, don't save history from
incognito windows.
• On the other hand, you can store your
extension's settings
25. Saving data &
Incognito mode
If a piece of data might show
where a user
has been on the web or what
the user has done,
don't store it if it's from an
incognito window.
28. JSON
• JavaScript Object Notation
• easy for humans to read and write
• easy for machines to parse and generate
• based on a subset of the JavaScript
Programming Language, Standard ECMA-262
3rd Edition – December 1999
• text format that is completely language
independent
• uses conventions that are familiar to
programmers of
the C-family of languages
29. JSON – built 2
structures
A collection of name/value pairs. In various
languages, this is realized as
an object, record, struct, dictionary, hash
table,
keyed list, or associative array.
An ordered list of values. In most languages,
this is realized
as an array, vector, list, or sequence.
37. Browser UI
Changing the Google Chrome chrome
Browser Actions Add icons to the toolbar (extensions
only)
Desktop Notify users of important events
Notifications
Omnibox Add a keyword to the address bar
Option Pages Let users customize your extension
Override Pages Implement your own version of
standard browser pages such as the
New Tab page
Page Actions Add temporary icons inside the
address bar
(extensions only)
38. Browser Interaction
Interacting with Google in other
ways
Bookmarks Create, organize, and otherwise
manipulate the user's bookmarks
Cookies Explore and modify the browser's
cookie system
Events Detect when something interesting
happens
History Interact with the browser's record of
visited pages
Tabs Create, modify, and rearrange tabs in
the browser
Windows Create, modify, and rearrange
windows in the browser
39. Implementation
Implementing the innards of your
extension
Accessibility Make your extension accessible to
(a11y) people with disabilities
Background Put all the common code for your
Pages extension in a single place
Content-Scripts Run JavaScript code in the context of
web pages
Cross-Origin XHR Use XMLHttpRequest to send and
receive data from remote servers
40. Implementation
(cont.)
Implementing the innards of your
extension
Internationalizati Deal with language and locale
on
Message Passing Communicate from a content script to
its parent extension, or vice versa
Optional Modify your extension's permissions
Permissions
NPAPI Plugins Load native binary code
41. Finishing
Finishing and distributing your
extension
Autoupdating Update extensions automatically
Hosting Host extensions on Google servers or
your own
Other Distribute extensions on your network
Deployment or with other software
Options
Paging Create a .crx file so you can distribute
your extension
43. Create and Load an
extension
1. Create a folder somewhere on your
computer to contain your extension's
code.
2. Inside your extension's folder, create a
text file called manifest.json, and put
this in it
44. Create and Load an
extension
3. Copy this icon to the same folder:
http://www.box.com/s/6418basa92a0lyckshix
4. Load the extension:
Bring up the extensions management page
by clicking the wrench icon and
choosing Tools > Extensions.
If Developer mode has a + by it, click the
+ to add developer information to the page.
The + changes to a -, and more buttons and
information appear.
Click the Load unpacked
extension button. A file dialog appears.
45. Create and Load an
extension
If your extension is valid, its icon appears next to
the address bar, and information about the
extension appears in the extensions page, as the
following screenshot shows
46. Add code to the
extension
http://www.box.com/s/82e9lh
yvh8ri6o8cs61e
47. Add code to the
extension
Return to the extensions
management page,
and click the Reload button to
load the new
version of the extension
Click the extension's icon. A
popup
should appear that displays the
contents of popup.html
50. Extensions for
Chrome
Contains extensions for Chrome, which
change how the browser behaves and, in a
limited way, how it looks
If your extension seems more like a website
than a small browser add-on, consider making it
a packaged app. Packaged apps are
implemented as extensions that have the
additional ability to present an app-like interface
51. Extensions for
Chrome manifest, and
Every app has a most likely
icons, that you put into
a ZIP file and upload to the Chrome Developer
Dashboard.
The Chrome Web Store takes the contents of
this ZIP file and puts them in a cryptographically
signed .crx file. Users download this .crx and
To create installable web apps file
when they click the you
extensions, Install button for your app
should be
familiar with HTML, JavaScript, and CSS. If
you're targeting Chrome exclusively, you can
depend on HTML5 and the other emerging APIs
that Chrome supports
53. Uploading and
Publishing
To publish apps to the Chrome Web Store, you
first use the
Chrome Developer Dashboard to upload your
app and specify
how its listing should look. Then you can publish
it either to the
world at large or to a few trusted testers.
55. Uploading and
Publishing
9 STEPs : Publishing your app
STEP Choose a developer account
1:
STEP Create a ZIP file
2:
STEP Upload the app
3:
STEP Specify the payment system
4:
STEP Get app constants
5:
56. Uploading and
Publishing
9 STEPs : Publishing your app (cont.)
STEP Finish the app
6:
STEP Provide store content
7:
STEP Pay the developer signup fee
8:
STEP Publish the app
9:
58. Speed
Chrome has taken it a step further.
Chrome is the ultimate in fast
browsing. With Internet connections
getting faster and faster, a browser
should be able to keep up with the
pace of rendering images and
content, which is what Google have
managed to do perfectly.
59. Simplicity
Chrome on the other hand has
arranged everything in an organized
manner, meaning the focus remains
entirely on what it should be –
browsing the Internet.
60. Extensions
The extension support in Chrome has
been done fantastically. The ease of
installing new plugins means no
restart is needed, and the browser
speed doesn’t suffer when lots of
extensions are installed. The
functional support for add-ons means
full support for Grease Monkey
scripts too, which is a great added
bonus.
