Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


All your baseline are belong to us

Baseliner is a Chrome, Firefox, and MS Edge extension for perfectionist Front-End Developers and UX Designers.

This tool will add grid layer on top of any website to be used as a guidance when developing interfaces.


You can set the horizontal and vertical guides to match your specification.

For better experience, you can change the colour of the lines as well as the opacity, making it easier to compare the grid with your website design.

The offset field enables you to add some padding to the top of the grid, in case your grid starts lower down the page.

If the page you are testing has some styles getting in the way of Baseliner, you can enable Force Styles to apply !important to the extension styles.

Persistent Data

Baseliner will save current configuration values into the Chrome Storage API. This enables the user to have a persistent experience.

Issues? Bugs? Suggestions?

Please, open an issue and let us know about new features you wish we support or issues you've found while using the app.


Baseliner is an extension for Chrome, Firefox, and MS Edge

Manual Installation

You can also install Baseliner without using the Chrome Store, this is helpful if you want to use a new feature that was no published yet.

  1. Download this repo as a Zip file and extract it into a folder
  2. Open Chrome Extensions page: chrome://extensions/
  3. Click Load unpacked extension
  4. Find the folder from #1 and select it

Developer Notes


  1. After updating code & bumping manifest version, run yarn build
  2. Compress /build folder and submit it


  1. Replace manifest with firefox_addon/manifest.json, it has an extra field needed for Firefox

  2. Compress the files in the folder, not the folder itself (opposite of Chrome)

  3. Firefox doesn't like external files, so we need to copy workbox-sw.js into a local file and then reference it under build/service-worker.js like:


    workbox.setConfig({ modulePathPrefix: '/third_party/workbox/' });

MS Edge

Same steps as Chrome.


  1. Add Typescript
  2. Domain and website?
  3. Contribution notes

Future ideas

  1. Use chrome.tabs.insertCSS instead of creating style tag: the caveat is that removeCSS is not supported in Chrome yet (FF only)


All your baseline are belong to us




No releases published

Sponsor this project


No packages published