chrome-extension-cli

🚀 The CLI for your next Chrome Extension
授权协议 MIT License
开发语言 JavaScript
所属分类 应用工具、 终端/远程登录
软件类型 开源软件
地区 不详
投 递 者 姚凯歌
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Chrome Extension CLI

The CLI for your next Chrome Extension. ��

Chrome Extension CLI - The CLI for your next Chrome extension �� | Product Hunt Embed Chrome Extension CLI - The CLI for your next Chrome extension �� | Product Hunt Embed

Quick Overview

npm install -g chrome-extension-cli
chrome-extension-cli my-extension
cd my-extension
npm run watch

Then follow these instructions to see your extension:

  1. Open chrome://extensions
  2. Check the Developer mode checkbox
  3. Click on the Load unpacked extension button
  4. Select the folder my-extension/build

When you're ready to publish to Chrome Web Store, create a minified bundle with npm run build and then zip the build folder.

Get Started Immediately

You don’t need to install or configure Webpack.
Webpack comes in preconfigured, so that you can focus on the code.

Just create a project, and you’re good to go.

Creating an Extension

Installation

npm install -g chrome-extension-cli

Usage

chrome-extension-cli <project-name>

Example:

chrome-extension-cli my-extension

It will create a directory called my-extension inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-extension
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── config                    // Webpack with minimal configurations
│   ├── paths.js
│   ├── webpack.common.js
│   └── webpack.config.js
├── public
│   ├── icons
│   │   ├── icon_16.png
│   │   ├── icon_32.png
│   │   ├── icon_48.png
│   │   ├── icon_128.png
│   ├── *.html                // HTML files will vary depending on extension type
│   └── manifest.json
└── src
    ├── *.css                 // CSS files will vary depending on extension type
    └── *.js                  // JS files will vary depending on extension type

Once the installation is done, you can open your project folder:

cd my-extension

Inside the newly created project, you can run some built-in commands:

npm run watch

Runs the app in development mode.
Then follow these instructions to see your app:

  1. Open chrome://extensions
  2. Check the Developer mode checkbox
  3. Click on the Load unpacked extension button
  4. Select the folder my-extension/build

npm run build

Builds the app for production to the build folder.
Zip the build folder and your app is ready to be published on Chrome Web Store.

What's included?

Your environment will have everything you need to build a Chrome Extension:

  • ES6 syntax support.
  • A watch script to listen file changes and build automatically.
  • A build script to bundle JS, CSS, and images for production.

Extension types

With Chrome Extension CLI you can built any of the below extensions:

Popup

Add features to Active Tab.

Override page

Override default page like New Tab, Bookmarks, or History page.

DevTools

Add features to Chrome Developer Tools.

More information about templates.

CLI options

chrome-extension-cli my-extension --override-page

Creates an extension that overrides default New Tab page.
You can also pass other values to --override-page option to override other default pages like Bookmarks and History page.

chrome-extension-cli my-extension --override-page              // Override New Tab page
chrome-extension-cli my-extension --override-page=bookmarks    // Override Bookmarks page
chrome-extension-cli my-extension --override-page=history      // Override History page

chrome-extension-cli my-extension --devtools

Creates a Panel inside developer tools.

Contributing

See the contribution guide and join the contributors!

FAQs

See the FAQs.

License

Chrome Extension CLI is open source software licensed as MIT.


Many thanks to create-react-app for the inspiration with this readme file.

Jupiter Icon used in templates made by Freepik from www.flaticon.com.

  • mac 本地xampp的php redis 扩展安装失败 $ /Applications/XAMPP/xamppfiles/bin/phpize-5.4.31 Configuring for: PHP Api Version: 20100412 Zend Module Api No: 20100525 Zend Extension Api No: 220100525 $ clear $ /Appl

  • 之前找了不少如何开发谷歌插件的文章,结果发现都是些很基础的内容,并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢?如果通过webpack编译的话,就能使开发过程变得更舒服,使文件结构趋向模块化,并且打包的时候直接编译压缩代码。后来发现了vue-cli-plugin-chrome-ext插件,通过这个插件能很方便地用vue-cli3来开发谷歌插件,并能直接引用各种UI

  • 本文中所用到的测试工具如下 kmci: karma + mocha + chai + istanbul 此文只涉及在vue-cli3中如何集成以上工具,不再详细介绍各个工具 # mocha + chai 首先创建vue-cli3的项目 vue create unit-test 在预设环境中选择unit-test 随后选择mocha + chai 之后项目就自带了vue-cli帮我们集成的mocha

 相关资料
  • chrome-extension 是 Octo-Linker Chrome 扩展。 这款谷歌 Chrome 扩展允许您轻松地浏览 GitHub.com 上的文件和包。它非常支持JavaScript ,如package.json bower.json ES2015 import 和 CommonJS 声明,它也支持 PHP 的 composer.json 。其他语言不久也将被添加进这个扩展。 预览

  • 开源中国 (oschina.net) 谷歌浏览器插件,聚合开源中国每日最新资讯、推荐精品博客、最新收录开源软件等优质内容。 安装使用方式:通过 Chrome Web Store 下载 (注意打开方式) 安装使用方式:通过源码安装 git clone 本项目 打开 Chrome 浏览器 Extensions 页面 打开「Developer mode」 选择左上角「Load unpacked」之后选择

  • Angular Chrome Extension Scaffold Easily create Google Chrome Extensions (v3) using the latest version of Angular. The following scenarios/options are supported: Popup ✓ New Tab ✓ Options ✓ Service Wo

  • 查询英文单词的柯林斯释义的chrome扩展应用。支持划词翻译,数据来源于有道词典。接入扇贝生词本,快速记录新单词,方便未来复习。 使用说明 在配置页面可以设置划词翻译的模式 划词即翻译 按住(meta/ctrl)键 + 划词时翻译 双击划词翻译 快捷键ctrl+q打开右上角浮层,用于搜索单词 搜索成功的单词可以快速加入到扇贝生词本(词库,oauth接入,需要你有扇贝的帐号)中,用于复习 功能介绍

  • Tailwind/Alpine Chrome Extension Boilerplate This is a starting place for building a Web Extension with Tailwindcss & Alpinejs Basic Popup with Tailwind Alpine @click Works! Basic Options Installation

  • awesome-chrome-extension-boilerplate 一个超棒的基于 React & TypeScript & webpack 的 chrome 扩展开发模板 ✨ 特性 �� 支持修改 content scripts 代码自动重载扩展和刷新注入了 content scripts的页面,再也不用修改了 content scripts 后手动刷新扩展和页面了。 �� options