Add prettier and eslint (GoogleChrome#831)

* Ignores archived samples
* Uses eslint/recommended rules
* Runs prettier and eslint (including --fix) pre-commit via husky
* Adds new npm scripts: 'lint', 'lint:fix' and 'prettier'
* Does not lint inline js code
* Fix all prettier and eslint errors
* Add custom prettier rules
* Apply custom prettier rules
* Update readme to explain how to setup the repo
* addressed comments

.eslintignore

@@ -0,0 +1,3 @@
+_archive
+third-party
+node_modules

.eslintrc.js

@@ -0,0 +1,27 @@
+/* eslint-env node */
+module.exports = {
+  extends: ['prettier', 'eslint:recommended'],
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': ['error'],
+    'no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_'
+      }
+    ]
+  },
+  env: {
+    browser: true,
+    webextensions: true,
+    es2021: true,
+    jquery: true,
+    worker: true
+  },
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  }
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 ⚠️ If you have general Chrome Extensions questions, consider posting to the [Chromium Extensions Group](https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions) or [Stack Overflow](https://stackoverflow.com/questions/tagged/google-chrome-extension).
@@ -14,6 +13,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior, or file the issue is found in:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'

.gitignore

@@ -1,5 +1,5 @@
 *~
 *.DS_store
-
+node_modules
 # Temporary directory for debugging extension samples
 _debug

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,3 @@
+_archive
+third-party
+node_modules

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

CONTRIBUTING.md

@@ -1,17 +1,48 @@
-# Contributing to this Repository
+# How to Contribute
 
-Thank you for your interest in contributing!
+We'd love to accept your patches and contributions to this project.
 
-Send us your patches early and often and in whatever shape or form.
+## Before you begin
 
-## Legal
+### Sign our Contributor License Agreement
 
-Unfortunately there are some legal hurdles. Sorry about that.
+Contributions to this project must be accompanied by a
+[Contributor License Agreement](https://cla.developers.google.com/about) (CLA).
+You (or your employer) retain the copyright to your contribution; this simply
+gives us permission to use and redistribute your contributions as part of the
+project.
 
-This repository is a Google open source project, and so we require contributors to sign Google's open source Contributor License Agreement.
-It's easy to do, just click here to sign as an [individual](https://developers.google.com/open-source/cla/individual) or [corporation](https://developers.google.com/open-source/cla/corporate).
-Individuals can sign electronically in seconds (see the bottom of the page); corporations will need to email a PDF, or mail.
+If you or your current employer have already signed the Google CLA (even if it
+was for a different project), you probably don't need to do it again.
 
-We cannot accept PRs or patches larger than fixing typos and the like without a signed CLA.
+Visit <https://cla.developers.google.com/> to see your current agreements or to
+sign a new one.
 
-If your Github account doesn't show the name you used to sign, please mention your name in your PR.
+### Review our Community Guidelines
+
+This project follows [Google's Open Source Community
+Guidelines](https://opensource.google/conduct/).
+
+## Contribution process
+
+### Code Reviews
+
+All submissions, including submissions by project members, require review. We
+use GitHub pull requests for this purpose. Consult
+[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
+information on using pull requests.
+
+### Setting up your Environment
+
+If you want to contribute to this repository, you need to first [create your own fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+After forking chrome-extensions-samples to your own Github account, run the following steps to get started:
+
+```sh
+# clone your fork to your local machine
+git clone https://github.com/your-fork/chrome-extensions-samples.git
+
+cd chrome-extensions-samples
+
+# install dependencies
+npm install
+```

README.md

@@ -5,16 +5,16 @@ Note that Chrome Apps are deprecated. Learn more [on the Chromium blog](https://
 
 For more information on extensions, see [Chrome Developers](https://developer.chrome.com).
 
-**Note: Samples for Manifest V3 are still being prepared. In the mean time, consider referring to [_archive/mv2/](_archive/mv2/).**
+**Note: Samples for Manifest V3 are still being prepared. In the mean time, consider referring to [\_archive/mv2/](_archive/mv2/).**
 
 ## Samples
 
 The directory structure is as follows:
 
-* [api-samples/](api-samples/) - extensions focused on a single API package
-* [functional-samples/](functional-samples/) - full featured extensions spanning multiple API packages
-* [_archive/apps/](_archive/apps/) - deprecated Chrome Apps platform (not listed below)
-* [_archive/mv2/](_archive/mv2/) - resources for manifest version 2
+- [api-samples/](api-samples/) - extensions focused on a single API package
+- [functional-samples/](functional-samples/) - full featured extensions spanning multiple API packages
+- [\_archive/apps/](_archive/apps/) - deprecated Chrome Apps platform (not listed below)
+- [\_archive/mv2/](_archive/mv2/) - resources for manifest version 2
 
 To experiment with these samples, please clone this repo and use 'Load Unpacked Extension'.
 Read more on [Development Basics](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
@@ -119,3 +119,11 @@ Read more on [Development Basics](https://developer.chrome.com/docs/extensions/m
     </tr>
   </tbody>
 </table>
+
+## Contributing
+
+Please see [the CONTRIBUTING file](/CONTRIBUTING.md) 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](/LICENSE).

api-samples/action/demo/index.css

@@ -4,13 +4,13 @@ p {
 
 .flex {
   display: flex;
-  gap: .25em;
-  margin: .5em 0;
+  gap: 0.25em;
+  margin: 0.5em 0;
   align-items: flex-end;
 }
 
 .spaced {
-  margin: .5em 0;
+  margin: 0.5em 0;
 }
 
 .full-width {