javascript - Vue和本机消息传递(Vue & Native messaging)

Question

I've created a simple test webpage that sends data and receives data to/from a native application using the example in:(我使用以下示例创建了一个简单的测试网页，该网页可以向本机应用程序发送数据或从本机应用程序接收数据：)

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging(https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Native_messaging)

The web is created using Vue:(使用Vue创建网络：)

<template>
    <div>
        Enter Message: <input id="message"></input>
        <button id="ping" type="button">Ping!</button><br/>
        Output message: <span id="output"></span>
    </div>
</template>

<script>

export default {

}
</script>

The plugin background.js(插件background.js)

/*
On startup, connect to the "ping_pong" app.
*/
var port = browser.runtime.connectNative("ping_pong");

/*
Listen for messages from the app.
*/

port.onMessage.addListener((response) => {
  console.log("bg Received: " + response);

  browser.tabs.query({
    currentWindow: true,
    active: true
  }).then(sendMessageToTabs.bind(null, response))


});

browser.runtime.onMessage.addListener(notify);

function notify(message) {
  console.log("bg Sending:  ping" + message);
  port.postMessage("Received and returned message: " + message);
}



function sendMessageToTabs(message, tabs ) {
    console.log("bs message:");
    console.log(message);
    console.log("bs tabs:");
    console.log(tabs);
  for (let tab of tabs) {
    browser.tabs.sendMessage(
      tab.id,
      {message}
    );
  }
}

and contentScript.js(和contentScript.js)

console.log("Content script found!");

if (document.getElementById("ping")) {
    document.getElementById("ping").addEventListener("click", notifyExtension);
}

function notifyExtension(e) {
    console.log("cs Clicked!");
    console.log("cs sending " + document.getElementById("message").value);
    browser.runtime.sendMessage(document.getElementById("message").value);
}

browser.runtime.onMessage.addListener(notify);

function notify(message) {
    console.log("cs Received; ");
    console.log(message);
    document.getElementById("output").innerHTML = message.message;
}

My question is, what would we the way to make Vue receive the returned data to be able to use it, process, etc... I mean, to save it in a vue data variable.(我的问题是，如何使Vue接收返回的数据以能够使用它，进行处理等？我的意思是，将其保存在vue数据变量中。)

Thanks!(谢谢！)

  ask by JaviS translate from so

Answer 1

In your Vue component, use a computed property to return the value of the message, whereas computed properties watch for changes and update accordingly.(在Vue组件中，使用计算属性返回消息的值，而计算属性监视更改并相应地进行更新。)

For example:(例如：)

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  computed: {
    message() {
      return window.message // or whatever the variable is
    }
  }
}
</script>