search

dwyl / learn-chrome-extensions

:globe_with_meridians: Discover how to build and deploy a Google Chrome Extension for your Project!
145 stars 25 forks source link

readme

Learn How to Build Chrome Extensions

Why?

Chrome Extensions are a whole other world of opportunity to build web-enabled tools!

Quick Facts

What?

Extensions are small programs that can modify and enhance the functionality of the Chrome browser. You write them using web standard web technologies (HTML, JavaScript, and CSS).

Chrome Extensions (or "Apps") allow you to create in-browser tools which add functionality to the browsing experience. In our case we want to let the person

How?

Permissions

Examples

Browser Action (When the person clicks on the Extension Icon)

Browser Actions allow you to add an icon to the browser e.g: browser action See: https://developer.chrome.com/extensions/browserAction

Example of a simple Browser Action is an icon which, when clicked alters the page background. See: examples/make_page_red

Display list of Bookmarks

Uses the bookmarks API to show a list of the person's bookmarks when they click on the icon (browser_action)

chrome-extension-bookmarks-viewer

See: examples/my_bookmarks

Change the src of Icon when clicked

Imagine your app wants to change the icon in response to an event or a notification: That's quite easy with the following line:

chrome.browserAction.setIcon({path:"icon-notification.png"});

see: examples/set_icon_path

Access Browser Data (Delete History)

Use the chrome.browsingData API to remove browsing data from a user's local profile.

browsingdata_api

The API only allows you to erase history, so its only useful for a limited set of applications.

see: https://developer.chrome.com/extensions/browsingData

Using Keyboad Shortcuts in your Extensions

Using the commands.onCommand we can issue keyboard commands to trigger events in our extension.

The commands are defined in the manifest.json file as:

"commands": {
  "toggle-feature": {
    "suggested_key": { "default": "Ctrl+Shift+Y" },
    "description": "Send a 'toggle-feature' event to the extension"
  },
  "_execute_browser_action": {
    "suggested_key": {
      "default": "Ctrl+Shift+F",
      "mac": "MacCtrl+Shift+F"
    }
  }
}

This can be useful for opening a background page (popup) to read content, e.g: imaging if your extension provided an instant messaging facility and you could see the latest messages from any page without needing to have the messenger open.

see: https://developer.chrome.com/extensions/commands

Using desktopCapture to Get a Snapshot of the Screen

desktopCapture allows you to capture the client's screen.

chrome-extension-capture-desktop

see: examples/desktop_capture and: https://developer.chrome.com/extensions/desktopCapture

Get the List of Signed in devices

The signedInDevices API gives you a list of all the devices the person has signed into using their Google account:

chrome-devices

see: examples/my_devices API: https://developer.chrome.com/extensions/signedInDevices

Notifications!

So you want to show people notifications in Chrome...?

chrome-ext-notifications

see: examples/notifications for "toast" notifier. API: https://developer.chrome.com/apps/notifications

Event Page > Alarms

'declarativeWebRequest' requires Google Chrome beta channel or newer

See:

History

Get the page visit history: https://developer.chrome.com/extensions/history#method-getVisits



Questions?

Q: Can we have both page_action and browser_action ?
A: No. But you can create multiple extensions and have them inter-communicate see: http://stackoverflow.com/questions/14519458/google-chrome-extension-browser-page-action and: https://developer.chrome.com/extensions/extension#event-onMessageExternal

Q: How can we check when the Tab/Page has finished loading?
A: Add an event listener:

chrome.tabs.onUpdated.addListener(function(tabId , info) {
    if (info.status == "complete") {
        // your code ...
    }
});

http://stackoverflow.com/questions/2149917/chrome-extensions-how-to-know-when-a-tab-has-finished-loading-from-the-backgr

Background Reading / Watching

Videos

Guides

Articles