Google Chrome Extension Top Sites Images - google-chrome

So using the Google Chrome Top Sites api has values for the url and the title, but when you load the default google chrome page it also has an image of those sites, is there any way to get that sort of image for an extension? If not how does google get that image and how can you get an image of the the user's top viewed website?

Since that it isn't possible to get a screenshot of a page without loading it inside a tab, Chrome is simply getting those screenshots while you're browsing your favourite sites. You can tell this easily because sometimes sites and images do not coincide (e.g. sometimes my facebook.com top site has the image of my profile page, but links to the home).
Then, if you want your screenshots of the Top Sites, you'll have to start without screenshots, and create them while the user browses the web by using the chrome.tabs API to check when a tab loads one of the Top Sites (listening to the event onUpdated), and get a screenshot of that tab using captureVisibleTab.
NOTES: make sure that you've requested the permission for "<all_urls>" in your manifest, which is required for captureVisibleTab to work. Additionally, you may find this question and its answer helpful.

It's unfortunately not possible*. Chrome stores those thumbnails internally in URIs not accessible from an extension.
There is an existing feature request: https://code.google.com/p/chromium/issues/detail?id=11854
If you look at the comments, one of the main use cases is to access site thumbnails to replicate the New Tab page.
Do star the feature request above to raise its priority if you want this functionality implemented.
* By that I mean that it's not possilbe to access Chrome's own internal store of thumbnails.
Furthermore, as Marco suggested the way to replicate that would be tab capture, but you can't do it "in the background" for privacy reasons - a user must make an explicit gesture (e.g. click the extension's button, press a shortcut, etc.) to perform capture.
Marco's answer is valid now, captureVisibleTab should be accessible upon events. But yes, as of now Chrome forces you to have very broad permissions and maintaining your own thumbnail store.

Related

Chrome MediaRecorder API share pre-selected tab

So, here's is my doubt.
I'm using the MediaRecorder API, to make a recording of my browser's screen. I can capture the whole browser screen + audio(tab) + my microphone. Everything is working fine. But I only need to capture the screen+audio from the tab that started the recording. On that popup thats opens on google chrome, when I want to screenshare some tab or application, is it possible to show only the tab that started the screenshare? So I don't have to seek everytime the tab that I want to share.
I didn't find any information about that.
When working with the google chrome API, I see that we can capture only a tab, but outside this API, is it possible to accomplish something similar? Or is only possible to work with pre-selected tab if I develop a google chrome extension?
chrome.tabCapture.capture({audio: true, video: true}, callback);
Unfortunately you can't specify it or limit it to the current tab.
Note: Constraints never cause changes to the list of sources available
for capture by the Screen Sharing API. This ensures that web
applications can’t force the user to share specific content by
restricting the source list until only one item is left
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture

Google logo, map tiles and other google images don’t load in Chrome (HTTP 400)

There are several similar entries in stackoverflow for this error (HTTP 400), but I haven't found anything relevant to mine; so if this is already answered... my apologies.
Chrome is my default browser, and I use many Google services everyday, like Gmail, Maps, Docs, etc.
However, time-to-time, when I am logged-in to Google, I notice some assets are not loading from Google websites (*.google.com).
For example; Google logo in upper-left corner at main www.google.com search results; or image tiles in Maps.
Those missing images (or assets in general images, JS, CSS) have references in the DevTools Console: Failed to load resource: the server responded with a status of 400
Once I clear storage in DevTools > Application, naturally I get logged out, but those missing assets start behaving normal and load as expected. I can log back in to Google services and use them without any issues, until next time it happens.
Since clearing storage (cookies and cache) fixes the issue, I don't think it's related with any of the installed add-ons (read AdBlock).
Has anyone experienced this issue, or better yet have a solution for this? Or should I continue blaming Google in general? :)
I was having a similar issue in Maps. I searched around on the intertubes and found a solution that worked for me:
https://productforums.google.com/forum/#!topic/maps/zbT4TK4x2QI
Synopsis: delete all the cookies for "www.google.com" starting with gsScrollPos
In Chrome:
click "three dot" menu on upper right
click settings
open the advanced section
click content settings
click cookies
click "see all cookies and site data"
click the search cookies box and type "google"
scroll down to find "www.google.com" and click it
now click the X next to each item starting with gsScrollPos
Hope that helps you!

Hide Icons displayed on address bar in Chrome Extension

I am developing a chrome extension. When I install it one of its icon is displayed in address bar. I want that icon should not be displayed after installation.
Starting with Chrome 49 (see the announcement and detailed description) all extension icons are displayed in the browser toolbar:
[...] each extension the user has installed has a persistent UI surface. By default, this will be in the toolbar to the right of the omnibox (where browser actions are now), and the user can choose to hide ("overflow") these actions in the Chrome menu.
The reason for this is to protect our users. We've heard too frequently that many users are unaware of the extensions they have installed, whether this is due to sideloading, installation by phishing, or simply the user forgetting how many and which are installed. Unfortunately, extensions consume computing resources, and may have significant security, privacy, and performance impacts. Because of this, we've decided we need to increase user visibility.
What this means for your extension:
If the extension has a browser action: Nothing! (Apart from the slightly different hide/overflow functionality.)
If the extension has a page action: The extension will be given a persistent icon in the toolbar. On pages where the extension's page action wouldn't normally be visible, the action will be greyed out, indicating that it doesn't want to act. On pages it does want to act, it will be fully-colored.
If the extension has no action: Similar to page actions, the extension will be given a persistent icon in the toolbar. It will be shown with the greyed-out look all the time.
Displaying the action persistently, even in the cases of a previously hidden page action or an extension with no action, is necessary because the presence of an action doesn’t always correlate with the extension acting. We also can’t show the action conditionally on, e.g., a per-tab basis, because there are many actions that are not correlated with any tab. In order to ensure users are aware of the extensions they have installed that could be affecting their browser, we need to ensure each extension is visible.
We've done our best to limit the functionality this breaks, and hope you understand the trade-off between developer inconvenience and user benefit. Thank you for understanding as we keep our users safe!
An end user of your extension may manually hide the icon either by adjusting the overall toolbar width (click the space between addressbar and toolbar and drag) or by rightclicking an icon and selecting Hide or Show:

How to block a URL in Chrome's developer tools network monitor

I am currently analysing my page connections and I want to block some tracking scripts and other external URL calls in my network monitor inside Chrome's developer tools.
I quickly want to check how the page behaves without some libraries.
Chrome itself does not provide any functions like this and the famous blocking extensions only block URLs which the user enters manually into the navigation bar.
As pointed out by #calavera.info, #iman.Bahrampour, and #Asim K T this feature is now available in Chrome 59. You can select a URL or domain to block in the Network panel. See this release note and these Screenshots where the StackOverflow logo has been blocked from this page. #iman.Bahrampour also shares two extensions below that will also do this ("HTTP Request Blocker" and "Request Blocker").
As abd3721 mentioned this is available directly within chrome DevTools (You don't need to be on canary anymore), however it is still behind a flag and in the hidden experimental features menu. As of the time of this comment, Chrome stable is on version 53.
To enable it, open this link and click the enable link under the appropriate flag:
chrome://flags/#enable-devtools-experiments
Then in DevTools open up the settings panel(F1) and click on the experiments tab.
This lists all currently available DevTools experiments but it is still in yet another hidden set of features.
Press Shift 6 times while in the experiments tab to show even more hidden features, one of them will be Request Blocking.
NOTE: These features are considered experimental and may be buggy or incomplete. Use with caution.
For blocking requests in google chrome you have 3 options:
1. Google Chrome with pattern matching:
In network tab, right click on request and then select block request URL
There is a plus sign that adds patterns for blocking requests
For example I have 7 request URLs:
http://www.test.com?userid=5
http://www.test.com?username=username
http://www.test.com?email=email
http://www.test.com?name=x
http://www.test.com?family=q
http://www.test.com?family=y
http://www.test.com?family=z
I can block requests that have a specific pattern by adding a pattern(for example the pattern *family* blocks 3 below requests):
http://www.test.com?family=q
http://www.test.com?family=y
http://www.test.com?family=z
Be careful! Because patterns are case sensitive
2. HTTP Request Blocker extension:
This extension has pattern matching for blocking requests:
Match patterns
3. Request blocker extension:
This is a useful extension that has pattern matching for blocking requests.
The most useful features of this request blocker are importing and exporting lists for using by other People.
For exporting a list and using in another computer(or future used): click on Direction down and select Export.
Open the exported list with import list button.
Good Luck
From Chrome 59 you can block specific requests from Network tab of developer tools itself.
https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests
Right-click on the request in the Network panel and select Block Request URL. A new Request blocking tab pops up in the Drawer, which lets you manage blocked requests.
This is now achievable in Chrome 59 developer tools by blocking respective requests: https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests. With this approach it is somehow difficult to turn off all the stylesheets, but it's easier to turn off just the most annoying ones.
As for Google Chrome 94, it's possible to exclude network activity for entire domain:
1. Go to "Network" panel of DevTools:
2. Rigth click on item of domain you want to block, click on "Block request domain" in the context menu:
3. Type "status-code:0" into "Filter" and click on "Invert" checkbox:
To manage blocked domains, press ESC button when in DevTools, and click on "Network request blocking" tab in the bottom panel:
Will changing host file help.
Your system (windows, linux, mac) all check host before requesting DNS lookup. I use it when I wan tot block some slow advertisers.
windows:
c:\Windows\system32\drivers\etc\hosts
linux & mac
/etc/hosts
* BE VERY CAREFUL TO MAKE BACK UPS *
An existing bug report is requesting this feature. You can star that issue to show support for it being added.
Well, i have been looking for an answer for this too, as I had this issue of choices by counterfeit, and nothing seemed to work for me.
But then I tried to analyze the requests and other things until I figured out, that there was this site which was loading ads onto my pages and redirecting me to advertisements. And also changing the google search bar on new tabs to some unknown search engine. I was able to temporarily block the request on one page. but after opening a new tab, the ads would appear again.
So googling for request blocker, I came up with a chrome extension "HTTP Request Blocker" and added the address which was causing all the crazy ads, has now solved the problem fully.
I hope it will be of help to you too or anyone else.
In the original question, the author states:
the famous blocking extensions only block URLs which the user enters manually into the navigation bar.
This is no longer the case. I have really enjoyed using mokku, which can intercept and mock all types of requests. You can specify what the status code should be, so it will definitely solve this problem as well as adding other functionality that is helpful. It works by another tab in the chrome dev tools. Here is a link to the extension: https://chrome.google.com/webstore/detail/mokku-mock-api-calls-seam/llflfcikklhgamfmnjkgpdadpmdplmji?hl=en

How can I display the same DOM across several tabs in a Chrome Extension?

I'm looking to build a chrome extension that allows the user to have an independent subwindow that is the same in each tab (for example you are taking notes and the notes are synchronized among each tab). Also, clicking a link should not destroy this subwindow.
One solution is to inject an iframe in each tab, and try to synchronize this data serverside and send back to each client tab, as it is updated.
This seems very tedious, plus the iframe would be provided by a third party, and I want to make it the easiest for them.
Is there a way I can have a shared dom piece and display it in its current state across several tabs?
There's an API (still experimental as of Chrome 17) that does more or less exactly what you want. If you visit about:flags, and enable "Panels" (they're enabled by default in Dev and on Canary (and on ChromeOS)), you'll be able to use chrome.windows.create with a type of panel to create a floating pane that exists independently from the browser window. That would likely meet your need.
Take a look at the Google Talk extension for an example of how it might work.