使用vue dev tool调试chrome浏览器扩展的content script

2020.12.05更新

由于chrome CORS策略，此方法以无法使用。
但vue-devtools目前支持在源码内直接引入连接到vue-devtools。详见：devtools readme

// content-script.js

import devtools from '@vue/devtools' // Make sure you import devtools before Vue, otherwise it might not work as expected.
import Vue from 'vue'

if (process.env.NODE_ENV === 'development') {
  devtools.connect(/* host, port */)
}  

以下为旧内容：

1.安装vue-remote-devtools

npm install -g @vue/devtools

2.在终端里运行

vue-devtools

3.使用GET请求获取脚本并使用eval运行

// at your content script
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8098/')
xhr.onload = function (x, e) {
  eval(x.currentTarget.responseText)
};
xhr.send();

4.重新装载扩展刷新页面，效果如下

image.png