Cheaty

Extension for the web that feels illegal
Website · Demo · Download · Report Bug · Request Feature

About

Cheaty is a simple open-source web extension that allows you to do quick actions on HTML components without going into the inspector console.

With Cheaty you can:

• Hide or display an HTML component on the page.
• Switch a text input between text and password type.
• Copy the outer HTML of an HTML component^?

Getting Started

Installation

Install the extension here and make sure to enable it in your browser's settings.

Warning: The extension is not meant to work on mobile devices.

Using the extension

Starting the process

You can start using the extension by using this shortcut:

Ctrl + Alt + N

This will enable the Selection mode, change your cursor and add a border around the current hovered HTML component.

Note that all your keys will be disabled while you're in this mode. Press Escape to leave it.

Select a component

Once you are in Selection mode, you can pick the HTML component you want by hovering it with your mouse or using the arrow keys.
Select the component by clicking on it or by pressing the Enter key. You have now enabled the Action mode and a menu appeared next to your selected HTML component. To go back to Selection Mode press Escape. (Press Escape twice to stop the extension).

You have 2 buttons that allow you to Copy the outerHTML^? of your component or to Hide it from the page.

You can click on Show to make the HTML component reappear.

Passwords

When selecting an input text^? you have a new button in the action menu that allows you to Hide/Show the password.

When the input is a password

You can as well switch back to password

Here is the list of all the working input:

• text
• email
• password
• search
• tel
• url

Warning: Note that every change you make only works for This instance of This page. Meaning that going to another page or reload the page will reset everything.

Popup

You can open the extension popup by clicking on this icon in the extension bar of your browser:

By default, if you didn't use the extension yet, there is not a lot to see except links to the Parameters and the Cheaty Website:

Once you have edited the page with the extension, all the HTML components edited appear in the popup, named with their type^? and id^?:

You can now revert all your change by simply clicking on the buttons on the right.

Inspector Mode

In all browsers you have an Inspector that allows you to see the type^?, id^? and classes^? of the HTML components. Here is an example on Chrome:

You can enable a similar feature for Cheaty in the parameters^? of the extensions:

Once enabled you can now see when on Selection Mode the type^?, id^? and classes^? of the HTML components you're hovering.

Contributing

Ideas and discussions

Have an awesome idea for a new feature? Please open an issue describing your idea!

Reporting bugs

Something is not working as it should? Please open an issue giving as much information as you can.

• Title - Summarize what the bug is with specific details.
• Summary - If the title is too long, include a summary with additional details.
• Visual/Screenshot - A picture is always worth the time. Include one if possible.
• Expected/Actual Results - Explain what you expected to happen and what happened.
• Steps to Reproduce - The steps to follow should be comprehensive, easy to understand, and short. We want to experience the bug first-hand.

Fixing an issue

Since this project is open-source, you can also help by reviewing some of the existing issues. Please make sure you have the prettier extension installed on your IDE.

Contact

Nicolas Renault - Website - Github

Project Link: https://github.com/NicolasRenault/cheaty-webextension

Resources

• Web Extensions

License

MIT © Nicolas Renault