CodeZen is a chrome extension aimed at providing various features/quick tools for codepen.io. The extension can help in various tasks such as providing distraction free view via ZEN Mode or Focus Mode. It can also help in managing Favorites. More on it's features and development plans can be found below.
- FOCUS Mode - A distraction free mode that focuses on editor (code) pane only and nothing else (available via context menu).
- ZEN Mode - A distraction free mode (along with full screen) that focuses on editor (code) pane only and nothing else. (available via context menu)
- DEFAULT Mode - As the name suggestes, its the default mode with no additional changes. (available via context menu)
- CHANGE VIEW - Provides way to change various types of pages of a pen like Editor View, Details View, Full Page View etc. (available via context menu)
- Option to change/toggle editor layout/position
- Ability to access most of the features via key binding (default)
- Favorite Manager (Add pen/post/project to favorites). Available on a separate page as well as in popup.
- RSS Reader for following:
- CodePen Spark
- CodePen Jobs
- CodePen Blog
- Editor Picked Pens
- Popular Pens
- Recent Pens
- Editor picked Blog Posts
- KeyBindings toggles
- Console in view
- Clear console
- Open live view in new window
- Push notification for RSS Updates
- Settings Page
- Way to add custom key bindings for various features
- RSS Settings
- Manage Notifications
- Default link opening behaviour
- Feedback Form / Contact Dev
- Introduction page with instructions on how to use the extension
- Feedback page and form on extensoin uninstallation
- Show logged in user info (experimental)
- Quick links for Dashboard links such as pens, posts, collections, projects, support, documentation etc.
- Show username/followers/following (experimental)
- Last visited Codepen on Date
- View raw html/js/css of pen
This chrome extension is currently in development phase hence it s not available on chrome store. Once it is done, I'll update the link here. Till then, you can download this repository and manually load the extension in your chrome browser. Here are the steps to load the chrome extension:
- Open the Extension Management page by navigating to chrome://extensions.
- The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the LOAD UNPACKED button and select the extension directory.
More instructions regarding chrome extensions and its development can be found at https://developer.chrome.com/extensions/getstarted
You can send me an email at tusharshuklaa@gmail.com. Please mention Repository name in subject line when sending the email.
I try to update this repository whenever I get time, which is often very less :( Please read CONTRIBUTING.md for details on code of conduct, and the process for submitting pull requests.
I'm just making this extension for my own utility (also for those codepen lovers who may like to use such features). Most of the features belong to CodePen only and I'm just adding extra functionalities to it via extension. If you may encounter any problem regarding this extension or you may have an idea to make it better, feel free to let me know of it.