I'm developing a chrome extension. I need to get a preview image for each tab. How can I do this?
The Tab API has captureVisibleTab functionthat you can use:
http://code.google.com/chrome/extensions/tabs.html#method-captureVisibleTab
Do a simple search on stackoverflow to see how it works, I have answered many people regarding that feature.
If you want to alter that image after you capture it, then you can use HTML Canvas to do so.
Hope that helped
Related
I'm trying to learn about google chrome extensions so from this question I went to this tutorial.
I followed the instructions but both the change of the page's color when clicking the button and the options page don't work.
To make sure I didn't missed anything I downloaded the completed extension but I got the same result.
Why does it not change the page's color when I click the button on the popup and when I go to the extension's options the page is blank? Is the tutorial obsolete/has something wrong in the code that wasn't updated? Can it be fixed/how?
The only related questions I have seen seem to be old when the example extension/tutorial was different.
This bug is tracked here: https://bugs.chromium.org/p/chromium/issues/detail?id=827804
It seems that the scripts have some errors.
I have uploaded fixed scripts to the bugtracker.
You can try them.
I'm not sure if this is the correct exchange for this questions as I don't think it is explicitly programming related, but I can't think of a better place to ask the question.
I keep seeing this tab for chrome extensions that allows users to ask questions, suggest things or submit problems:
I haven't been able to find anything in the developer dashboard or in documentation about this tab. I know that I can get a support tab with a link by adding a url to the support link field in the project settings, but I can't figure out how to get the functionality shown here.
Go to https://chrome.google.com/webstore/developer/dashboard
Click in the link:
Edit your User Feedback preferences: User Feedback is disabled
And then enable it.
It's the same answer for Where does the Chrome web store "Support" tab come from?, it works for Apps and extensions.
I'm looking for the chrome extension that allows you to edit html source and instantly view the result. See the screenshot for mac, perhaps there is no such software available for windows version of chrome, but I would appreciate the mac version reference too.
There is already this kind of tool built in to Chrome. If you right click on HTML page and select "Inspect Element" you can make your changes and Chrome will update itself automaticly.
If you don't like this feature however and want one that looks beter, check out this link. I'm almost certain there will be some results that you like.
https://chrome.google.com/webstore/search-apps/Editor
I'm terribly sorry, this is NOT a chrome plugin, but node.js application https://github.com/phuu and this is really good one see the screen
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.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am experienced in HTML and JavaScript but have never made a (real) Chrome Extension (other than the "Hello World' tutorial).
What I want to do is make an extension that adds functionality to viewing images. Basically I want a pieice of JavaScript to load when you go to a .jpg, .png, ect. page.
I couldn't get much out of the "Hello World" tutorial or the Docs and I've looked at code from XML Tree, but I'm having trouble understanding it.
I don't know where to go from here.
Since you're experienced in JavaScript and HTML, tell you what the best source is?
http://developer.chrome.com/extensions/getstarted.html
Documentation
The above link (Chrome Extension Documentation) is so simple to read once you get a hang of it. For example, I didn't know JavaScript when I created my first Chrome Extension (Reload all tabs). I recommend you to read the docs (will only take you an hour), and follow the steps that you need.
Make sure you understand the different UI's you can tap to
Browser Actions: You use browser actions to put icons in the main Chrome toolbar.
Context Menus: You use context menus to add items to Chromes context menu.
Desktop Notifications: Use desktop notifications to notify users that something is important.
Option Pages: If you want an options page, this is your guy!
Page Actions: If you want to override certain pages (New Tab, History, Bookmark Manager)
Make sure you realize there are many browser interactions that you can tap into:
Bookmarks: Access to your bookmarks
Cookies: Access to Cookies
History: Access to History
Management: Access to Extension Management
Tabs: Access to your Tabs
Windows: Access to your Windows (which has Tabs).
Make sure you understand the difference between Background Pages and Content Scripts, and their limitations.
Make sure you realize there are some neat functions in the Chrome.* API.
Make sure you understand permissions.
Many more
145 Chrome Questions I answered on Stackoverflow
If you want more examples, I have answered many questions regarding Chrome Extensions that might help you get started (145+ Questions Answered), for example, here are some of the more recent ones:
Content Script Skeleton
Send data from Background Page to Content Script
Communication with the embedding page, Simple fetching of the pages JS variable
Taking Screenshots in Chrome
Walkthrough building an extension
Executing JavaScript when a user clicks on a browser action.
How to capture selected text and send it to a web service
Walkthrough how to create an extension to access Disqus Comment Box
Walkthrough how to highlight the DIV that the mouse if hovering over
Walkthrough how to move to the top of the page extension
Walkthrough how to create a bubble overlay when you select text.
etc and 120 more answers for Chrome Extensions, the above is what I copied from the results on the first page. So a search in Google will get you many results.
Real open source extension I created
If you want to see real source code of the extensions I have written (some are super small, some are super big):
Reload all tabs extension
Open link in a foreground tab extension
HTML5 Haptics Chrome extension
Set Wallpaper extension
Prayer times extension
Facebook friend exporter extension
Proxy Anywhere extension
Resources
If you still want more resources, you can:
Read the documentation.
Read the Official Chromium Extension Mailing list
The unofficial Internet Relay Chatroom #chromium-extensions on irc.freenode.net
Google (Will bring you to Stackoverflow, or Quora)
I hope this helped!
well it’s not that tough to create a chrome extension ,anyone who has a basic understanding of HTML,CSS,Javascript can actually make one!
If you want to make a extension I have wrote an article on Medium it might be useful here's the link
Also I have attached my code on github here’s the link
Keep Learning!