在框架支持下 进行浏览器跨域调用

在Web技术不断革新，浏览器的构建也发生了巨大变化，在现代构建中，前后端框架的引入让构建更便捷高效，同时出现的问题也层出不穷。本期我们将聊一聊那些浏览器原生DevTools工具的特性，以及通过浏览器架构扩展后可以有哪些应用。

DevTools 支持跨浏览器调用

Web环境中，如果需要调用别的页面的内部API，或者通过别的浏览器调用自己的页面API，这种情况一般称为跨域。跨域想要实现的关键点在于让调用者所在的页面，能够在调用被调用者页面的时候，能够获得被调用者页面的资源和DOM。

在某些情况下，要与其他应用程序或网站通信，例如，从扩展程序中调用浏览器窗口中的 JavaScript。在这时候就会需要进行跨域调用。

而DevTools内部的开发者工具是JavaScript运行时环境中的内置部分，也就是说开发者工具所做的一切，包括调用跨域页面，都是在一个JS上下文中，并没有网络的概念。也就是说，对于DevTools来说，不存在跨域的限制。

那么DevTools是如何处理跨域资源的呢？事实上，在不同页面的环境下，可以通过使用 window.postMessage 方法来实现跨域通信，而 DevTools正是基于这个原则实现跨域调用。

一般情况下，JS只有在当前页面向其添加了跨域处理后，才可以访问跨域资源，而DevTools则不同，它可以访问任何网页上的资源。要使用跨域资源，只需要在 DevTools 中使用该资源的 URL， 而不用担心跨域问题。

扩展支持跨浏览器调用

浏览器架构的发展少不了扩展的作用，扩展实现了浏览器的很多特性。当扩展想要与浏览器窗口进行通信时，就需要跨越不同的环境，而DevTools则提供了一个很好的平台，让扩展能够与浏览器窗口进行通信，所以跨浏览器支持也就成为了一个重要的特性。

跨浏览器支持不仅仅指不同浏览器之间的通信，还包括不同设备或环境之间的通信，例如，在扩展程序中调用移动浏览器中的 JavaScript。

跨浏览器特性的支持情况

了解了扩展可以通过浏览器架构实现跨浏览器支持，那就需要了解浏览器架构对于各浏览器的支持情况，目前，主要的浏览器，包括 Chrome、Firefox、Safari 和 Edge，都支持跨浏览器扩展。

虽然跨浏览器扩展是一个强大的特性，但它也有局限性。跨浏览器扩展不能访问用户的所有数据，比如用户密码、书签或历史记录。跨浏览器扩展也不能改变用户界面的外观或行为。

跨浏览器扩展的使用，让浏览器扩展变得更加有用，在未来，随着扩展能力的进一步增强，将更加方便开发者扩展的使用，解决各种跨域场景的痛点。

需要指出的是，在扩展中调用跨域资源，需要确保两端都有跨域处理。比如，如果在一个页面中想要调用另一个页面的 JavaScript 函数，那么这两个页面都需要添加跨域处理代码。