Can anyone suggest a browser plugin that will let me override a website whenever I am loading a particular website.
Example Scenario:
Whenever I load yahoo.com I want to change on how it renders the html and behave.
It needs to be able to manipulate the DOM. example, it can change the attribute of an <img height="" width="" />, example the width and height of the image.
Aside from changing attributes it also need to be able to inject new elements. example i can insert new <divs> or <p>.
I also need to be able to manipulate the head tag as I like to insert external CSS and JS for the overrides.
I primarily use Google Chrome and Mozilla Firefox.
Thank You.
Chrome has native support and Firefox via a plugin for user scripts (also called greasemonkey scripts). They are essentially javascript files that are installed like an extension. At the top you define the domains for your script to run on and you have access to modify the DOM. There are lots of examples at http://userscripts.org/ . Load a few in chrome and then take a look at the user.js file source to see how they work.
You could also do it via a Bookmarklet, however they are more of a hack compared to Greasemonkey scripts
It's called the content scripts in Chrome extension.
Related
I'm looking for a way to whitelist fonts that pages in Chrome can use. In Firefox I would just simply disable Allow pages to choose their own fonts, instead of my selections above in content settings but Chrome seems to be keen on letting web designers force ugly and often unreadable fonts on us.
I don't want to use * { font-family: sans; } style in Stylish, because I want to keep sans (or serif) and monospace sections, and web designers, insane as they are, usually keep those at the end of the font-family list.
I've done my research and I still can't figure out how to do it via Chrome extension API.
I considered intercepting requests for CSS files and modifying them in response but this isn't possible via current API.
I could also traverse the DOM tree, inspect CSS on each node and replace it appropriately but it'd expensive. Moreover this wouldn't work for pages which build the content from JavaScript. So I'd have to use MutationObservers and that would be way too expensive.
If I could somehow read CSS files that the current tab is using, I could collect the rules with font-family style and inject appropriate <style> element into the page via content script. But I couldn't find a way to read those CSS file via current API. (I'd also have to read <style> rules embedded in HTML but that's doable).
I could also do it via some proxy but I'm not sure how to (securely) cope with SSL.
I could get close with fontconfig. It gets rid of Arial but doesn't work for external (and usually most ugly) CSS fonts.
Is it possible to achieve my goal via current Chrome extension API? How? If not, what would be the workaround?
I don't care about inline styles and styles set from JavaScript. I can live with those. Vast majority of pages I'm concerned about use styles from external stylesheets.
EDIT
wOxxOm's advice to modify document.styleSheets is the way to do it and I've made a simple extension that worked on all sites! Unfortunately, in current Chrome, CSSStyleSheet#cssRules returns null for stylesheets loaded outside of page origin https://code.google.com/p/chromium/issues/detail?id=45786. T_T
(I'll of course publish the extension on GitHub and post the link here after I polish it).
EDIT 2
As wOxxOm suggested, blocking web fonts is also an option (though less ideal I'd say) and there even exist good open source extension for it https://chrome.google.com/webstore/detail/disable-web-fonts/olmabeadgbpmhllgdkemfdnmkngkbkeg. It needs some white list for iconic fonts though. Local fonts can then be managed via fontconfig.
This issue is probably related to ugly looking web fonts https://code.google.com/p/chromium/issues/detail?id=173207.
EDIT 3
I ended up with this nice (and open source) extension https://chrome.google.com/webstore/detail/font-blocker/knpgaobajhnhgkhhoopjepghknapnikl. It's a blacklist but that's enough for my needs and it works with iconic fonts. As far as I can tell, to implement a font whitelist extension I'd have to be able to enumerate all fonts loaded by a web page and that appears to be impossible in current Chrome (see first edit).
Is it possible to show chrome extension icon inside the web page?I am able to create an extension using page action ,icon is shown inside the address bar ,but i need to show it inside the web page ...
Well, there is no special API you can simply use for that.
You can inject your own UI elements into the page, but it's going to be difficult. I will only outline this, don't ask for specific code.
You will need a Content Script (also, read the Architecture Overview page if you haven't yet) to access the contents of the page.
Then, you need to create and append your elements to the DOM of the page. In your case, you could possibly add an <img> tag with your icon and a click listener that does something.
Note that to avoid clashes with CSS of the page itself it is recommended to use Shadow DOM techniques.
Of course, this may or may not work well depending on the page you're injecting into.
I want to be able to call functions that I am writing in a Chrome extension from the JS console in Chrome, so that I can test them easily and see how their output changes as the page changes.
But it seems as the functions I write aren't available to the chrome JS console. I don't really understand JS that well, or the chrome extension model, but I need to somehow inject the extension source into the body of the page that I am using the extension for?
If you are talking about functions that you defined in a background page, then you need to go to your extensions page, check the developer mode box, and click on _generated_background_page.html. That is where you will find your background page code.
If you mean functions in a content script, then when you are in the console, go down to where it says <page context> and change it to your extension. Then you will have access to the functions in the content script.
I just saw jsFiddle today and am wondering that is there a FireFox addon that provides jsFiddle like features. Especially when you enter the html and css, jsFiddle shows you a layout of the page. Is there any addon that shows such layout for "offline viewing"? I use Firebug but there isn't such layout. Does somebody know about it?
Not a firefox add-on, only in the interest of self-promotion:
I have created a Vim script with similar (but at the moment very limited) functionality: vimfiddler. Vim integrates with selenium to drive a browser. Provides a jsfiddlerish experience running locally on your own computer.
In Google Chrome you can edit every element of the page. Just open a new tab, hit F-12 and edit to your heart's desire. Add some css or javascript to the head tags, put whatever HTML you want in the body, and you're good to go.
This add-on sounds like what you need : https://addons.mozilla.org/en-us/firefox/addon/devtools-prototyper/?src=ss
Just install it, open the devtools, then switch to the "Prototyper" tab.
I want to be able to open my website and use some kind of firefox plugin to re-arrange some Html on the site by drag-and-drop and be able to use that modified source. I used to use a css plug-in but do not remember it anymore. Are there any cool tools or plugins avaiable?
It's not drag-and-drop, but Firebug will let you modify any web page in Firefox. You'll have to edit the HTML/CSS source directly, though; once you're done, you should be able to copy and paste into a text editor.