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.
Related
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 can I make dynamically changed user script using Tampermonkey in Safari without actually open Tampermonkey and edit some code manually? I want to change the contents of a script on the fly. I used to do this in Chrome with #require attribute pointing to a javascript file in my file system. Then I programatically changed that javascript file accordingly. Worked like a charm. This doesn't work with Safari, due to it's security.
I tried manually changing the /Users/mainuser/Library/Preferences/com.apple.Safari.Extensions.plist file, but that results in corruption of Tampermonkey, since Safari doesn't like to see users changing it's preferences manually. It does some checks to see if someone tempered with it. Don't know which file should also be edited to avoid this. So the question remains, how can I dynamically change content of user script in Safari?
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.
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.
I have seen "#run-at document-start" and "contentScriptWhen: 'start' " in Firefox extension(or userscript).
All these statements are used to run some scripts, while the web page starts loading in Firefox.
Now I want to run my script at document start in Opera extension (or userscript).
How to catch this start event in Opera browser?
What you want is actually the default behaviour of opera user javascript.
Gotcha #1: your script must have .js extension, and not .user.js
Gotcha #2: when you use .js userscript you have to manually listen for loading events.
But, imho the price for the power you get - is not that high ;)