extension-create 0.4.3 → 0.5.2

package/README.md

@@ -1,3 +1,5 @@
+> ### This project is under active development.
+
 [action-image]: https://github.com/cezaraugusto/extension-create/workflows/CI/badge.svg
 [action-url]: https://github.com/cezaraugusto/extension-create/actions
 [npm-image]: https://img.shields.io/npm/v/extension-create.svg
@@ -13,6 +15,7 @@ Create modern cross-browser extensions with no build configuration.
 
 - [Creating an extension](#creating-an-extension) — How to create a new extension.
 - [Getting started immediately](#getting-started-immediately) — Get work done in no time.
+- [I have an extension](#i-have-an-extension) - Use only specific parts of `extension-create`
 
 `extension-create` helps you develop cross-browser extensions with built-in support for module imports/exports, auto-reload, and more. Interested to know how it's being developed? [Every week I send emails about its progress](https://cezaraugusto.substack.com/). For goals, see the [wiki](https://github.com/cezaraugusto/extension-create/wiki/This-initiative).
 
@@ -34,14 +37,16 @@ You are done. Time to hack on your extension!
 
 ## Getting Started Immediately
 
-### Kickstart any sample from [chrome-extesions-sample](https://github.com/GoogleChrome/chrome-extensions-samples/)
+### Kickstart any sample from Chrome Extension Samples
+
+The [chrome-extensions-sample](https://github.com/GoogleChrome/chrome-extensions-samples/) project is a great way to kickstart developing your extension.
 
-The URL for the **make_page_red** sample is https://github.com/GoogleChrome/chrome-extensions-samples/tree/master/api/browserAction/make_page_red. We then copy the URL and paste it using the start command:
+If we go to the samples repository and look for an extension sample to work, let's say the [make_page_red](https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/mv2-archive/api/browserAction/make_page_red/) sample, all we need is to copy and paste it's URL as an argument for the start command:
 
-> Optimized for **git version 2.30.0**. Older versions are supported but download can take much longer.
+> Optimized for **git version 2.30.0**. Older versions are supported, but download can take much longer.
 
 ```sh
-npx extension-create start https://github.com/GoogleChrome/chrome-extensions-samples/tree/master/api/browserAction/make_page_red
+npx extension-create start https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/mv2-archive/api/browserAction/make_page_red/
 ```
 
 <p align="center">
@@ -50,9 +55,49 @@ npx extension-create start https://github.com/GoogleChrome/chrome-extensions-sam
 
 Will not only download the extension but also kickstart a Chrome instance in a fresh profile with your sample extension loaded and default auto-reload support. Try it yourself!
 
+### Use `Microsoft Edge` to kickstart any sample from [chrome-extesions-sample](https://github.com/GoogleChrome/chrome-extensions-samples/)
+
+You read it! Just run the command above with the `--browser=edge` flag:
+
+```
+npx extension-create start --browser=edge https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/mv2-archive/api/browserAction/make_page_red/
+```
+
+And see a Crome Extension sample running automatically. On Edge!
+
+## I have an extension
+
+`extension-create` was designed to have each command/major feature working as a standalone module. This is useful if you have your extension setup but want to benefit from specific features, such as the browser launcher w/ default auto-reload support. You have two ways of doing it.
+
+### Integrate `extension-create` via command line or npm scripts
+
+The first option is to just use the command line interface `extension-create` provides and add it to your npm scripts. Assuming you want your extension to run the `start` command (path argument can be omitted if the manifest file is on your extension root folder), here's how it should look in your `package.json`:
+
+```js
+{
+  // ...npm stuff,
+  "scripts": {
+    "start": "npx extension-create start"
+  }
+}
+```
+
+Will load your extension the same way the screenshot above demonstrates. This method is, in fact, what the [standard template does](https://github.com/cezaraugusto/extension-create/blob/main/create/steps/writePackageJson.js#L19-L21) when you run the create command `npx extension-create <extension-name>`.
+
+#### Using a specific browser for development
+
+| <img width=120 src="https://raw.githubusercontent.com/alrra/browser-logos/a94987f29719142668cdf960b3f624ce1a3c6aa8/src/chrome/chrome.svg?sanitize=true" alt="Chrome browser logo"> | <img width=120 src="https://raw.githubusercontent.com/alrra/browser-logos/a94987f29719142668cdf960b3f624ce1a3c6aa8/src/edge/edge.svg?sanitize=true" alt="Microsoft Edge browser logo"> |
+|-----------|---------|
+| Google Chrome ✅ | Microsoft Edge ✅ |
+
+If you want to target a specific browser, just pass the `--browser` flag to the start command (Chrome or Edge, soon others), like `npx extension-create start --browser=edge`.
+
+That's it!
+
+> _Hint: pass `all` instead of `edge` as an argument to load both Edge and Chrome at the same time!_
 ## What's next?
 
-See the [Wiki](https://github.com/cezaraugusto/extension-create/wiki) for stable updates and future project roadmap. If you're interesteed in the latest news, I write weekly about this project development at https://cezaraugusto.substack.com.
+See the [Wiki](https://github.com/cezaraugusto/extension-create/wiki) for stable updates and future project roadmap. If you're interested in the latest news, I write weekly about this project development at https://cezaraugusto.substack.com.
 
 ## License
 

package/create/README.md

@@ -1,4 +1,4 @@
-# @webextension/create
+# @extension-create/create
 
 > The `create` part of `extension-create` available as a standalone package.
 
@@ -7,7 +7,7 @@ This package stores all logic needed by `extension-create` to create new project
 ## Installation
 
 ```
-npm i @webextension/create
+npm i @extension-create/create
 ```
 
 ## Usage
@@ -18,33 +18,31 @@ There are two ways of using it:
 
 ```
 # Will create a new directory named `my-extension-hello`.
-npx @webextension/create my-extension-hello
+npx @extension-create/create my-extension-hello
 ```
 
 ### Imported CLI
 
-Alternatively, if you're using [commander](https://github.com/tj/commander.js), you can use `@webextension/create` to extend you CLI. This is what `extension-create` does.
+Alternatively, if you're using [commander](https://github.com/tj/commander.js), you can use `@extension-create/create` to extend you CLI. This is what `extension-create` does.
 
 ```js
 const {program} = require('commander')
-const createExtensionCLI = require('@webextension/create')
+const createExtensionCLI = require('@extension-create/create')
 
 const yourCreateProgram = program
 
-yourCreateProgram
-  .version(packageJson.version)
+yourCreateProgram.version(packageJson.version)
 
 createExtensionCLI(yourCreateProgram)
 
-yourCreateProgram
-  .parse(process.argv)
+yourCreateProgram.parse(process.argv)
 ```
 
 ## Program options table
 
-| Flag             | Argument                                                 | What it does |
-|------------------|----------------------------------------------------------|--------------|
-| -t, --template   | Path to the template used to bootstrap your extension    | Bootstrap your extension using a template |
+| Flag           | Argument                                              | What it does                              |
+| -------------- | ----------------------------------------------------- | ----------------------------------------- |
+| -t, --template | Path to the template used to bootstrap your extension | Bootstrap your extension using a template |
 
 ## Contributing
 

package/create/cli.js

@@ -17,12 +17,12 @@ const packageJson = require('./package.json')
 let projectName
 let templateName
 
-function createExtensionCLI (clientProgram = program) {
+function createExtensionCLI(clientProgram = program) {
   clientProgram
     .version(packageJson.version)
     .command('create', {isDefault: true})
     .usage('create <project-directory> [options]')
-    .action((cmd) => {
+    .action((_, cmd) => {
       const {args, template} = cmd
 
       projectName = args[0]

package/create/cli.test.js

@@ -15,11 +15,10 @@ describe('`create` command line interface', () => {
   })
 
   it('creates an extension with specified project name', async () => {
-    spawn.sync(
-      'node',
-      [createExtensionCLI, 'my-extension-home'],
-      {stdio: 'inherit'}
-    )
+    expect.assertions(1)
+    spawn.sync('node', [createExtensionCLI, 'my-extension-home'], {
+      stdio: 'inherit'
+    })
 
     const pathStat = await fs.stat(outputpath)
     const isDirectory = pathStat.isDirectory()

package/create/createExtension.js

@@ -14,9 +14,15 @@ const messages = require('./messages')
 const abortAndClean = require('./steps/abortProjectAndClean')
 const cleanTemplateFolder = require('./steps/cleanTemplateFolder')
 
-process.on('unhandledRejection', (error) => { throw error })
+process.on('unhandledRejection', (error) => {
+  throw error
+})
 
-module.exports = async function (workingDir, projectName, template) {
+module.exports = async function createExtension(
+  workingDir,
+  projectName,
+  template
+) {
   try {
     await createDirectory(workingDir, projectName)
 

package/create/messages/directoryHasConflicts.js

@@ -10,27 +10,25 @@ const path = require('path')
 const fs = require('fs-extra')
 const {log} = require('log-md')
 
-module.exports = async function (projectPath, conflictingFiles) {
+module.exports = async function directoryHasConflicts(
+  projectPath,
+  conflictingFiles
+) {
   const projectName = path.basename(projectPath)
 
-  log(
-    `Conflict! Directory \`${(projectName)}/\` includes conflicting files:`,
-    {gutter: true}
-  )
+  log(`Conflict! Directory \`${projectName}/\` includes conflicting files:`, {
+    gutter: true
+  })
 
   for (const file of conflictingFiles) {
     const stats = await fs.lstat(path.join(projectPath, file))
 
-    log(
-      stats.isDirectory()
-        ? `   📁 - ${file}/`
-        : `       📄 - ${file}`
-    )
+    log(stats.isDirectory() ? `   📁 - ${file}/` : `       📄 - ${file}`)
   }
 
   log(
     'You need to either rename/remove the files listed above,\n' +
-    'or choose a new directory name for your extension.',
+      'or choose a new directory name for your extension.',
     {gutter: true}
   )
 

package/create/messages/programHelp.js

@@ -7,7 +7,7 @@
 
 const {log} = require('log-md')
 
-module.exports = function () {
+module.exports = function programHelp() {
   log(`
     # Help center for the \`create\` command
 

package/create/messages/successfullInstall.js

@@ -9,7 +9,7 @@ const path = require('path')
 
 const {log} = require('log-md')
 
-module.exports = function (workingDir, projectName) {
+module.exports = function successfullInstall(workingDir, projectName) {
   const projectPath = path.join(workingDir, projectName)
   const relativePath = path.relative(workingDir, projectPath)
 

package/create/package.json

@@ -1,6 +1,5 @@
 {
   "license": "MIT",
-  "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/cezaraugusto/extension-create.git",
@@ -9,7 +8,7 @@
   "engines": {
     "node": ">=10"
   },
-  "name": "@cezaraugusto/create",
+  "name": "@extension-create/create",
   "version": "0.0.0",
   "description": "The create step of extension-create",
   "main": "./cli.js",

package/create/steps/abortProjectAndClean.js

@@ -10,7 +10,11 @@ const path = require('path')
 const fs = require('fs-extra')
 const {log} = require('log-md')
 
-module.exports = async function (error, workingDir, projectName) {
+module.exports = async function abortProjectAndClean(
+  error,
+  workingDir,
+  projectName
+) {
   const projectPath = path.resolve(workingDir, projectName)
 
   log('😑👎 Aborting installation.')
@@ -24,10 +28,9 @@ module.exports = async function (error, workingDir, projectName) {
       🚨 Unexpected creation error. This is a bug.
     `)
     log(`Please report: "${error}"`)
-    log(
-      'https://github.com/cezaraugusto/extension-create/issues/',
-      {gutter: true}
-    )
+    log('https://github.com/cezaraugusto/extension-create/issues/', {
+      gutter: true
+    })
   }
 
   log('🧹 - Removing files generated from project in:')

package/create/steps/cleanTemplateFolder.js

@@ -10,7 +10,7 @@ const {log} = require('log-md')
 
 const getTemplatePath = require('./getTemplatePath')
 
-module.exports = async function (template) {
+module.exports = async function createTemplateFolder(template) {
   // We don't want to delete local templates
   if (!template) {
     return

package/create/steps/createDirectory.js

@@ -12,16 +12,12 @@ const {log} = require('log-md')
 
 const messages = require('../messages')
 
-const allowlist = [
-  'LICENSE',
-  'node_modules'
-]
-
-module.exports = async function (workingDir, projectName) {
-  log(
-    `👍 Starting a new browser extension named **${projectName}**`,
-    {gutter: true}
-  )
+const allowlist = ['LICENSE', 'node_modules']
+
+module.exports = async function createDirectory(workingDir, projectName) {
+  log(`👍 Starting a new browser extension named **${projectName}**`, {
+    gutter: true
+  })
   const projectPath = path.resolve(workingDir, projectName)
 
   log(`🤞 - Checking if \`${workingDir}\` exists...`)
@@ -31,11 +27,11 @@ module.exports = async function (workingDir, projectName) {
   const currentDir = await fs.readdir(projectPath)
   const conflictingFiles = currentDir
     // .gitignore, .DS_Store, etc
-    .filter(file => !file.startsWith('.'))
+    .filter((file) => !file.startsWith('.'))
     // Logs of yarn/npm
-    .filter(file => !file.endsWith('.log'))
+    .filter((file) => !file.endsWith('.log'))
     // Whatever we think is appropriate
-    .filter(file => !allowlist.includes(file))
+    .filter((file) => !allowlist.includes(file))
 
   // If directory has conflicting files, abort
   if (conflictingFiles.length) {

package/create/steps/getTemplatePath.js

@@ -10,7 +10,7 @@ const path = require('path')
 const templatesDir = path.resolve(__dirname, '../templates')
 const templateTempDir = (template) => `__temp__${template}`
 
-module.exports = function (template) {
+module.exports = function getTemplatePath(template) {
   let thisTemplate
 
   if (template) {

package/create/steps/importExternalTemplate.js

@@ -13,29 +13,30 @@ const {log} = require('log-md')
 
 const templatesDir = path.resolve(__dirname, '../templates')
 
-module.exports = async function (workingDir, projectName, template) {
+module.exports = async function importExternalTemplate(
+  workingDir,
+  projectName,
+  template
+) {
   const projectPath = path.resolve(workingDir, projectName)
   const templateName = template
 
   try {
-    const tempTemplatePath = path
-      .join(templatesDir, `__temp__${templateName}`)
+    const tempTemplatePath = path.join(templatesDir, `__temp__${templateName}`)
 
     log(`⚙️  - Importing template \`${template}\` as requested...`)
     const {name, version} = await pacote.manifest(templateName)
 
-    await pacote
-      .extract(`${name}@${version}`, tempTemplatePath)
+    await pacote.extract(`${name}@${version}`, tempTemplatePath)
 
-    log((`🧰 - Installing **${projectName}** from template \`${templateName}\``))
+    log(`🧰 - Installing **${projectName}** from template \`${templateName}\``)
     const templateDirPath = path.join(tempTemplatePath, 'template')
 
     await fs.copy(templateDirPath, projectPath)
   } catch (error) {
-    log(
-      `😕❓ Can't find template __${templateName}__. ${error}`,
-      {gutter: true}
-    )
+    log(`😕❓ Can't find template __${templateName}__. ${error}`, {
+      gutter: true
+    })
     process.exit(1)
   }
 }

package/create/steps/importLocalTemplate.js

@@ -13,10 +13,9 @@ const {log} = require('log-md')
 const templatesDir = path.resolve(__dirname, '../templates')
 const defaultTemplate = 'standard'
 
-module.exports = async function (workingDir, projectName) {
+module.exports = async function importLocalTemplate(workingDir, projectName) {
   const projectPath = path.resolve(workingDir, projectName)
-  const templateDirPath = path
-    .join(templatesDir, defaultTemplate, 'template')
+  const templateDirPath = path.join(templatesDir, defaultTemplate, 'template')
 
   const templateName = path.basename(templateDirPath)
 
@@ -24,10 +23,9 @@ module.exports = async function (workingDir, projectName) {
     log(`🧰 - Installing **${projectName}** from standard template...`)
     await fs.copy(templateDirPath, projectPath)
   } catch (error) {
-    log(
-      `😕❓ Can't copy template __${templateName}__: ${error}`,
-      {gutter: true}
-    )
+    log(`😕❓ Can't copy template __${templateName}__: ${error}`, {
+      gutter: true
+    })
     process.exit(1)
   }
 }

package/create/steps/installDependencies.js

@@ -6,14 +6,14 @@
 //  ╚═════╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝
 
 const path = require('path')
-const fs = require('fs-extra')
 
+const fs = require('fs-extra')
 const spawn = require('cross-spawn')
 const {log} = require('log-md')
 
 const abortProjectAndClean = require('./abortProjectAndClean')
 
-module.exports = async function (workingDir, projectName) {
+module.exports = async function installDependencies(workingDir, projectName) {
   const projectPath = path.resolve(workingDir, projectName)
   const projectPackageJson = path.join(projectPath, 'package.json')
   const packageMetadata = require(projectPackageJson)
@@ -21,10 +21,7 @@ module.exports = async function (workingDir, projectName) {
   const dependencies = packageMetadata.dependencies || []
   const devDependencies = packageMetadata.devDependencies || []
 
-  if (
-    dependencies.length === 0 &&
-    devDependencies.length === 0
-  ) {
+  if (dependencies.length === 0 && devDependencies.length === 0) {
     log('⏭  - No dependencies. Skipping install step...')
 
     return

package/create/steps/writePackageJson.js

@@ -20,16 +20,16 @@ const packageJsonScripts = {
   start: 'extension-create start'
 }
 
-module.exports = async function (workingDir, projectName, template) {
+module.exports = async function writePackageJson(
+  workingDir,
+  projectName,
+  template
+) {
   const projectPath = path.resolve(workingDir, projectName)
 
-  const templatePath = path.resolve(
-    templatesDir,
-    getTemplatePath(template)
-  )
+  const templatePath = path.resolve(templatesDir, getTemplatePath(template))
 
-  const templateJsonPath = path
-    .resolve(templatePath, 'template.json')
+  const templateJsonPath = path.resolve(templatePath, 'template.json')
 
   const templateJson = require(templateJsonPath)
 

package/create/templates/standard/template/manifest.json

@@ -3,29 +3,25 @@
   "version": "1.0",
   "name": "Welcome Extension",
   "description": "An extension to welcome you!",
-	"icons": {
-		"16": "public/icon/test_16.png",
-		"32": "public/icon/test_32.png",
-		"48": "public/icon/test_48.png",
-		"64": "public/icon/test_64.png"
-	},
-	"permissions": [
-		"tabs"
-	],
-	"web_accessible_resources": [
-		"public/*"
-	],
-	"browser_action": {
-		"default_icon": {
-			"16": "public/icon/test_16.png",
-			"32": "public/icon/test_32.png",
-			"48": "public/icon/test_48.png",
-			"64": "public/icon/test_64.png"
-		},
-		"default_popup": "popup/popup.html",
-		"default_title": "Welcome Extension"
-	},
-	"chrome_url_overrides": {
-		"newtab": "newtab/newtab.html"
-	}
+  "icons": {
+    "16": "public/icon/test_16.png",
+    "32": "public/icon/test_32.png",
+    "48": "public/icon/test_48.png",
+    "64": "public/icon/test_64.png"
+  },
+  "permissions": ["tabs"],
+  "web_accessible_resources": ["public/*"],
+  "browser_action": {
+    "default_icon": {
+      "16": "public/icon/test_16.png",
+      "32": "public/icon/test_32.png",
+      "48": "public/icon/test_48.png",
+      "64": "public/icon/test_64.png"
+    },
+    "default_popup": "popup/popup.html",
+    "default_title": "Welcome Extension"
+  },
+  "chrome_url_overrides": {
+    "newtab": "newtab/newtab.html"
+  }
 }

package/create/templates/standard/template/newtab/newtab.html

@@ -1,16 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>New tab page</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <div class="hello-box">
       <header>
-        <img src="../public/puzzle.png" alt="A puzzle icon">
+        <img src="../public/puzzle.png" alt="A puzzle icon" />
         <h1>Welcome to your extension</h1>
         <p class="description loading">Browser extensions are 🙌🙌🙌</p>
       </header>

package/create/templates/standard/template/newtab/styles.css

@@ -16,7 +16,8 @@ body {
   max-width: 600px;
   padding: 40px;
   margin: auto;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 img {
@@ -31,7 +32,6 @@ h1 {
   color: #00214d;
 }
 
-
 p {
   font-family: 'Courier New';
   font-size: 1.25rem;

package/create/templates/standard/template/popup/popup.css

@@ -17,10 +17,10 @@ main {
 h1 {
   font-size: 2.5rem;
   line-height: 1;
-  color: #27FBB7;
+  color: #27fbb7;
   margin: auto;
 }
 
 div {
   font-size: 4rem;
-}
+}

package/create/templates/standard/template/popup/popup.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>Popup page</title>
-    <link rel="stylesheet" href="./popup.css">
+    <link rel="stylesheet" href="./popup.css" />
   </head>
   <body>
     <main>

package/create/templates/standard/template.json

@@ -1,6 +1,5 @@
 {
   "package": {
-    "devDependencies": {
-    }
+    "devDependencies": {}
   }
 }