I currently use uMatrix for this and it implements this almost perfectly. However, it's scope is too narrow: it only controls requests within the webpage, so doesn't have access to it many requests the browser will make outside of that scope.
If you start by broadening the scope from webpage to browser, you eventually get to the operating system level, at which point we're really just talking about a firewall/proxy tool with granular control. I've used things like privoxy and proxomitron for this in the past; little snitch is the best I've used in terms of UX and control, but it's still nowhere near as good as the uMatrix interface.
There are a number of challenges with making such a tool, the primary two being: (1) mitming secure connections, (2) contextual control, differentiating iframe, js, css, image, etc. requests becomes more difficult once you're working at a global level.
Given these limitations, uMatrix in combination with a good, strict about:config that allows granular control over everything may be the best we can ask for in the short term.