Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dineshsy/pxtorem
A chrome extension to convert pixels to rem
https://github.com/dineshsy/pxtorem
chrome-extension reactjs webpack2
Last synced: 29 days ago
JSON representation
A chrome extension to convert pixels to rem
- Host: GitHub
- URL: https://github.com/dineshsy/pxtorem
- Owner: dineshsy
- License: mit
- Created: 2020-08-22T14:02:40.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-22T14:35:37.000Z (about 4 years ago)
- Last Synced: 2024-10-11T13:23:22.007Z (29 days ago)
- Topics: chrome-extension, reactjs, webpack2
- Language: JavaScript
- Homepage:
- Size: 704 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Px to Rem
### An easy way to convert pixels to rem while you code your designs. It makes your job quick and easy instead of depending on calculator and websites.
## Features
- Used ReactJs to write chrome extension
- Injecting extension to host page as content script
- Utilized the Chrome messaging API
- Isolated extension CSS using Iframe
## Installation
> Make sure you have latest **NodeJs** version installed
Clone repo
```
git clone https://github.com/dineshsy/PxtoRem.git
```
Go to `PxtoRem` directory run
```
yarn install
```
Now build the extension using
```
yarn build
```
You will see a `build` folder generated inside `[PROJECT_HOME]`
To avoid running `yarn build` after updating any file, you can run
```
yarn watch
```
which listens to any local file changes, and rebuilds automatically.
## Adding React app extension to Chrome
In Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.
Now click on the `LOAD UNPACKED` and browse to `[PROJECT_HOME]\build` ,This will install the React app as a Chrome extension.
> you may need to restart the browser
When you go to any website and click on extension icon, injected page will toggle.
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/dineshsy/PxtoRem/. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
## License
The repo is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
---
## Thanks to [react-chrome-extension](https://github.com/satendra02/react-chrome-extension/) for your inspiration.
```
We have open sourced the boilerplate of chrome extension with ReactJs using inject page strategy. Read [detailed blog](https://medium.com/@satendra02/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39)
The boilerplate is to quickly create a chrome extension using ReactJs, The motivation behind creating a boilerplate was:
1. Instead of chrome's ready-made popup, We wanted our own page injected into DOM as a sidebar for better UX.
2. We wanted to use ReactJs for the Component-based approach, Routing, and its build mechanism.
3. We need to make sure that the extension CSS should not conflict with the host page styles in any case.
```