- 1. Bed Boys GangMr. ThapakitStudent ID: 54701760SarakhamMr.
Nattaphat Student ID: 54701995KhamnonMr. Vikornsak Student ID:
54703727RakhnooMr. WissarutStudent ID: 54703762KatathikarnMr.
Somjean Student ID: 54704041SangdaoMr. Surasak Student ID:
54704304Phetmanee
2. How do we start ?Follow the Getting Started Tutorial Read the
Overview Keep up-to-date by reading the Chromium blogSubscribe to
the chromium-extensions group 3. Overview 4. What are Extensions?
Small software programs Modify and enhance functionality ofChrome
browser Implement using Web Technologies Also use to build packaged
apps Have little to no user interface Dont need to depend on
content fromthe web 5. The Basics 6. Extensions UIs 7. Packaged app
UIs 8. Architecture 9. Background Page 10. UI Pages 11. Content
Scripts 12. Files 13. 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 extensionneedsfor
example, image files 14. The Manifest
File(manifest.json)manifest.json 15. Using theChrome.*APIs 16.
Asynchronous vs. Synchronous APIsMost methods in the chrome.*are
asynchronous they return immediately, without waitingfor the
operation to finish. If you need to know the outcome of
thatoperation, then you pass a callbackfunction into the method.
That callback is executed later(potentially much later), sometime
afterchrome.tabs.create(object createProperties,the method returns.
Heres an example of function callback)the signature for an
asynchronous method: 17. Asynchronous vs.Synchronousare
synchronous.Other chrome.* methods Synchronous methods never have
acallback because they dont return untiltheyve completed all their
work. Often, synchronous methods have a returntype.Consider the
DOMWindow
chrome.extension.getBackgroundPage()chrome.extensions.getBackgroundPage()method:
18. Example: Using acallback 19. Communicationbetweenpages 20.
Communicationbetweenwithin an extension oftenThe HTML pages
Pagesneed to communicate. Because all of an extensions pages
executein same process on the same thread, thepages can make direct
function calls to eachother. The HTML pages within an extension
oftenneed to communicate. Because all of an extensions pages
executein same process on the same thread, thepages can make direct
function calls to each 21. Saving dataandIncognitomode 22. Saving
data &Incognito data using the HTML5Extensions can savemodeweb
storage API(such as localStorage) Or by making server requests that
result insaving data. Whenever you want to save something,
firstconsider whetherits from a window thats in incognito mode. By
default, extensions dont run in incognitowindows, and packaged apps
do. You need to consider what a user expects 23. Saving data
&Incognito modethe windowIncognito mode promises thatwill leave
no tracks. When dealing with data from incognitowindows, do your
bestto honor this promise. For example, if your extension
normallysaves browsing historyto the cloud, dont save history
fromincognito windows. On the other hand, you can store
yourextensions settings 24. Saving data & Incognito modeIf a
piece of data might showwhere auserhas been on the web or whatthe
userhas done,dont store it if its from anincognito window. 25.
Saving data &Incognito mode 26. Introducingto JSON 27. JSON
JavaScript Object Notation easy for humans to read and write easy
for machines to parse and generate based on a subset of the
JavaScriptProgramming Language, Standard ECMA-2623rd Edition
December 1999 text format that is completely languageindependent
uses conventions that are familiar toprogrammers ofthe C-family of
languages 28. JSON built 2 structuresA collection of name/value
pairs. In variouslanguages, thisisrealizedasan object, record,
struct, dictionary, hashtable,keyed list, or associative array.An
ordered list of values. In most languages,thisis realizedas an
array, vector, list, or sequence. 29. Object 30. Array 31. Value
32. String 33. Number 34. JSON Example manifest.json 35.
GoogleChromeExtensionsFeatures 36. Browser UIChanging the Google
Chrome chromeBrowser Actions Add icons to the toolbar
(extensionsonly)Desktop Notify users of important
eventsNotificationsOmnibox Add a keyword to the address barOption
PagesLet users customize your extensionOverride PagesImplement your
own version ofstandard browser pages such as theNew Tab pagePage
ActionsAdd temporary icons inside theaddress bar(extensions only)
37. Browser InteractionInteracting with Google in
otherwaysBookmarksCreate, organize, and otherwise manipulate the
users bookmarksCookiesExplore and modify the browsers cookie
systemEvents Detect when something interesting
happensHistoryInteract with the browsers record of visited
pagesTabs Create, modify, and rearrange tabs in the
browserWindowsCreate, modify, and rearrange windows in the browser
38. ImplementationImplementing the innards of
yourextensionAccessibilityMake your extension accessible to(a11y)
people with disabilitiesBackground Put all the common code for
yourPagesextension in a single placeContent-ScriptsRun JavaScript
code in the context of web pagesCross-Origin XHR Use XMLHttpRequest
to send and receive data from remote servers 39.
Implementation(cont.)Implementing the innards of
yourextensionInternationalizati Deal with language and
localeonMessage Passing Communicate from a content script to its
parent extension, or vice versaOptional Modify your extensions
permissionsPermissionsNPAPI PluginsLoad native binary code 40.
FinishingFinishing and distributing yourextensionAutoupdatingUpdate
extensions automaticallyHosting Host extensions on Google servers
oryour ownOther Distribute extensions on your networkDeploymentor
with other softwareOptionsPagingCreate a .crx file so you can
distributeyour extension 41. Development 42. Create and Load
anextension1. Create a folder somewhere on your computer to contain
your extensions code.2. Inside your extensions folder, create a
text file called manifest.json, and put this in it 43. Create and
Load anextension3. Copy this icon to the same folder:
http://www.box.com/s/6418basa92a0lyckshix4. Load the extension:
Bring up the extensions management pageby clicking the wrench
iconandchoosing 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 andinformation appear. Click the
Load unpackedextension button. A file dialog appears. 44. Create
and Load anextensionIf your extension is valid, its icon appears
next tothe address bar, and information about theextension appears
in the extensions page, as thefollowing screenshot shows 45. Add
code to the extensionhttp://www.box.com/s/82e9lh yvh8ri6o8cs61e 46.
Add code to the extensionReturn to the extensionsmanagement
page,and click the Reload button toload thenewversion of the
extension Click the extensions icon. Apopup should appear that
displays the contents of popup.html 47. Add code to theextension
48. Deployment 49. Extensions forChromeContains extensions for
Chrome, whichchange how the browser behaves and, in alimited way,
how it looksIf your extension seems more like a websitethan a small
browser add-on, consider making ita packaged app. Packaged apps
areimplemented as extensions that have theadditional ability to
present an app-like interface 50. Extensions forChrome manifest,
andEvery app has a most likelyicons, thatyou putintoa ZIP file and
upload to the Chrome Developer Dashboard.The Chrome Web Store takes
the contents ofthis ZIP file and puts them in a
cryptographicallysigned .crx file. Users download this .crx andTo
create installable webappsfilewhen they click the
youextensions,Install button for your appshouldbefamiliar with
HTML, JavaScript, and CSS. Ifyoure targeting Chrome exclusively,
you candepend on HTML5 and the other emerging APIsthat Chrome
supports 51. Extensions forChrome 52. Uploading andPublishingTo
publish apps to the Chrome Web Store, youfirstuse theChrome
Developer Dashboard to upload yourapp and specifyhow its listing
should look. Then you can publishit either to theworld at large or
to a few trusted testers. 53. Uploading andPublishing 54. Uploading
and Publishing9 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: 55.
Uploading and Publishing9 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: 56. Benefits 57.
SpeedChrome has taken it a step further.Chrome is the ultimate in
fastbrowsing. With Internet connectionsgetting faster and faster, a
browsershould be able to keep up with thepace of rendering images
andcontent, which is what Google havemanaged to do perfectly. 58.
SimplicityChrome on the other hand hasarranged everything in an
organizedmanner, meaning the focus remainsentirely on what it
should be browsing the Internet. 59. ExtensionsThe extension
support in Chrome hasbeen done fantastically. The ease ofinstalling
new plugins means norestart is needed, and the browserspeed doesnt
suffer when lots ofextensionsareinstalled.Thefunctional support for
add-ons meansfull support for Grease Monkeyscripts too, which is a
great addedbonus.
