I'm creating a simple extension for google chrome and I can't understand how to communicate the background page with the popup page. i am using vue.
manifest.json
{
"manifest_version":2,
"name":"extension de prueba",
"description":"..",
"version":"0.1",
"browser_action":{
"default_popup":"index.html",
"default_title":"mmmm"
},
"permissions":["tabs"],
"background":{
"scripts":["background.js"],
"persistent": false
}
}
app.vue
<template>
<div id="app">
{{ saludo }}
</div>
</template>
<script>
alert(mensaje); // ERROR mensaje no esta definida
export default {
name: 'app',
data () {
return {
saludo:'hola mundo'
}
}
}
</script>
<style>
body{
background-color: #001835;
width: 400px;
height: 250px;
}
</style>
background.js
'use strict'
let mensaje = 'HOLA';
In summary, what I would like would be to send the message variable to the App.vue component.
I solved this problem with the combination of this method
chrome.runtime.sendMessage
and the eventchrome.runtime.onMessage
. in this way the communication of the background and the popup script is achieved and vice versa:background.js
app.vue