GitHub - dutiyesh/chrome-extension-cli: π The CLI for your next Chrome Extension
source link: https://github.com/dutiyesh/chrome-extension-cli
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
Chrome Extension CLI
The CLI for your next Chrome Extension. π
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:
- Open chrome://extensions
- Check the Developer mode checkbox
- Click on the Load unpacked extension button
- 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:
- Open chrome://extensions
- Check the Developer mode checkbox
- Click on the Load unpacked extension button
- 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.
Recommend
-
49
README.md This repo is the demo for Dan Shultz's tutorial "Creating A Ba...
-
27
My Notes is a note-taking app directly in Chrome. Available on Web Store. Features
-
35
Skip Ad Skip Ad is a Chrome Extension that can automatically close the video ads on YouTube, and also hide the video overlay ads (banners) and ads in the column next to the video.
-
13
How to create your first Chrome extensionOnce the DOM is loaded and parsed, the data stored in the nextImage key is retrieved from the Chromeβs local storage compartment for extensions. If this data exists, the setImage()
-
6
Find your new favorite Chrome extension from Google's top picks of 2021 By Will Sattelberg Published 1 day ago F...
-
9
[Chrome Extension] Try to Print Facebook Id Next to User Name February 21, 2018...
-
6
Chrome extension that saves & summarizes your tabsFree OptionsTLDR is a chrome extension that will bookmark and summarize the tabs in your browser. It's ti...
-
8
For your next side project, make a browser extension Reflections on the benefits of tweaking an existing app, instead of starting from scratch. In a
-
9
New GitHub CLI extension toolsSupport for GitHub CLI extensions has been expanded with new authorship tools and more ways to discover and install custom commands. Learn how to write powerful e...
-
3
How to Build Your Own SEO Chrome Extension With ChatGPT The author's views are entirely their own (excluding the unlikely event of hypnosis) and may not always refl...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK