谷歌插件笔记06——安全，请求和沙盒在对谷歌扩展有一定了解之后，已经能写出比较多的页面：如弹窗、选项页之类的。这次，介绍

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

异步请求

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

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

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

// popup.html
<body>
  <div class="app">
    <h2>Example Page:</h2>
    <div class="example"></div>
  </div>
  <script src="popup.js"></script>
</body>

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

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

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

沙盒文件

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

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

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

通过创建一个沙盒文件，在沙盒文件中实现功能；
在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"]
  }
}

//popup.html
<div class="app">
<iframe src="iframe.html" frameborder="0"></iframe>
</div>
<script src="popup.js"></script>

// iframe.html
<body>
  <h2>计算器:</h2>
  <input class="ipt" placeholder="请输入要计算的表达式" />
  <div>
    <button>计算结果</button>
    结果：<span>-</span>
  </div>
  <script src="iframe.js"></script>
</body>

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

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

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

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

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

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

相关简介

异步请求

沙盒文件