Google Chrome Extension (nonfiction): Difference between revisions
No edit summary |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
A '''Google Chrome Extension''' is a browser extension that modifies Google Chrome. | A '''Google Chrome Extension''' is a browser extension that modifies [[Google Chrome (nonfiction)|Google Chrome]]. | ||
Chrome Extensions are written using | Chrome Extensions are written using HTML, JavaScript, and CSS: basically a web page that is hosted within Chrome and can access some additional APIs. | ||
== Developing Chrome Extensions == | |||
=== Getting started === | |||
A Chrome extension comprises HTML, CSS, and JavaScript. The extension JavaScript APIs which Chrome exposes. | |||
The first thing we need to do is create the project and all the files we need for our extension. Let’s start by creating a new directory that we’ll call “GTmetrix Extension.” We’ll put all the files we need for our extension in this new folder. Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files. | |||
All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know to properly load up the extension in Chrome. So we’ll create a manifest.json file and put it into the folder we created. You can leave the manifest file blank for now. | |||
Next we’ll need an icon for our extension. This just needs to be a 19x19px PNG file. You can get a sample icon from Google’s demo project that you can modify. | |||
Next we’ll need an HTML page to show when a user clicks our Browser Action, so we’ll create a popup.html file and a popup.js file in our “GTmetrix Extension” directory. | |||
* https://www.sitepoint.com/create-chrome-extension-10-minutes-flat/ | |||
=== Extensions Overview === | === Extensions Overview === | ||
| Line 29: | Line 41: | ||
=== Develop Extensions === | === Develop Extensions === | ||
Google's [https://developer.chrome.com/extensions/devguide Develop Extensions | Google's [https://developer.chrome.com/extensions/devguide Develop Extensions] page summarizes Extension components and capabilities. | ||
==== Customize extension user interface ==== | ==== Customize extension user interface ==== | ||
| Line 42: | Line 54: | ||
==== Expand Chrome DevTools ==== | ==== Expand Chrome DevTools ==== | ||
=== Content Scripts === | |||
Google's [https://developer.chrome.com/extensions/content_scripts Content Scripts] page states: | |||
<blockquote> | |||
Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them and pass information to their parent extension. | |||
Understand Content Script Capabilities: | |||
Content scripts can access Chrome APIs used by their parent extension by exchanging messages with the extension. They can also access the URL of an extension's file with chrome.runtime.getURL() and use the result the same as other URLs. | |||
</blockquote> | |||
== Distributing Chrome Extensions == | |||
They are distributed through Chrome Web Store, initially known as the Google Chrome Extensions Gallery. All users with a Google Account are able to add extensions after developing them. Many Chrome extensions, once installed, have access to the user's data. There are three levels of permissions that an app or extension may request. All extensions must have a clear and singular purpose. | |||
== In the News == | == In the News == | ||
Latest revision as of 11:38, 6 January 2022
A Google Chrome Extension is a browser extension that modifies Google Chrome.
Chrome Extensions are written using HTML, JavaScript, and CSS: basically a web page that is hosted within Chrome and can access some additional APIs.
Developing Chrome Extensions
Getting started
A Chrome extension comprises HTML, CSS, and JavaScript. The extension JavaScript APIs which Chrome exposes.
The first thing we need to do is create the project and all the files we need for our extension. Let’s start by creating a new directory that we’ll call “GTmetrix Extension.” We’ll put all the files we need for our extension in this new folder. Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files.
All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know to properly load up the extension in Chrome. So we’ll create a manifest.json file and put it into the folder we created. You can leave the manifest file blank for now.
Next we’ll need an icon for our extension. This just needs to be a 19x19px PNG file. You can get a sample icon from Google’s demo project that you can modify.
Next we’ll need an HTML page to show when a user clicks our Browser Action, so we’ll create a popup.html file and a popup.js file in our “GTmetrix Extension” directory.
Extensions Overview
Google's Extensions Overview page states:
Extensions are zipped bundles of HTML, CSS, JavaScript, images, and other files used in the web platform, that customize the Google Chrome browsing experience. Extensions are built using web technology and can use the same APIs the browser provides to the open web.
Extensions have a wide range of functional possibilities. They can modify web content users see and interact with or extend and change the behavior of the browser itself.
Consider extensions the gateway to making the Chrome browser the most personalized browser.
Getting Started Tutorial
Google's Getting Started Tutorial states:
Extensions are made of different, but cohesive, components. Components can include background scripts, content scripts, an options page, UI elements and various logic files. Extension components are created with web development technologies: HTML, CSS, and JavaScript. An extension's components will depend on its functionality and may not require every option.
Develop Extensions
Google's Develop Extensions page summarizes Extension components and capabilities.
Customize extension user interface
Build extension utilities
Modify and observe the Chrome Browser
Modify and observe the web
Package, deploy and update
Expand Chrome DevTools
Content Scripts
Google's Content Scripts page states:
Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them and pass information to their parent extension.
Understand Content Script Capabilities:
Content scripts can access Chrome APIs used by their parent extension by exchanging messages with the extension. They can also access the URL of an extension's file with chrome.runtime.getURL() and use the result the same as other URLs.
Distributing Chrome Extensions
They are distributed through Chrome Web Store, initially known as the Google Chrome Extensions Gallery. All users with a Google Account are able to add extensions after developing them. Many Chrome extensions, once installed, have access to the user's data. There are three levels of permissions that an app or extension may request. All extensions must have a clear and singular purpose.
In the News
Fiction cross-reference
Nonfiction cross-reference
- Google (nonfiction) - an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware.
- Google Chrome (nonfiction) - a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, and was later ported to Linux, macOS, iOS, and Android. The browser is also the main component of Chrome OS, where it serves as the platform for web apps.
External links:
- Google Chrome @ Wikipedia
- How to Make a Chrome Extension