I am facing an issue with my vue-component which I intend to use as an extension-popup. The problem is that I am unable to access the chrome extension APIs from within the .vue file.
The structure of the component is as follows:
<template>
<div>
<button @click="handleClick"> Hey and ho </button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
},
methods: {
handleClick() {
// Here is an example of code that I would like to use, it works but vetur indicates that it doesn't exist
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "red";'}
);
});
}
},
})
</script>
Although the button functions correctly when I build and run the extension, it becomes inconvenient to test every single change due to uncertainty about spelling errors.
I have already installed @types/chrome and they work well in other .ts files except within .vue files. Can anyone provide a solution to this problem?
Thank you!