Local overrides in chrome – keep active while devtools are closed

Question

I really like the local overrides feature in Chrome. While it is handy during development, I'd also like to use it while my devtools are closed. If this were possible, it could replace extensions that inject custom css or js into the page. (right now, after loading a page, overrides do not kick in until devtools have been opened at least once)

After some digging, I got the impression it's not possible though. Can somebody please confirm this? Is there any way to achieve the desired effect (custom js & css) without extensions?

Hefty

Many devtools features can be invoked via protocol message in chrome.debugger API for extensions, but I don't see this one listed. There are no other methods. – Ogle

In case of someone would want achieve this with chrome extension you can use: chrome.google.com/webstore/detail/custom-javascript-for-web/… – Biggs

@KayceBasques's article about using the DevTools Without Opening DevTools appears to have gone down or been removed, here's the archived URL: web.archive.org/web/20200121044711/https://… – Trollop

Answer 1

Local Overrides in Chrome's DevTools are indeed a powerful feature for development, allowing you to persist changes to CSS, JavaScript, and other resources locally. However, as you noted, these overrides are only active while the DevTools are open and do not persist across sessions when the DevTools are closed.

To achieve the desired effect of injecting custom CSS and JS without using extensions and without needing to open DevTools every time, here are a few alternative approaches:

1. Custom User Scripts with Tampermonkey or Greasemonkey Tampermonkey (for Chrome) and Greasemonkey (for Firefox) are popular browser extensions that allow you to create and manage custom user scripts. These scripts can inject custom CSS and JS into web pages.

• Tampermonkey: Download from Chrome Web Store

2. Stylus for Custom CSS Stylus is a user style manager that allows you to easily apply custom CSS to websites.

• Stylus: Download from Chrome Web Store

3. User Stylesheets (For Custom CSS) If you only need to apply custom CSS, you can create a custom user stylesheet and configure your browser to use it. This approach varies by browser, but for Chrome, you can use the Stylish or Stylus extension mentioned above.

4. Developing a Custom Chrome Extension If you're comfortable with a bit of coding, developing a custom Chrome extension is a powerful way to inject both CSS and JS into web pages. This would allow you to create a lightweight, personalized solution.

Here's a basic outline of what you'd need to do:

• manifest.json: Define your extension's permissions and content scripts.
• content.js: Write your custom JS.
• styles.css: Write your custom CSS.
• Injecting Scripts: Use the content script to inject the CSS and JS into the desired web pages.

Example manifest.json:

{
  "manifest_version": 3,
  "name": "Custom Injector",
  "version": "1.0",
  "description": "Inject custom CSS and JS into web pages",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ]
}

Example content.js:

// Your custom JS here
console.log('Custom JS loaded');

Example styles.css:

/* Your custom CSS here */
body {
  background-color: #f0f0f0;
}

5. Using Bookmarklets For simple scripts, you can use bookmarklets. A bookmarklet is a bookmark that contains JavaScript code.

Example Bookmarklet:

You can create a new bookmark and set the URL to the JavaScript code prefixed with javascript:.

 javascript
javascript:(function() {
    // Your custom JS code
    alert('Hello, World!');
})();

Conclusion While Chrome DevTools Local Overrides cannot be used without keeping the DevTools open, these alternative methods should help you achieve the desired effect of injecting custom CSS and JS into web pages without relying on opening the DevTools every time.

Schoolmate