谷歌插件流程：第二回

在前文中，我们通过一个小例子，简单介绍了谷歌插件的一些规则。那么本文正式尝试着，去实现自己的视频下载器插件的开发。

目的：能够自动下载知乎上的短视频资源。
古语云：知己知彼百战不殆。那么我们首先就去看一看知乎站点的小视频资源是如何加载的。
图片描述

我们发现，video的src属性绑定的是真实的资源地址，也就是说，我们只需要找到video标签即可。
思路: 进入到目标tab页面的环境，获取video标签,创建a标签下载.所以有了如下代码:

changeColor.addEventListener("click", async () => {
  console.log('click')
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: downloadVideo,
  })
})

function downloadVideo() {
  console.log('downloadVideo')
  let video = document.getElementsByTagName('video')[0]
  console.log('video>>>', video)
  const url = video.src
  const aEl = document.createElement('a')
  aEl.href = url
  aEl.download = 'test.mp4'
}

监听点击事件,捕捉到事件,执行注入脚本.获取video标签的src属性,然后就是前端自动下载那一套.

文毕。