无法在Chrome扩展程序中使用connect事件

Question

我有content.js，popup.html，popup.js。我在chrome扩展程序中使用vue，因为我使用了Vue CDN。都很好。在content.js中，如果我打印文档，它正在打印当前的标签文档（例如：google.com）。现在，我有一个chrome扩展名按钮，单击该按钮后，我想再次访问该文档（google.com）。我该怎么办？

在popup.js中

    onClickButton: function() {
          var port = chrome.extension.connect({
           name: "Sample Communication"
          });
          port.postMessage("Hi BackGround");
          port.onMessage.addListener(function(msg) {
              console.log("message recieved" + msg);
          });
    }

在content.js中

chrome.runtime.onConnect.addListener(function(port) {
    console.log("Connected .....");
    port.onMessage.addListener(function(msg) {
      console.log("message recieved" + msg);
      port.postMessage("Hi Popup.js");
   });
})

事件不是事件触发这里的错误吗？