What are the best tools to inject CSS and JavaScript into web pages?
Asked by
ColorfulNinja87
I'm looking for ways to modify the CSS and JavaScript on websites directly from my browser tab. As someone who is color-blind, it would be super helpful to change colors or adjust layouts. I remember there was a tool I used in the past, but can't recall its name. What are some of the tools or extensions that you all use for this type of task?
Answers
If you're thinking about using a browser extension, I'd recommend Stylus. It's great for applying custom styles, switching to dark themes, or hiding elements you don’t want to see.
Reply to this answer
Tampermonkey is a popular choice for injecting user scripts. It lets you run custom scripts tailored to specific URLs. While it doesn't directly inject CSS, you can easily modify styles using JavaScript to meet your needs.
Reply to this answer
You could also go old school with a bookmarklet. Just create one that runs the necessary JavaScript to inject `` and `` tags directly into the page's DOM. Just click it whenever you need those changes!
Reply to this answer
Absolutely! Tampermonkey is my go-to too. If you want to inject CSS, you can use the `GM_addStyle` function in your scripts. Just set up your user script with the right match URL, and you can manage your styles effectively. Here’s a quick example:
```javascript
// ==UserScript==
// @name Example
// @namespace ex
// @description Example
// @version 1
// @match https://example.com/*
// @grant GM_addStyle
// ==/UserScript==
const styles = `
.foo {
color: red;
}
`;
(() => {
GM_addStyle(styles);
})();
```
Reply to this answer
Add your answer
Answers are reviewed before publication.
Related Discussions