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

·  阅读 136
谷歌插件笔记06——安全,请求和沙盒

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

相关简介

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

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

异步请求

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

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

image.png

编写思路:在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
  })
复制代码

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

image.png

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

沙盒文件

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

image.png

上图是直接使用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"]
  }
}
复制代码
//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)
})
复制代码

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

crx03.gif

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

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

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改