https://github.com/dewski/open-rails-partial-chrome-extension
Chrome extension that supports opening Rails partials found on the page in VS Code
https://github.com/dewski/open-rails-partial-chrome-extension
chrome-extension rails
Last synced: 23 days ago
JSON representation
Chrome extension that supports opening Rails partials found on the page in VS Code
- Host: GitHub
- URL: https://github.com/dewski/open-rails-partial-chrome-extension
- Owner: dewski
- License: mit
- Created: 2023-06-01T17:32:53.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-07T18:15:26.000Z (almost 3 years ago)
- Last Synced: 2025-06-22T05:01:47.169Z (11 months ago)
- Topics: chrome-extension, rails
- Language: TypeScript
- Homepage: https://chrome.google.com/webstore/detail/open-rails-partial/njkledhjbnnemkphdnodpiodmnhkgdlc
- Size: 34.5 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Open Rails Partial Chrome Extension
Open the nearest Rails partial, action, [ViewComponent](https://viewcomponent.org/), or layout file containing a given element on the page in your editor of choice directly from the browser by inspecting an element. This extension will list all of the parent views that were rendered in the process so you can choose which file you'd like to open.
Install the [Chrome Extension](https://chrome.google.com/webstore/detail/open-rails-partial/njkledhjbnnemkphdnodpiodmnhkgdlc).
## Usage
### Installing the VS Code extension
Currently the only editor supported is VS Code using the [`dewski.open-rails-partial`](https://marketplace.visualstudio.com/items?itemName=dewski.open-rails-partial) VS Code extension. The VS Code extension is required because the filenames in the HTML comments generated by Rails are relative to the root of your project.
```erb
Users
```
VS Code requires the fullpath to open a file using the built-in URI handler (`vscode://file/path/to/file`). The VS Code extension will open the relative path in your most recent window. If you attempt to open a file that doesn't exist in the current workspace, make sure you switch to the workspace window containing your Rails project.
### Enabling `annotate_rendered_view_with_filenames`
For the Open Rails Partial browser extension to work, you must enable the `annotate_rendered_view_with_filenames` option in your Rails application. This will add HTML comments to the rendered view with the file name of each partial, action, ViewComponent, and layout for the rendered page.
```ruby
# config/environments/development.rb
Rails.application.configure do
# Annotate rendered view with file names.
config.action_view.annotate_rendered_view_with_filenames = true
end
```
It's recommended to only enable this option in development or staging environments.
## Browser Support
- ✅ [Chrome](https://chrome.google.com/webstore/detail/open-rails-partial/njkledhjbnnemkphdnodpiodmnhkgdlc)
- ❌ Safari - Coming soon
## Extension Development
To develop the extension, you'll need to install the dependencies and build the extension.
### Setup
```
npm install
```
### Build in watch mode
#### terminal
```
npm run watch
```
#### Visual Studio Code
Press `Ctrl + Shift + B` or `Cmd + Shift + B` to build the extension and listen for changes in development.
### Load extension to Google Chrome
1. Visit `chrome://extensions`
1. Enable **Developer mode** in the top right of your window
1. Click **Load unpacked** in the top left of your window
1. Locate and select the `dist` directory containing the built extension
### Test
`npx jest` or `npm run test`
### Prepare for distribution
To prepare the extension for distribution to the Chrome Web Store, you'll need to build the extension:
```
npm run build
```