Convert Figma logo to code with AI

GoogleChrome logochrome-extensions-samples

Chrome Extensions Samples

15,866
8,372
15,866
58

Top Related Projects

Example Firefox add-ons created using the WebExtensions API

A curated list of awesome resources for WebExtensions development.

A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

Scaffold out a Chrome extension

Quick Overview

The GoogleChrome/chrome-extensions-samples repository is a collection of sample Chrome extensions provided by Google. It serves as a comprehensive resource for developers looking to create Chrome extensions, offering a wide range of examples that demonstrate various extension capabilities and APIs.

Pros

  • Extensive collection of sample extensions covering numerous use cases
  • Official examples from Google, ensuring best practices and up-to-date code
  • Well-organized repository structure, making it easy to find relevant examples
  • Includes both simple and complex extensions, catering to developers of all skill levels

Cons

  • Some older examples may not reflect the latest Chrome extension manifest versions
  • Limited documentation within individual samples; developers may need to refer to official Chrome extension documentation for detailed explanations
  • Not all samples are actively maintained, potentially leading to outdated code in some cases

Code Examples

  1. Basic background script (manifest v3):
// manifest.json
{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  }
}
// background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed');
});
  1. Content script injection:
// manifest.json
{
  "manifest_version": 3,
  "name": "Content Script Example",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}
// content.js
document.body.style.backgroundColor = 'red';
  1. Chrome storage API usage:
// Saving data
chrome.storage.sync.set({ key: 'value' }, () => {
  console.log('Data saved');
});

// Retrieving data
chrome.storage.sync.get(['key'], (result) => {
  console.log('Value currently is ' + result.key);
});

Getting Started

To get started with Chrome extension development using these samples:

  1. Clone the repository:

    git clone https://github.com/GoogleChrome/chrome-extensions-samples.git
    
  2. Navigate to a specific sample directory.

  3. Load the extension in Chrome:

    • Open chrome://extensions/
    • Enable "Developer mode"
    • Click "Load unpacked" and select the sample directory
  4. Modify the sample code to suit your needs and experiment with different Chrome extension APIs.

Competitor Comparisons

Example Firefox add-ons created using the WebExtensions API

Pros of webextensions-examples

  • Cross-browser compatibility focus, supporting multiple browsers
  • Comprehensive documentation with detailed explanations for each example
  • Regularly updated to reflect the latest Web Extensions API changes

Cons of webextensions-examples

  • Fewer examples compared to chrome-extensions-samples
  • Less focus on advanced or complex extension scenarios
  • May not cover some Chrome-specific features or APIs

Code Comparison

webextensions-examples (from borderify example):

document.body.style.border = "5px solid red";

chrome-extensions-samples (from hello-world example):

let changeColor = document.getElementById("changeColor");
chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
});

The webextensions-examples code is simpler and more generic, while the chrome-extensions-samples code demonstrates Chrome-specific APIs and more complex functionality.

A curated list of awesome resources for WebExtensions development.

Pros of Awesome-WebExtensions

  • Curated list of resources, tools, and libraries for cross-browser extension development
  • Includes a wider range of topics, such as debugging tools, boilerplates, and testing frameworks
  • Community-driven with contributions from various developers

Cons of Awesome-WebExtensions

  • Lacks official Google Chrome documentation and examples
  • May not be as up-to-date with the latest Chrome-specific features
  • Does not provide complete, ready-to-use extension samples

Code Comparison

chrome-extensions-samples:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

Awesome-WebExtensions (using webextension-polyfill):

browser.runtime.onInstalled.addListener(() => {
  browser.browserAction.setBadgeText({
    text: "OFF",
  });
});

The main difference is that Awesome-WebExtensions often uses the browser namespace from the WebExtension polyfill, which provides cross-browser compatibility, while chrome-extensions-samples uses the Chrome-specific chrome namespace.

A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

Pros of webextension-polyfill

  • Provides a unified API for cross-browser extension development
  • Simplifies the process of porting Chrome extensions to Firefox
  • Offers Promise-based APIs for asynchronous operations

Cons of webextension-polyfill

  • Limited to browser API compatibility, doesn't cover all Chrome-specific features
  • May introduce a slight performance overhead due to the abstraction layer
  • Requires additional setup and integration into existing projects

Code Comparison

chrome-extensions-samples:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

webextension-polyfill:

browser.tabs.query({active: true, currentWindow: true}).then((tabs) => {
  browser.tabs.sendMessage(tabs[0].id, {greeting: "hello"}).then((response) => {
    console.log(response.farewell);
  });
});

The webextension-polyfill example uses Promises and the browser namespace, making it more compatible with Firefox and easier to work with asynchronous operations. The chrome-extensions-samples example uses callback-based APIs specific to Chrome, which may require more adaptation for cross-browser compatibility.

Scaffold out a Chrome extension

Pros of generator-chrome-extension

  • Provides a scaffolding tool for quickly generating Chrome extension projects
  • Offers customizable templates and options for different extension types
  • Integrates with modern build tools and workflows

Cons of generator-chrome-extension

  • Less comprehensive than chrome-extensions-samples in terms of example variety
  • May require additional setup and configuration for complex extensions
  • Not officially maintained by Google, potentially less up-to-date with latest Chrome APIs

Code Comparison

chrome-extensions-samples:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

generator-chrome-extension:

yo.extend({
  initializing: function () {
    this.pkg = require('../package.json');
  },
  prompting: function () {
    // Prompt users for options
  }
});

The chrome-extensions-samples repository focuses on providing ready-to-use examples of various Chrome extension features, while generator-chrome-extension offers a project generation tool for creating extension boilerplates. The code snippets demonstrate the difference in focus, with chrome-extensions-samples showing API usage and generator-chrome-extension illustrating project scaffolding.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Chrome Extensions samples

Official samples for Chrome Extensions and the Chrome Apps platform. (Chrome Apps are deprecated. Learn more on the Chromium blog).

For more information on extensions, see Chrome Developers.

Explore samples

The directory structure is as follows:

You can also use the Samples page to discover extensions by type, permissions, and extension API.

Installation

To experiment with these samples, please clone this repo and use 'Load Unpacked Extension'. Read more on Development Basics.

Contributing

Please see the CONTRIBUTING file for information on contributing to the chrome-extensions-samples project.

License

chrome-extensions-samples are authored by Google and are licensed under the Apache License, Version 2.0.