How can I see which websites use up most of my foreground data?
As I discussed a similar issue here: Android app to show what apps/processes are currently using data. The same workaround is applicable in this case too.

I will focus on this specific part however: 


  How can I track website data usage on chrome?


It is still possible using the mentioned tool: Network Connections 


To get website specific usage just open the app and navigate to Current Connections Tab.
The log is given in two formats i.e IP address or hostaname. If you want the Ip address resolved to hostname simply tap, Resolve IPs to Hostname option.

It should appear like this:




I produced this log, when I was browsing StackExchange website, and from the screenshot you can see it gives the data usage associated with the website an if you open another website it also shows data usage specific to that hostname and sub-hostname associated to that particular website. 

Only part that I am not sure is giving a very finer log on per website basis that can be stored as a seperate log, AFAICT you could periodically start live capture of traffic and see the sites which generate a lot of data usage.