I am new to chrome extension, I want to add a button to Gmail compose bar like this. I tried some of Gmail API to achieve but couldn't find my solution.
If anyone has the idea what will be the approach
You should take a look at gmail-js npm package. It provides a lot of interface to communicate with the Gmail App for your chrome extension. I am currently working on a chrome extension myself that is supposed to work with the Gmail app, and it has made my life so much easier.
Look at the gmail.tools.add_toolbar_button function in the documentation for this particular case.
There are a few things that you need to be careful of though. For example, you can not use the apis this package provides in your content script, you'll have to inject it to the page DOM. The brolierplate example is very helpful to get you started.
Also, the communication between the injected file and content_script can not be done using chrome.runtime API, you will have to use window.postMessage API for that.
Good luck.
Related
I wanted to know if there is a way to use the microsoft's cortana api from a web application. Basically to use speech to text for entering text into an input box and do some operations on that. I had tried using the javascript WebSpeechAPI toobut its only for chrome i guess. Any info on the use of cortana api or any other alternatives for a .NET web app will be helpful.
What i found so far -
I know that cortana is supported on UWP (universal windows platform) apps.. so was wondering if there could be a hack to create an api which i could call from the client to invoke cortana and get my work done. there is also a github repo that makes use of a meta tag pointing to a VCD (voice command definition) config file but not sure how to make use of that.
Any help or ideas would be appreciated.
thanks!
I would like to scrape a website by just running code in a browser. In this case, the scraper has to run on a specific machine, and I cannot install any software on that machine. However, there is already a browser installed (recent version of Firefox), and I can configure the browser however I want.
What I would like is a javascript solution for scraping, contained in a webpage on site A, that can scrape site B. It seems like this would run into some CORS-type problems; I assume that part of the solution is to disable any cross-origin checks in the browser.
What I have tried so far: I looked up "web scraping in javascript", this brings up a lot of stuff intended to run in nodejs with cheerio for example this tutorial, and also stuff like pjscrape which requires PhantomJS. However, I couldn't find anything equivalent that is intended to run in a browser.
P.S. This is interesting: Firefox setting to enable cross domain ajax request Apparently Chrome --disable-web-security takes care of the cross-origin/cross-domain issues. Firefox equivalent?
P.S. Looks like ForceCORS extension to Firefox is also useful: http://www-jo.se/f.pfleger/forcecors I'm not sure if I'll be able to install that though.
P.S. This is a nice collection of ways to allow cross-domain in different browsers: http://romkey.com/2011/04/23/getting-around-same-origin-policy-in-web-browsers/ Sadly, the suggested Firefox solution doesn't work in versions >=5.
edit: looks like import.io service shut down and the url points to something completely different now. consider this answer obsolete.
try to do it with import.io: ( basically a scraping service with REST API)
as soon as i have a example javascript call to the API i can provide it. Or you check the docs yourself.
Import.io allows you to structure the data you find on webpages into rows and columns, using simple point and click technology.
First you locate your data: navigate to a website using our browser (download it from us here: http://import.io).
Then, enter our dedicated data extraction workflow by clicking the pink IO button in the top right of the Browser.
We will guide you through structuring the data on the page. You teach import.io how to extract the data by showing us examples of where the data is. We create learning algorithms that generalize from these examples to work out how to get all the data on the website.
The data you collect is stored on our cloud servers to be downloaded and shared. And every time you publish to our platform we create an API to get the data programatically so you can easily integrate live web data into your applications or third party analytics and visualization software.
EDIT:
If the data recognition works in the browser you can simply access the data by heading to "simple API integration" and Copy the url
the url u can paste here:
function reqListener () {
console.log(JSON.parse(this.responseText));
return JSON.parse(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "yourUrlFromClipboardComesHere", true);
oReq.send();
xhr request source
I would like to develop an app for Bigcommerce that other users of the platform could use. The app should add a simple javascript embed code to all pages of the store. The embed code is similar in nature to google analytics embed or chat services embed codes.
I have opened up a trial account with Bigcommerce and found out that it is very easy to manually edit the page templates to add such an embed code, but I would like to be able to develop an app that store owners could install and not have to mess with editing and copy-pasting embed codes into their page templates.
Unfortunately there is no mechanism currently for BigCommerce that allows for the editing of template code via the app.
I can give you pointers as to where you can put your code to make it globally available.
If you need something in the <head> globally: /Panels/HTMLHead.html
If you need something at the beginning, right after the <body>: /Panel/DrawerMenu.html
If you need something at the end, right before the </body>: /Panels/Footer.html
These are the 3 common places most javascript things (like tracking pixels and analytics) usually go.
Other "extensions" for BigCommerce, such as OLark and Zendesk and Analytics, all just give either a web page with instructions, or a PDF with installation instructions. You could provide your functionality via the same means in lieu of an app doing it.
I haven't really worked with Bigcommerce, but I went thorough their docs and it looks like there is no option for custom module that you can upload and use on their server. And that makes perfect sense.
So I would say the only "forth to try" option is to build browser extension, that does the job for you. As I understood, you can control html output of your store by choosing "Themes" tab > "Edit HTML/CSS", so extension should be able to walk through the three of pages in the left panel.
Chrome Extension
Firefox extension
I'm creating a personal home page, due to the fact that iGoogle will be discontinued. One of the things I'm trying to create, is a speed dial-type interface, with website thumbnails as links, and I'd like to automate this process.
I've attempted screenshot automation a few years back with linux and the webkit engine. And it's fine. But my problem is, that I want the screenshots to be from my browser, i.e. my Gmail inbox, not the login page I'd get if attempting a remote screenshot.
I thought of using html2canvas but again, I'd have to load the source of the webpages remotely using a proxy, and that's not what I want. Another attempt of mine, was to load the website in an iframe, extract the source, and pass it on to html2canvas. Unfortunately most websites like google, facebook etc don't allow embeding their websites into iframes, so I'm still stuck.
How do plugins like FoxTab, and SpeedDial make the screenshots from within the browser without popups etc? They do it "browser side" silently, is it possible to duplicate this using just JavaScript? Or is there a way I could accomplish the same in another way, perhaps with a custom addon or something?..
Have you considered using a service like http://webthumbnail.org/ ?
http://phantomjs.org/ is also a great service for that if you want to do it yourself.
Take a look at phatomjs. We use it to take screenshots of all our hosted sites periodically. Phantomjs is a headless Webkit implementation.
I found the some strange <script/> tags on a site:
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/document_iterator.js"></script>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/find_proxy.js"></script>
...
I haven't been able to find much information on this, but I highly doubt this is actually related to Google Chrome since this site in particular is still using <table>s for layout, and the source in question was retrieved with curl not a graphical web browser.
So,
What on earth is this?
What is chrome-extension://
Why is it using lifbcibllhkdhoafpjfnlhfpfgnpldfl as a directory name
Why is it pretending to be valid URL to a javascript file?
Why would I need find_proxy or document_iterator
Solved. As far as I know...
chrixian was right, It seems that only on this and a few select other pages, someone had re-saved them from Chrome's source-view with the Skype extension installed.
Thanks everyone for all your help, +1's for all! enjoy!
That is actually Skype Click to Call chrome extension.
Manage and view it using this link
chrome://extensions/?id=lifbcibllhkdhoafpjfnlhfpfgnpldfl
If you are using cURL to get the page, you're getting the HTML as it exists on the server--so I think a safe assumption would be: the author of the page initially saved the page from Chrome, he had an extension installed that inserted these script tages and lastly he didn't remove the script tags for one reason or another before putting the page on the server.
This is added by chrome as the page loads, to inject the extension's Javascript code into the page, so it can access the HTML document.
The Skype extension causes it by inserting all kinds of junk in webpages that you visit.
Do you have the Skype browser extension installed for Chrome?
Just disable the extension.
Chrome, like Firefox, provides developers with an easy API to extend the functionality of the web browser without needing to actually download and build the browser to do so.
They also provide a robust delivery system. In Google's case, it's the Google Chrome Web Store.
Extensions are installed locally on your computer, and use long strings as directory names to reduce the risk of collisions with another extension. In other words, if you and I both named our extensions "mycoolextension", then there would be a problem if a person tried to install your extension and my extension. The long string helps prevent collisions such as this.
The chrome-extension:// protocol is used by the browser to make requests to these local resources. Chrome extensions are developed using HTML5, JavaScript, and CSS, along with an API exposed to allow the local JavaScript to perform actions it would not normally be able to do on the Internet.
When you see these in the Chrome developer tools, it's just the extension doing it's thing, whatever that may be.
If you're seeing these, then you likely installed some extensions from the Chrome Web Store. To view them, go to the Tools menu and select "Extensions". This will show you a list of all installed Chrome extensions and apps.
To learn more about extension development, see the Getting Started Tutorial.
Also, as someone else mentioned, you're using the Skype Call Extension. However, an app using that directory name doesn't appear in the first page of the search results. It might be worth doing some more research to make sure you got that extension from a legitimate source, whether that be Skype or the Chrome Web Store.
If you're seeing it in Chrome developer tools for every request you make, it means it has access to all your websites, which could be benign, like if they're just making phone numbers clickable, or it could be malicious, if it's scraping your bank account info and shipping it off to some third party server. :)
It's a Chrome extension, and chrome-extension:// is a URL for extensions to address their contents via Javascript.
lifbcibllhkdhoafpjfnlhfpfgnpldfl is the unique identifier for the extension. I can't find it with a search, but apparently it might be Skype.
It's not pretending... it is a valid URL. The Javascript file is located in the extension. If you were to look on your harddrive you'd probably find that very file in the extensions folder.
The functions its calling probably are some sort of detection used by the extension to see if it needs to enable itself.
See this for some additional information:
Checking if user has a certain extension installed