Pros of web-extension-starter

• Cross-browser compatibility (Chrome, Firefox, Opera, Edge)
• More comprehensive boilerplate with additional features like content scripts and background scripts
• Includes a manifest.json generator for different browser versions

Cons of web-extension-starter

• More complex setup and configuration
• Larger project structure, which may be overwhelming for simple extensions
• Requires more dependencies and has a steeper learning curve

Code Comparison

chrome-extension-typescript-starter:

import './popup.css';

const nameElement = document.querySelector('#name') as HTMLInputElement;
const greetElement = document.querySelector('#greet') as HTMLParagraphElement;

nameElement.addEventListener('input', () => {
  greetElement.textContent = `Hello, ${nameElement.value}!`;
});

web-extension-starter:

import { browser } from 'webextension-polyfill-ts';

browser.runtime.onInstalled.addListener((): void => {
  console.log('Extension installed');
});

browser.browserAction.onClicked.addListener((): void => {
  console.log('Browser action clicked');
});

The chrome-extension-typescript-starter example shows a simple popup interaction, while web-extension-starter demonstrates cross-browser compatibility using the webextension-polyfill-ts library for browser APIs.