Chrome Extension Development - The Basics

Learn what a chrome extension is from a developer's view, built with html, css, and javascript, using the chrome api to tailor the browser and inject code, a single-purpose tool.

Explore the manifest file, a JSON document at the root of a Chrome extension that dictates how it behaves, highlighting manifest version three, the name, and the version number.

Create your first Chrome extension by building a manifest.json with manifest version 3, name, and version. Add an icon and description to complete the minimal extension.

Enable developer mode and load an unpacked extension by selecting its folder with the manifest and icon to test your Chrome extension and inspect its version, name, and permissions.

Explore chrome extension permissions, including manifest, permissions, optional permissions, and host permissions, and learn how careful, runtime-granted access protects users and satisfies the store review process.

Add browser actions and browser commands in a Chrome extension by configuring the manifest with a default icon, popup, and title, then test with ctrl+shift+o.

Register and run a background service worker for a Chrome extension, using manifest background, Chrome.runtime onInstalled events, and the Action API to increment badge text on icon clicks.

Explore the Chrome Tabs API to create and modify tabs, use chrome.runtime.getURL to load index.html, and override the new tab with a custom page.

Create and manage Chrome extension context menu items using the contextMenus API, define permissions, use a handler map for page and selection actions, and log details via onclick listeners.

Inject content scripts to read and modify web pages by injecting CSS and JavaScript based on URL matches, enabling page-wide styling and data communication with the extension.

Learn to implement message passing between a background script and a content script in a Chrome extension, using chrome action onclick, tabs.query, and sendMessage.

Create a Chrome extension side panel by adding index.html and a background listener to open it on action click, and configure the manifest with side panel permissions.

Manifest v3 disallows remote hosted code in chrome extensions, preventing loading third-party scripts from a CDN; bundle libraries locally or call a server for logic to maintain security.

Learn chrome extension development by building a momentum-inspired new tab extension that displays a new image, the time, and a personalized name, using tab manipulation and local storage.

Create a basic Chrome extension by writing a manifest.json (version 3), configuring a browser action and chrome_url_overrides to open a custom index.html, and setting up HTML, CSS, and image assets.

Learn to build a basic Chrome extension with manifest, index.html, css, and images; implement a background script and a self-invoking script to display time and random backgrounds.

Add storage options to a chrome extension using sync storage, request permissions, and update the user interface to save and display the user's name with show and hide logic.

Summarize extension overview by adding a context menu option that searches the selected word in a new tab using the tabs API and local storage for a preferred search engine.

Write a manifest file with manifest version three, define name and description, add 128 by 128 icons and a browser action with a default popup, then create index.html and index.css.

Add context menu permissions and a background service worker, create a text-selection menu item, then open a new tab with a URI-encoded search of the selected text.

Add storage permission and use chrome storage sync to save a search engine in a popup, then dynamically build search URLs from a URL map based on the stored selection.

Prepare your extension for publishing by zipping the project with the manifest at root and proper image paths, then remove unused code and minimize permissions.

Boost visibility in the Chrome web store by optimizing your listing with a title and promo tiles, adding a video, and using analytics and reviews to refine updates and seo.

Bundle and zip an update package for your Chrome extension, then upload it in the developer dashboard package tab. Increment the version number each time to avoid invalid version errors.

Port Chrome extensions to other browsers by checking web extension API compatibility. Compare Chrome tabs with browser tabs and note async differences, then port case by case.

Thank you for joining the chrome extension development basics course and exploring the chrome extension development process; feel free to reach out via Twitter for questions.