谷歌插件笔记06——安全，请求和沙盒

相关简介

• 前言

在对谷歌扩展有一定了解之后，已经能写出比较多的页面：如弹窗、选项页之类的。这次，介绍两个个比较有用的功能，就是通过谷歌扩展发送异步请求和沙盒文件。

• 介绍

谷歌扩展发送异步请求在V2之前是通过XMLHttpRequest来发送的，不过在V3版本之后，推荐使用Fetch来发送异步请求，使用方式可以先看看Fetch使用文档

异步请求

在了解Fetch基本使用后，就可以使用了。这里写一个小Demo：获取Example页面的内容，并显示到popup.html弹窗页面。

注意> 使用Fetch请求需要在manifest.json清单文件中配置host_permissions，否则就会报如下图中错误。

编写思路：在popup.js中请求Example页面，拿到返回内容后使用innerHTML来显示内容，代码如下：

// popup.html
Example Page:

 
1
2
3

// popup.js
fetch('https://example.com/').then(res => res.text()).then(res => {document.querySelector('.example').innerHTML = res}) 
1
2

完成之后，在扩展页面刷新重新打开弹窗，发现效果已经实现:

这样，就成功完成了一次异步请求。以上，就是异步请求的基本使用方式。

沙盒文件

现在，来介绍一下沙盒文件是干嘛的。以为在谷歌扩展开发中，开发者可能会用到一些比较危险的API来开发功能，例如eval和Function这类接口。所以，就会对扩展造成潜在的危险（因为这样可能会造成恶意执行chrome.*这些方法等）。

上图是直接使用eval这类接口会在控制台打印出的错误日志。

这里，就用过沙盒文件的方式来实现一个计算器功能，思路就是：

1.通过创建一个沙盒文件，在沙盒文件中实现功能；
2.在popup.html中引入沙盒文件，使用iframe来展示。

过程很简单，但现在要明确的就是怎么样创建一个沙盒文件，其实很简单。通过在manifest_json清单文件中加入sandbox属性，如下方配置即可，接着就能完成如下的代码编写：

// manifest.json
{"name": "safe","description": "safe...","version": "0.0.1","manifest_version": 3,"background": {"service_worker": "background.js"},"action": {"default_title": "safe","default_icon": "logo.png","default_popup": "popup.html"},"sandbox": {"pages": ["iframe.html"]}
} 
1
2
3

//popup.html



 
1
2
3
4
5

// iframe.html
计算器:
计算结果结果：-
 
1
2
3

// iframe.js
document.querySelector('button').addEventListener('click', () => {const value = document.querySelector('input').valuedocument.querySelector('span').innerText = eval(value)
}) 
1
2
3

完成之后，一切顺利的话，就能看到如下的效果图了：

消息传递 因为使用了iFrame窗口来显示页面，并且不能调用chrome.*等接口，所以如果想要进行消息传递的话，就需要使用window.postMessage来传递数据了，例如：

const iframe = document.querySelector('iframe')
setTimeout(() => {iframe.contentWindow.postMessage({command: 'greet',context: { msg: 'hello' }}, '*')
}, 500) 
1
2
3

关于window.postMessage可以查看MDN上的postMessage文档 内容。至此，已经回到异步请求和沙箱安全的基本使用了:)