Google Chrome Extension (nonfiction): Difference between revisions

From Gnomon Chronicles
Jump to navigation Jump to search
No edit summary
No edit summary
 
(5 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 web technologies like HTML, JavaScript, and CSS.
Chrome Extensions are written using HTML, JavaScript, and CSS: basically a web page that is hosted within Chrome and can access some additional APIs.


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.
== 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.


== Developing Chrome Extensions ==
* 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]] page summarizes Extension components and capabilities.
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 ==
Line 61: Line 89:


* [https://en.wikipedia.org/wiki/Google_Chrome Google Chrome] @ Wikipedia
* [https://en.wikipedia.org/wiki/Google_Chrome Google Chrome] @ Wikipedia
* [https://thoughtbot.com/blog/how-to-make-a-chrome-extension How to Make a Chrome Extension]


[[Category:Nonfiction (nonfiction)]]
[[Category:Nonfiction (nonfiction)]]

Latest revision as of 12: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: