javascript - Vue 和原生消息传递

Question

我创建了一个简单的测试网页，该网页使用以下示例向 native 应用程序发送数据和从 native 应用程序接收数据:

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

网络是使用 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>

插件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}
    );
  }
}

和 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;
}

我的问题是，我们如何让 Vue 接收返回的数据以便能够使用它、处理等等......我的意思是，将其保存在 vue 数据变量中。

谢谢!

Answer 1

在 Vue 组件中，使用计算属性返回消息的值，而计算属性会监视更改并相应更新。

例如:

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

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