nextension
TypeScript icon, indicating that this package has built-in type declarations

2.2.2 • Public • Published

Nextension

An Advanced CLI Tool for Building Next.js Applications as Chrome Extensions

imageedit_16_4061035640

Table of Contents

  1. Introduction
  2. Features
  3. Installation and Usage
  4. Command Line Options
  5. Examples
  6. File Structure
  7. Troubleshooting
  8. Contributing
  9. License

Introduction

Nextension is an advanced CLI (Command Line Interface) tool designed for developers proficient in Next.js to easily convert their Next.js applications into fully functional Chrome extensions. With Nextension, developers can rapidly create Chrome extensions from their Next.js projects, enabling them to leverage the power of Next.js for building progressive web applications and taking advantage of the Chrome extension ecosystem for distribution.

Features

Nextension is equipped with a variety of features to simplify the process of transforming Next.js projects into Chrome extensions:

  • Seamless Next.js Integration: Maintains all Next.js capabilities during the conversion process.
  • Automatic Manifest Generation: Generates the required manifest.json file, adhering to the Chrome Extension Manifest format. If a manifest.json isn't found in your assets directory, it prompts you to generate a template.
  • HTML Code Beautification: Uses js-beautify to enhance readability and maintainability of the HTML code.
  • Assets Handling: Copies your assets directory to the output directory automatically, ensuring all necessary assets are included in your Chrome extension.
  • Package Manager Detection: Automatically identifies your project's package manager (npm, yarn, or pnpm) and uses it to run the build commands.
  • File Organization: Arranges your files into specific directories like scripts, styles, and icons, resulting in a clean directory structure.
  • Robust Error Handling: Logs any issues encountered during the build process, assisting in troubleshooting.

Installation and Usage

To install Nextension, ensure that you have Node.js version 14.0.0 or higher installed on your system.

Global Installation

For global installation, use the following command:

npm install -g nextension

This allows you to run nextension from any directory:

nextension [options]

Local Installation

For local installation (specific to a project):

npm install --save-dev nextension

After you've installed Nextension, you can run it in your project using the following command:

npx nextension [options]

Command Line Options

Option Alias Description
--help -h Run help command for options panel
--verbose -v Run with verbose logging
--generate-manifest -m Prompt to generate a manifest file if not present
--generate-background -b Prompt to generate a background script if not present
--generate-content -c Prompt to generate a content script if not present
--generate-popup -p Prompt to generate a popup script and HTML if not present
--generate-options -o Prompt to generate an options script and HTML if not present
--generate-action -a Prompt to generate an action script if not present

Examples

To use Nextension with verbose logging:

nextension --verbose
nextension -v

To generate a manifest file if not present:

nextension --generate-manifest
nextension -m

File Structure

File / Directory Description
dist/build.d.ts TypeScript definition file for build.js
dist/build.js Transpiled JavaScript file of build.ts
dist/build.js.map Source map file for build.js
dist/cli.d.ts TypeScript definition file for cli.js
dist/cli.js Transpiled JavaScript file of cli.ts
dist/cli.js.map Source map file for cli.js
dist/utils.d.ts TypeScript definition file for utils.js
dist/utils.js Transpiled JavaScript file of utils.ts
dist/utils.js.map Source map file for utils.js
src/build.ts TypeScript source file for the build process
src/cli.ts TypeScript source file for the CLI
src/utils.ts TypeScript source file for utility functions
package-lock.json Automatically generated file for any operations where npm modifies node_modules or package.json
package.json File that lists the packages your project depends on
README.md The file that contains the documentation for your project
tsconfig.json The configuration file for the TypeScript compiler

Troubleshooting

If you encounter any issues while using Nextension, please open an issue on GitHub.

Contributing

We appreciate contributions from the developer community! To contribute:

  1. Fork the Nextension repository on GitHub.
  2. Clone your forked repository to your local machine.
  3. Create a new branch for your contribution.
  4. Make your changes to the codebase.
  5. Ensure that all existing tests pass and add new tests as needed.
  6. Commit your changes and push them to your forked repository.
  7. Create a pull request from your branch to the main Nextension repository.

If you have any questions or need assistance with the contribution process, feel free to reach out to us on GitHub.

License

Nextension is open-source software released under the MIT License. Feel free to use and modify Nextension as per the terms of the license.


Thank you for choosing Nextension! We hope you find it a valuable tool for building powerful Chrome extensions with the ease and flexibility of Next.js. Happy coding!

Return to Top

Package Sidebar

Install

npm i nextension

Weekly Downloads

2

Version

2.2.2

License

MIT

Unpacked Size

82.5 kB

Total Files

15

Last publish

Collaborators

  • bankkroll