我正在为特定页面构建一个chrome扩展:https://www.vidangel.com/.
我不拥有这个页面，但是检查它，我可以看到它是建立在Vue上的。我需要读取页面多次使用的特定信息，这是通过一个名为" getactivetag "(以防有人费心查看bundle文件https://www.vidangel.com/js/app.25e52655.js)。它是Vue组件中的一个方法:
<template>
<div class="lineup-barvisual">
<div class="lineup-barvisual-panel">
<div class="lineup-barvisual-title">You'll see</div>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop class="stop-start" offset="0%" />
<stop class="stop-end" offset="100%" />
</linearGradient>
</defs>
<rect class="backdrop"></rect>
<g v-if="tag_set && lineup">
<rect class="cuts" v-for="tag in getActiveAudioTags()" :key="tag.id" :x="tagLeft(tag)" :width="tagWidth(tag)"/>
</g>
</svg>
</div>
<div class="lineup-barvisual-panel">
<div class="lineup-barvisual-title">You'll hear</div>
<svg>
<rect class="backdrop"></rect>
<g v-if="tag_set && lineup">
<rect class="cuts" v-for="tag in getActiveTags()" :key="tag.id" :x="tagLeft(tag)" :width="tagWidth(tag)" />
</g>
</svg>
</div>
</div>
</template>
<script>
import api from 'services/api'
export default {
props: ['tag_set', 'lineup'],
methods: {
tagLeft(tag) {
return ((tag.start_approx / this.lineup.work.duration) * 100) + '%'
},
tagWidth(tag) {
return Math.max((((tag.end_approx - tag.start_approx) / this.lineup.work.duration) * 100), 0.075) + '%'
},
getActiveTags() {
return this.tag_set.tags.filter(tag => this.lineup.isTagOn(tag))
},
getActiveAudioTags() {
return this.getActiveTags().filter(tag => tag.type === 'audiovisual')
},
paint() {
this.$forceUpdate()
}
},
watch:{
'lineup.id'(id, old_id) {
api.hub.$off(`model.lineup.${old_id}.touched`, this.paint)
if (id) api.hub.$on(`model.lineup.${id}.touched`, this.paint)
}
},
beforeDestroy() {
if (this.lineup) {
api.hub.$off(`model.lineup.${this.lineup.id}.touched`, this.paint)
}
}
}
</script>
我不知道这些'tag_set'和'line '道具是从哪里来的(我没有很好的Vue知识)，但它们似乎与这个有关:
从'services/API '中导入API
let TagSet = api.defineResource({
name: 'TagSet',
endpoint: 'tag-sets',
relations: {
belongsTo: {
CatalogItem: {
localField: 'work',
localKey: 'work_id'
}
},
hasMany: {
Tag: {
localField: 'tags',
foreignKey: 'tag_set_id'
}
}
},
methods: {
tags_count() {
return this.tags.length
},
tags_active(lineup) {
return this.tags.filter(t => lineup.refmap[t.ref_id])
},
tags_active_count(lineup) {
return this.tags_active(lineup).length
}
},
watchChanges: false
})
api.defineResource({
name: 'Tag',
relations: {
belongsTo: {
TagCategory: {
localField: 'category',
localKey: 'category_id'
}
}
}
})
export default TagSet
虽然我不知道这是如何工作的。我认为标记集信息存储在某种redux对象中，因为它可以从多个组件访问。
我目前使用的解决方案是用declarativetrequest覆盖包文件，稍微修改脚本，其中包括在getActiveTags方法一小段代码，创建或更新DOM上的一个不可见的跨度，它有作为它的InnerText getActiveTags返回值的严格版本:
getActiveTags: function () {
var t = this;
let tags = this.tag_set.tags.filter(e => t.lineup.isTagOn(e));
let tagsMap = tags.map(tag => ({begin: tag.begin, end: tag.end}));
let elemento = document.getElementById('lista-tags');
if (!elemento) {
elemento = document.createElement('span');
elemento.id = 'lista-tags';
elemento.style = 'display: none';
document.body.appendChild(elemento);
}
elemento.innerText = JSON.stringify(tagsMap);
return tags;
我试图添加" getactivetag "方法到全局窗口对象，它可以在开发工具上访问，但无法从扩展代码访问，甚至在contentScript(我不知道为什么)。但是，即使这个解决方案更好，它仍然存在问题，因为我必须保存这些修改的捆绑包的副本，所以如果原始页面进行修改，用户可能会看到页面的过时版本。
所以我真正想要的是一种从窗口对象访问的方法，即由原始脚本定义的vue组件的方法，而不必覆盖bundle。有办法做到这一点吗?我该如何找到值分量呢?(我尝试了很长时间在开发工具上检查窗口对象，但没有找到vue组件。)谢谢你。
我花了很长时间才明白。您可以通过元素的. __ve__对象访问值组件方法。所以，在我的例子中，我必须这样做:
document.querySelector('.lineup-barvisual').__vue__.getActiveTags()