chrome插件开发-自动化脚本(3)

接上一篇文章 chrome插件开发-自动化脚本(2)

持续优化

运行脚本时自动切换到当前窗口并调整到合适大小

1. 添加脚本时保存当前窗口大小

chrome.tabs.get(chrome.devtools.inspectedWindow.tabId, (tab) => {
    let urlPath = this.$getOnlyUrl(tab.url)
    chrome.windows.get(tab.windowId, (window) => {
      this.caseList.push({
        name: '脚本名称',
        urlPath: urlPath,
        eventList: [],
        // 获取到tab所在窗口的大小
        width: window.width,
        height: window.height
      })
    })
})

2. 录制时调整窗口大小并切换到所在tab

// devtools.js 多加了2个参数 width,height
this.backgroundPageConnection.postMessage({
    type: 'bind',
    tabId: chrome.devtools.inspectedWindow.tabId,
    width: this.currentCaseDetail.width,
    height: this.currentCaseDetail.height
})

// background.js 切换并调整窗口
focusTab(message.tabId, message.width, message.height)

function focusTab (tabId, width, height) {
  chrome.tabs.get(tabId, function (tab) {
    chrome.tabs.highlight({windowId: tab.windowId, tabs: tab.index})
    let config = {
      state: 'normal', // 最大化时改变不了大小
      focused: true
    }
    if (width && height) {
      config.width = width
      config.height = height
    }
    chrome.windows.update(tab.windowId, config)
  })
}

单个事件-可视化高亮

参考了vue-devtool的开源项目的高亮效果. 做这个功能是为了学习vue的开发工具的代码,也为了用户体验好一些.

1. 首先需要把每个事件显示出来

// event-item 组件
 <div
    class="event-item"
    @mouseover="highlight()"
    @mouseleave="unhighlight()">
    <div v-if="item.type == 'click'">
      点击 {{item.tagName}}
    </div>
    <div v-else-if="item.type == 'scroll'">
      滚动 深度({{item.scrollList.length}})
    </div>
    <div v-else-if="item.type == 'set-input-value'">
      输入 {{item.value}}
    </div>
    <div v-else>暂不识别</div>
 </div>

2. 鼠标移动上去后,在页面位置高亮相关事件信息 目前只有3个事件, 点击和滚动事件是明确知道鼠标的xy坐标的, 输入事件的做法如下

highlight () {
    // 获取到需要高亮的xy坐标, content 为需要在页面上显示的内容
    let xy = {x:0, y:0, content: ''}
    if (this.item.type === 'click') {
      xy.x = this.item.x
      xy.y = this.item.y
      xy.content = '点击'
    } else if (this.item.type === 'scroll') {
      xy.x = this.item.mouseX
      xy.y = this.item.mouseY
      xy.content = '滚动'
    } else if (this.item.type === 'set-input-value') {
      // 向上查第一个click事件的xy坐标
      for (let i = this.itemIndex - 1; i >= 0; i--) {
        if (this.list[i].type === 'click' && this.list[i].tagName === 'INPUT') {
          xy.x = this.list[i].x
          xy.y = this.list[i].y
          break
        }
      }
      xy.content = '输入'
    } else {
      return
    }
    this.backgroundPageConnection.postMessage({
      type: 'dom-highlight',
      tabId: chrome.devtools.inspectedWindow.tabId,
      highlightData: xy
    })
},

创建高亮信息的代码可以看这里 highlight.js

3. 鼠标移开就移除高亮

unhighlight () {
    this.backgroundPageConnection.postMessage({
      type: 'dom-unhighlight',
      tabId: chrome.devtools.inspectedWindow.tabId
    })
}

单个事件-可编辑内容

具体做法也是参考vue-devtool

在chrome应用商店中安装

最近注册了谷歌开发者, 并且上传了扩展程序也通过了审核.

需要科学上网访问 chrome.google.com/webstore/de…

下一次的优化内容

导入导出脚本(未实现)

单个脚本-不同变量多次运行(未实现)

使用场景: 各个网站表单自动输入提交

导出运行结果(未实现)

使用场景: 上一步提交表单后的结果导出