Awesome
<img src="extension-folder/linter.png" height="50px"> in-browser-style-linter
Chrome extension / Firefox add-on
Do quick style checks on your page after it renders, without leaving your browser, and with minimal friction to setup (important for adoption):
- Add settings.
- Run in-browser. (Chrome/Firefox/IE)
- See red buttons.
Or follow this demo: https://youtu.be/eK5jMvivitQ
Side step the worry of whether your style will be overridden, or whether you're accurately testing/simulating the computed styles; make use of the fact that the browser already renders the styles that the user sees.
STEP 1: To add a setting, edit this part of the JS code:
// Enter your desired settings here:
var settings = [
{
selector: "a", // CSS selector
property: "color", // CSS property to check
expectedValues: ["red", "rgb(88, 96, 105)"], // acceptable expected values of property
// contains:true // OPTIONAL: boolean to say actual value can at least contain the expected value
// innerHTML:'Some innerHTML text.' // OPTIONAL: you can be more specific than CSS selectors
},
];
to something like this (try it on https://www.google.com):
// Enter your desired settings here:
var settings = [
{
s: "a",
p: "font-family",
v: "avenir",
i: "About",
},
{
s: "a.gb_d",
p: "font-family",
v: "avenir",
c: true,
},
{
s: ".gLFyf.gsfi",
p: "color",
v: ["#eee", "rgb(88, 96, 105)", "#3e3e3e"],
},
];
(For details, see more info.)
STEP 2: Set up your browser to run the JS code:
- Chrome extension: In-Browser Style Linter
- Chrome: snippets
- Firefox add-on: In-Browser Style Linter
- Firefox: console in Multi-line mode
- Internet Explorer: F12 > Console > paste the whole code into the terminal (paste after the ">" symbol on the bottom) > Ctrl+Enter (or hit run)
STEP 3: You'll see ugly red buttons, like this:
Hovering over the error button shows the expected and actual values. See this demo: https://youtu.be/eK5jMvivitQ
More info: (click to expand)
<details> <summary><strong>Basics ("SVP")</strong></summary>Minimal required info:
var settings = [
{
selector: "a", // a CSS selector like 'div span a:hover'
property: "color", // a CSS property
value: "red", // the expected value after page render
},
];
All parameters have short forms to let you save on keystrokes. Here's an equivalent to the example above:
var settings = [
{
s: "a", // s is for selector
p: "color", // p is for property
v: "red", // v (or ev) is for expected value
},
];
</details>
<details>
<summary><strong>c is for Contains Value</strong></summary>
To relax the matching of the property value to simply "contain" the expected value, set the optional contains parameter to true:
var settings = [
{
selector: "a",
property: "background",
value: "#333",
contains: true, // would not flag '#333 url("img_tree.gif") no-repeat fixed center' as error
},
];
All parameters have short forms to let you save on keystrokes. Here's an equivalent to the example above:
var settings = [
{
s: "a",
p: "background",
v: "#333",
c: true, // would not flag '#333 url("img_tree.gif") no-repeat fixed center' as error
},
];
</details>
<details>
<summary><strong>Multiple Allowable Values = []</strong></summary>
To specify several allowable expected values, use an array:
var settings = [
{
selector: "a",
property: "color",
value: ["red", "rgb(88, 96, 105)"],
},
];
This is also compatible with the "contains" option (see above).
</details> <details> <summary><strong>i Can Be More Specific with innerHTML</strong></summary>To specify elements that have a specific innerHTML (in addition to the CSS selector), set the optional parameter value:
var settings = [
{
selector: "a",
property: "color",
innerHTML: "Some innerHTML text.", // check the color of <a> tags with this innerHTML
value: "rgb(88, 96, 105)",
},
];
All parameters have short forms to let you save on keystrokes. Here's an equivalent to the example above:
var settings = [
{
s: "a",
p: "color",
i: "Some innerHTML text.", // check the color of <a> tags with this innerHTML
v: "rgb(88, 96, 105)",
},
];
</details>
<details>
<summary><strong>Modify Values in One Place</strong></summary>
You can use variables to update properties in one place instead of updating the whole settings array. For example:
var myColour = 'blue'; // you edit the value here, just one place
var settings = [
{
s:'button.btn.btn-info',
p:'background',
v:myColour
},
...
{
s:'a.some-fancy-button',
p:'background',
v:myColour
},
...
{
s:'label.consistent-styling-ftw'
p:'background',
v:myColour
}
];
And avoid situations like this:
var settings = [
{
s:'button.btn.btn-info',
p:'background',
v:'blue' // edit here
},
...
{
s:'a.some-fancy-button',
p:'background',
v:'blue' // and here
},
...
{
s:'label.consistent-styling-ftw'
p:'background',
v:'lightblue' // oops I forgot, where else do I have to change this?
}
];
</details>
Want to understand how the code works?
In my mind, the key line of code is this:
var elements = document.querySelectorAll(
selector + ":not(.in-browser-linter-button)"
);
If you want more details:
I recommend you start with reading the standalone snippet: https://github.com/hchiam/in-browser-style-linter/blob/master/linter.js
History alert: Pure JavaScript. No jQuery. This was originally just a snippet I'd copy and paste into Chrome DevTools.
Conceptual data flow in the extension-folder folder:
manifest.json -> popup.html (the settings popup) -> popup.js -> main.js -> (the summary popup)
Like this project?
A Chrome extension template repo: chrome-extension-template
Other Chrome extensions:
A Chrome extension project I helped tutor and contribute to: Habit-Tracker-Extension
A tool to quickly search links and menus (even if collapsed): quick-menu-search
Another Chrome extension (note: very experimental): select-hover-search
Another Chrome extension (note: very experimental): in-browser-test-automator
Firefox add-ons:
Check All Scripts with URLVoid
Want to make a linter in VS Code instead?
Custom VS Code linter template repo: custom-vscode-linter