https://github.com/pixeldesu/tinkaton
Library to extract information from frontend frameworks
https://github.com/pixeldesu/tinkaton
frontend-frameworks reverse-engineering
Last synced: 6 months ago
JSON representation
Library to extract information from frontend frameworks
- Host: GitHub
- URL: https://github.com/pixeldesu/tinkaton
- Owner: pixeldesu
- License: agpl-3.0
- Created: 2025-03-25T17:16:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-07T17:49:19.000Z (12 months ago)
- Last Synced: 2025-04-12T06:49:41.211Z (12 months ago)
- Topics: frontend-frameworks, reverse-engineering
- Language: TypeScript
- Homepage:
- Size: 553 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Tinkaton
Tinkaton is a library that can be used to extract information from popular frontend framework entrypoints on websites.
> [!IMPORTANT]
> Tinkaton is a project made to tinker with web projects in an exploratory fashion, so it should be only used for educational purposes!
## Installation
You can get Tinkaton via NPM:
```shell
$ npm install tinkaton
```
Or directly in the browser:
```html
```
## Usage
```js
// If you want to use the ESM build, import Tinkaton
import Tinkaton from "https://unpkg.com/tinkaton/dist/tinkaton.js";
const tinkaton = new Tinkaton();
tinkaton.run(); // returns an array with extracted data for each entrypoint found
```
If you use the IIFE build `tinkaton.global.js`, you do the following:
```js
// Assuming you loaded tinkaton.global.js beforehand, either importing it through a script or another way
const tinkaton = new Tinkaton.default();
tinkaton.run();
```
## Supported Frameworks
| Framework | How is it detected? | What is extracted? |
|-----------|----------------------------------------------------------------------|----------------------------------------------------------------|
| Alpine.js | Elements with the `x-data` attribute | The data instance proxy |
| Livewire | Elements with the `wire:id` attribute | Livewire snapshot information (from the `__livewire` property) |
| Vue 2 | `#app` elements with a `__vue__` property | The entire root component |
| Vue 3 | `#app` elements with a `__vue_app__` property | The global properties of the Vue instance |
| React | Elements with `_reactRootContainer` or `__reactContainer` properties | All properties passed to components down the element tree |
| Stimulus | `window.Stimulus` being defined | The global Stimulus instance (`window.Stimulus`) |
| Turbo | `window.Turbo` being defined | The global Turbo instance (`window.Turbo`) |
| Ember | `window.Ember` being defined | The global Ember instance (`window.Ember`) |
| Backbone | `window.Backbone` being defined | The global Backbone instance (`window.Backbone`) |
| Knockout | `window.ko` being defined | The global Knockout instance (`window.ko`) |
All element-focused extractors also support being passed a custom selector that will be tested for matching properties!
## Development
To work on Tinkaton locally, you need a current version of Node.js and NPM on your development environment.
* Install required dependencies using `npm install`.
* Build the project files using `npm run build`.
* Check the project code style using:
* `npm run lint` for ESLint
* `npm run format-check` for Prettier
## Contributing
If you want to contribute to the project, please check out the [Contribution Guidelines](/.github/CONTRIBUTING.md)!
## License
tinkaton is licensed under [aGPL v3](./LICENSE).
_This project is not affiliated with Game Freak or the Pokémon Company and Tinkaton is solely used as a project name/mascot while all trademarks and copyrights are with their respective holders._