How to persist CSS changes with Chrome Developer Tools - javascript

I'm trying to debug a drop-down menu. I don't have access to the website just yet so I'm trying to find a solution through Google Chrome Developer Tools which I can test and then apply to the site when I get access. It's only CSS and perhaps some Javascript changes.
The problem is I want to apply some new CSS style rules through dev tools, but then have these persist upon refreshing the web page. Is there a way I can apply styles and get them to persist? I've looked at the resources section, which kind of suggests I can do something like this (maybe by adding a local style sheet as a resource?), but I just can't figure out how to do it.
Could anyone point me in the right direction here?
Many thanks folks...

You can install the Tampermonkey chrome extension, which is greasemonkey for chrome, and you can load userscripts that can alter css and use jquery to modify the page, and this changes are permanent as the script will be loaded and execute it automatically anytime you go to the site you set in the #match rule, see the following userscript which just changes the background color of the page:
// ==UserScript==
// #name yourscript
// #namespace http://yeeeee/
// #version 0.1
// #description Change bacground color of page
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// #match http://yourtargetsite.com/*
// #copyright 2012+, Me and Brothers
// ==/UserScript==
(function () {
$(document).ready(function(){
style = '<style type="text/css"> body {background-color: #CC7777 ! important;} </style>';
$('head').append(style);
});
})();

Since Version 65 of Chrome this can be done without plugins. In the developer tools go to the Sources -> Overrides tab and select any local folder, where chrome should save your persistent changes to. For changes in the DOM tree, use the Sources and not the Elements tab.
For a list of local overrides go to ⠇ -> More tools -> Changes.
More info here.

My favorite tools for CSS overriding is Stylish https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
It's useful for debugging and enhancing any web page. There is also a large library of existing styles, with a convenient link to them from the extension menu. Like these, for StackOverflow.com

Thanks for the suggestions. I tried both but had minor issues with them (just not particularly easy or intuitive for me personally). Instead I sumbled upon Tincr, which I found to be a better fit. Thanks folks.

Try the extension stylebot that allows you to quickly create and save persistent custom CSS for sites.

There's also an extension called hotfix. It lets you save changes from Chrome Dev Tools directly to GitHub.

Related

How to edit a website's HTML and then have it be there when you reload but only for you?

So say I use a website very often but I don't like a certain aspect of the design, I obviously don't own the website but I don't like to have to go in every time I load a page and edit the HTML, I'd like to be able to save some HTML and every time I open this website it should replace the code automatically, or it could run some Javascript or something, or even change some of the CSS, is this possible and if so, how?
The easiest way to do something like this would be to install a userscript manager like Tampermonkey. Then you can create a userscript for the site that changes the HTML to how you want it to be, and (if you've written the code properly) it'll automatically run every time you load the site.
For example, due to a bug in Stack Exchange's CSS/Javascript, quickly double-clicking on a snippet when it's loading results in errors, so I currently have the following userscript to fix it:
// ==UserScript==
// #name Stack Snippet Modal Fixer
// #description Prevents snippet double-clicking from breaking the snippet interface
// #author CertainPerformance
// #version 1.0.0
// #include /^https://(?:(?:(?:codereview|gamedev|codegolf|meta)\.)(?:[^/]+\.)?stackexchange\.com|(?:[^/]+\.)?stackoverflow\.com)/(?:questions/(?:\d|ask/)|posts/\d+/edit|review/(?:reopen|helper|low-quality-posts|suggested-edits)(?:/\d+|$))/
// #grant none
// ==/UserScript==
document.body.appendChild(document.createElement('style')).textContent = `
.snippet-modal {
pointer-events: auto !important;
}
`;
This uses Javascript to append a <style> tag to the document, but you can make whatever other changes you want to the document as well (like changing HTML of a page, or removing style rules of an existing inline <style>, etc).
The only limits to a userscript are the limitations of Javascript on a page, but most things one would want to tweak can probably be achieved with Javascript.
Personally, I would have a hard time browsing many of the sites I frequent without the ability to write userscripts to customize sub-optimal interfaces.
You could use the browser extension Stylus, which allows you to add custom css on a per-website or on a global basis and it will load that css every time you visit any page on the specified site(s) until you turn it off.
For Chrome:
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en
For Firefox:
https://addons.mozilla.org/en-GB/firefox/addon/styl-us/
If you are interested in doing a little work, you can write a Google Chrome extension to do what you're asking. Take a look at https://developer.chrome.com/extensions/getstarted to get started.
I think there is already a plug in that does exactly that. I don't use it, I just remembered from years ago and find it in the Chrome Extensions store. Give it a try:
Monkey Wrench

How would I go about creating a chrome extension from a userscript? [duplicate]

I came across this userscript which works in Google Chrome.
I want to use it as Google Chrome extension as this will give me experience to convert many other codes from userscripts to Google Chrome Extensions.
Can someone give me a step by step tutorial of how to make a Google Chrome Extension out of this userscript code?
// ==UserScript==
// #name Facebook Ads Hider
// #author Jose Luis Martin
// #namespace http://joseluismartin.info
// #description Hide Ads on Facebook
// #include http://www.facebook.com/*
// #run-at document-start
//
// ==/UserScript==
if (document.addEventListener) {
document.addEventListener("DOMNodeInserted", onNodeInserted, false);
}
// Event listener to hide ads containers
function onNodeInserted(event) {
target = event.target;
if (target.className == "ego_column") {
hideElement(target);
}
}
// trivial hide of ads container
function hideElement(elto) {
elto.style.visibility = "hidden";
elto.style.hight = "0px";
elto.style.width = "0px";
}
Please do not give a reply that there is no need for this as userscripts can be natively run on Google Chrome. I am doing this to learn how to make Google Chrome extensions.
The Google Chrome extension tutorial is very bad for understanding and makes me vomit - I don't know who made it!
In Google Chrome, userscripts are extensions. The script gets packaged as a content script, and the extension manifest.json gets automatically generated.
To move towards a "full fledged" extension:
First organize your script, source file(s) and explicitly create the manifest.json as shown in this answer.
You do not need to alter that userscript's code, at this point, but you will want to transfer the values of the #include and #run-at directives to the manifest.json file you will generate. Refer to the example in that linked answer.
Read the Content Scripts page and note how the manifest can be used to easily add CSS, jQuery, your userscript (AKA content script), etc.
Content scripts are 1 of the 3 main tools available to Chrome extensions. The other 2 are the background page and UI pages. Learn more about those starting with the extension-development Overview.
Finally, you can package your extension as explained in this answer.

GreaseMonkey #include for about:newtab

I have a script that I want to run on EVERY page. To do it has been quite easy I simply set #include * and its done. It shows up on every page, activated by a hotkey combination I have assigned to it inside the code. It works as expected and without issues.
HOWEVER, I would like this to also be available on a blank tab as well. If you have a page with actual content (document assignment if you will) it works fine, I guess it has something to inject the script into and run with, I get that. I am wondering and hoping if there is a way to also have the script hook the blank tab page as well.
I have done considerable research on this to no avail, I am hoping some of my friends here with more extensive exposure to JS and perhaps experience gained in the trenches with regards to this matter might have a solution to offer. I would greatly appreciate it.
See the docs at "Include and exclude rules, Extra schemes". for a script to run on blank tabs, you must now explicitly set #include about:blank.
For example:
// ==UserScript==
// #name _Very noisy script
// #include about:blank
// #include *
// ==/UserScript==
alert ("Fire on blank");
However, Firefox now uses about:newtab by default, and Greasemonkey currently doesn't consider about:newtab to be "Greaseable". (It should though, and I'll look into getting a pull-request accepted for this.)
So, to get scripts firing on blank tabs, you currently must set those blank tabs back to using about:blank.
Do that by opening about:config and setting browser.newtab.url to about:blank.

Running JS whenever a specific page is loaded

I currently have a bookmarklet that I want to be executed whenever a specific page is loaded.
Is there a Chrome extension or similar that will let me do this?
You can do this with Chrome user scripts. In Chrome, you use a #match line like:
// #match http://www.google.com/*
to specify the page.
These are similar to Greasemonkey scripts, with some browser-specific differences. See this list of scripts that work in Chrome.

Does anyone know a DOM inspector javascript library or plugin?

Does anyone know of a DOM inspector javascript library or plugin?
I want to use this code inside a website I am creating, I searched a lot but didn't find what I wanted except this one: http://slayeroffice.com/tools/modi/v2.0/modi_help.html
UPDATE:
Seems that no one understood my question :( I want to find an example or plug-in which let me implement DOM inspector. I don't want a tool to inspect DOMs with; I want to write my own.
I am also looking for the same thing, and in addition to http://slayeroffice.com/tools/modi/v2.0/modi_help.html i found: http://www.selectorgadget.com/ ( https://github.com/iterationlabs/selectorgadget/ )
Also came across this https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector
Unfortunately I haven't found anything based on jQuery. But "Javascript DOM Inspector" seems to be the right keywords to look for this kind of thing.
How about Firebug Lite - it's like Firebug but you insert it into your page and so you can debug your html, css, Javascript and the DOM on most browsers (including non-FF ones)
Aardvark is a firefox extension officially but you can use that as a javascript library, too. The inline demo in the said website is implemented using javascript. digg into the code & you'll find loader.js which is bootstrapping the Aardvark modules.
I found this one:
http://userscripts.org/scripts/review/3006
And this one also is fine:
DOM Mouse-Over Element Selection and Isolation
Which is very simple with few lines of code and give me something good to edit a little and get exactly what i wanted.
Very recently, I needed to develop an application using JavaScript : when any user click on an image of this site, it will send image URL to a specific location. Here is the article that helped me achieve that : AspBoss - Javascript Library for Dom Inspector
And this is the code :
// DOM Inspector
// version 0.1
// 2006-01-25
// Copyright (c) 2006, Onur Mat
//
// --------------------------------------------------------------------
//
// This user script allows you to interact with elements of a web page
// by moving mouse pointer on a web page and clicking on selected elements.
//
// To install for Firefox, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To install for Internet Explorer, you need Turnabout:
// http://www.reifysoft.com/turnabout.php
// See instructions for using Turnabout here:
// http://www.reifysoft.com/turnabout.php
//
// --------------------------------------------------------------------
//
// ==UserScript==
// #name DOM Inspector
// #namespace http://www.dominspector.com/
// #description Inspect DHTML DOM elements interactively
// #include *
// ==/UserScript==
function DIOnMouseOver(evt)
{
element = evt.target; // not IE
// set the border around the element
element.style.borderWidth = '2px';
element.style.borderStyle = 'solid';
element.style.borderColor = '#f00';
}
function DIOnMouseOut(evt)
{
evt.target.style.borderStyle = 'none';
}
function DIOnClick(evt)
{
var selection = evt.target.innerHTML;
alert('Element is: ' + evt.target.toString() + '\n\nSelection is:\n\n' + selection);
return false;
}
document.addEventListener("mouseover", DIOnMouseOver, true);
document.addEventListener("mouseout", DIOnMouseOut, true);
document.addEventListener("click", DIOnClick, true);
Firebug is a good solution for Firefox. You can browse a page's HTML, JavaScript, DOM, network activity, etc. Safari also has fairly good tools built-in (I'm using the Safari 4 beta at present), though I find it's easier to navigate around Firebug.
Yes, there are plenty. For example, Firefox has DOM Inspector, Firebug, and X-Ray. I think Firebug is the best of the three, personally.
Developer Tools on IE8
Try Backbase Debugger Application. It also has an I/O inspector.
I used to use Firebug, and Firefox all the time, now thanks to IE8, which has really cool tool called Developer tools --- that allows to see all the Javascript, CSS and also allows to really cool debugging feature. MICROSOFT is getting there !
A coworker recommended me this one: Web X-Ray Goggles https://secure.toolness.com/webxray/

Categories

Resources