I want to create a custom CSS style using the Stylish Chrome extension that applies to specific websites. But it's unclear how this is supposed to work. According to the documentation:
Stylish on Chrome does not support #-moz-document rules, but provides
a UI with the same rule types. It also has a feature to output styles
to #-moz-document format, which is useful when you want to post them
on userstyles.org.
But the editor UI is not functional; it says under construction.
I also can't find the "To Mozilla Format" button in the web editor.
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).
I'm working a lot with the chrome developer tools to develop web applications. Currenty in one big project we have an application which features its own JSON-format for requests to the server. The JSON objects sent contain various information about the type of the request and its data and so on.
Is there an opportunity to extend chromes developer tools (especially the network view) with a special view which displays the data from the request in a way that makes it more readable for developers working with the project?
I tried to find out about extending the tools but i don't know really where to start. I found some information how i can add tabs and pages to the developer tools but nothing about how i can get the request / response information to display them.
There is no standard API to extend the network view of the developer tools. If you're happy with using a custom devtools tab, use the chrome.devtools.network API to filter and format responses, and render it in your tab.
If you're adventurous, you can use the next approach to directly modify the content of the network view.
First, you need to know how to debug the devtools.
Open the developer tools (F12).
If it's docked, undock it.
Press F12 to open the devtools of the devtools.
Then, you need to use your debugging/coding skills to find out which methods are responsible for rendering the network panel (tip: use DOM breakpoints to quickly discover where to start).
Write code which transforms the network tab to the desired format (either by monkey-patching, or by hooking up on the event you've found at the previous step).
At this point, you know how to change the lay-out of the network tab. Now, you need to permanently activate the code for your developer tools. I've explained two of such methods at How to inject javascript into Chrome DevTools itself.
You could download a copy of Google Chrome's source code and play with it; it's written in C++.
/trunk/src/chrome/browser/devtools looks to be the correct dir to look at.
You can make use of chrome.devtools.network.onRequestFinished. For more control and advanced information you can use chrome.webRequest api.
I need to know how i can insert menu-item into YouTube context-item using Google chrome extension.
I searched for that a lot and i found similar question but no any persuasive answer.
I need the solution very much.
The chrome extension API includes a Context Menu feature, but since the YouTube player uses Flash, there is a completely separate context menu that Chrome does not have direct control over.
So it is not possible to customize the context menu with the Chrome API. However, you may be able to get by with a (somewhat hacky) solution, such as covering the video with a transparent HTML DOM element. The DOM element should trigger Chrome's context menu instead of the Flash context menu.
I wish to run a content script when viewing the source of any web page. (and have a page action icon appear)
The docs here don't mention view-source as a valid scheme.
Is there a way around this limitation?
You cannot insert a content-script into view-source: pages. I didn't found a detailed explanation, but here is the related commit.
Is it possible to create a browser extension that would allow page-controlled window opacity? Not so that various elements on the page are of a given opacity, but to allow one to see other windows (like the desktop) behind the browser page.
Thank you.
No, this is not possible in an extension. Such transparency would be handled at the window manager level, and would require platform-specific code. This means that either Chrome would have to add this feature and expose it as an extension API (currently no such feature exists), or you would have to write a plugin.