I would like to use Chrome's default favicons.
For example (you can simply open them in Chrome):
chrome://theme/IDR_HISTORY_FAVICON
chrome://theme/IDR_EXTENSIONS_FAVICON
chrome://theme/IDR_SETTINGS_FAVICON
chrome://theme/IDR_PRODUCT_LOGO_16
When I used it as an image source nothing happened. Maybe Chrome blocked the access to the icons or this was not the proper way to use the icons. I tried to use "chrome://favicon/", but it didn't work with Extensions and Settings (strange, but it worked with History).
How can I use the built-in favicons as an image?
I would be also grateful if you could get me a full list of the Chrome's favicons, it must be in Chromium's source code, but I have no idea where to look.
(I'm using Chrome 19.0.1084.52)
Related
I'm interested in creating a Chrome Extension which lists all the elements on the webpage that have an 'id' attribute in a menu. Then, when the user clicks on the element in the menu, the corresponding element on the webpage is highlighted.
I saw Chrome devtools highlights an element when you right click and inspect on it. I'm curious if there is some highlighting API accessible from DevTools? If not, how does one highlight elements similar to how devtools does it?
You can use the exact API that Chrome DevTools are using. You will need to call highlightQuad or highlightNode via debugger API. You can even specify the color and you can be certain that the highlight will render correctly and not interfere with the website (injecting an 'overlay' node, as Xan suggested, doesn't guarantee that). On the other hand, it will be much trickier to get right and user won't be able to use both your extension and DevTools at the same time (there can be only one debugger API connection). This code should get you started.
Chrome API does not provide access to such highlighting; you'll need to implement it yourself with an overlay.
Chrome API does provide access to the same functionality as DevTools if you use the debugger API. See this answer for details.
Before Chrome 63 (2017-12-06), writing a DevTools extension (i.e. using devtools.* APIs to display UI in DevTools) and using debugger at the same time would've been impossible, as only one instance of a debugger protocol client was allowed at once. This has changed, so now it's a viable answer, even if the documentation for chrome.debugger API wasn't updated yet.
Even though it's now possible, be aware that debugger API is an API with heavy warnings (adding it after publication may auto-disable installed extensions - needs testing).
Below is the original answer:
You can implement the highlighting yourself with an overlay.
You can study how it's usually done by looking, for example, at the element picker of uBlock Origin.
In short, that method creates an SVG overlay using, among other things, getBoundingClientRect() of the elements selected.
I'm trying to build a chrome devTools extension (an extension to the dev tools). The main intent is to create a new sidebarpanel under the "Elements" panel, where I can manipulate data from the Elements panels.
The goal is to observe the CSS changes which the user makes in the "styles" sidebarpanel, and reflect the same in the respective file on disk (I know there is a way to achieve this using source-maps concept. But I'm trying this way though).
I'm new to writing chrome extensions and trying to understand how I can achieve this. I have gone through chrome devtools extension docs, tutplus and many other sites where there are good explainations about writing chrome devtools extensions. But I'm still trying to figure out how I can monitor/observe the styles sidebarpanel in another new panel, and get the modified style info and respective file details. So that I can persist the same to respective physical file.
Thanks!
it seems you can not do it.
you can get ElementsPanel which represents the Elements panel with chrome.devtools.panels.elements, but it only have one event: onSelectionChanged, nothing with the styles sidebar pane.
https://developer.chrome.com/extensions/devtools_panels#type-ElementsPanel
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 trying to redesign a small portion of vastly huge site and I was told that I can load custom images to Inspect Element (Chrome) if they are located in the same path as the stylesheet to which the site is remapped. (all done through css via 'content: url('...');') but the webpage is still looking for them in its own resources. So is there a way to use a locally stored image with Inspect Element?
When you're passing images in locally you can use, for example:
file:///C:/Users/[username]/Desktop/picture.png
So if I was to change a background image I would use
background-image:url("file:///C:/Users/Julia/Desktop/background.png");
But note that a lot of sites don't allow you to load local resources, so an error may appear in the inspect console when you try.
Actually, it only works with background instead of background-image (not sure if it works) but background without image seems to work. So put in:
file:///Users/[YourName]/Documents/picture.png
Like this:
background:url("file:///Users/[YourName]/Documents/picture.png")
I just decided to contribute because I just wanted to try it out myself as well and found this as the first answer despite the post being 2-3 yrs old; although for other users it might be helpful.
Also, this was done on Opera, but haven't tried it on other browsers, but it does work for me. Don't include the drive name. But you can simply copy the URL, by dragging the image into the browser (if it loads it) and copy the link. It should work (usually older browsers that don't auto-download the image).
I'm diving into the world of Chrome Extension development, primarily because there is a very small feature that is missing in Chrome that I miss dearly. The context-menu option to "Set as background/wallpaper" like that found in Firefox. Sounds trivial, but it's convenient.
I have most of the "basic" stuff worked out with the manifest file, am able to install it, even managed to get it to show up as a context menu item.
The problem obviously is that I am wanting to mess with a user's OS-level settings which is extremely difficult because of security issues (fully understand this).
I found an extension that allowed this in older versions of Chrome, and it looked like the developer used some type of .dll and C++ to accomplish this.
I'm not really sure how to make this work.
Since that Chrome doesn't allow these kind of manipulations (such as your PC's settings), you will need to create a native application that will run beside your extension. When the user chooses the image from your extension and selects "use as wallpaper", you will use the native messaging API to send a message to your desktop application, that will set the wallpaper (and do whatever else you can't do within a chrome extension) for you.
You can use the chrome.wallpaper app api to set the wallpaper after using the messaging api to send the image from your extension.