來自background.js的popup.html中的onclicked事件

Question

我想簡單地知道是否可以通過單擊popup.html中的特定元素來設置background.js以執行某些操作，例如：

chrome.browserAction.getPopup(function(){
  document.getElementById('me').addEventListener('click', function(){
    /* do something ! */
  });
});

我是開發Chrome擴展程序的新手。

Answer 1

有兩種方法可以實現您要完成的任務； 兩者都需要在彈出窗口中使用單獨的腳本。

1. 直接調用后台頁面 （易於實現）。 從概念上講，它與您嘗試執行的操作類似，但方向相反。

   （這由devnull69的答案覆蓋）

2. 消息背景頁面。 它的結構更簡潔（您將彈出窗口和后台的工作方式分離開來），並且如果您從彈出窗口轉到內容腳本，它們將無法工作，因為它們無法直接調用后台。

background.js：

chrome.runtime.onMessage.addListener( function(message, sender, sendResponse) {
  if(message.from && message.from === "popup"){
    switch(message.action){
      case "doSomething":
        /* Do something */
        /* Maybe sendResponse(something) */
        break;
    }
  }
});

popup.js

function doSomethingAfterwards(response){
  /* Do something else */
}

document.getElementById('me').addEventListener('click', function(){
  chrome.runtime.sendMessage(
    {from: "popup", action: "doSomething"},
    doSomethingAfterwards
  );
});

---

編輯： 僅出於完成的目的 ，我要添加一個方法chrome.extension.getViews ，它可以執行您最初想要的操作。

var popup = chrome.extension.getViews({type: "popup"})[0];
popup.document.getElementById('me').addEventListener('click', function(){
  /* do something ! */
});

但是使用它不是一個好主意：何時調用它？ 您的背景頁面不會自動收到有關您的彈出窗口已打開的通知（如果有彈出窗口，則不會再chrome.browserAction.onClicked事件），因此它依靠前兩種方法讓背景知道彈出窗口已打開准備好了

Answer 2

我認為您應該“把馬車放在馬前”，即認為是相反的方向

假設您要在彈出窗口的元素上單擊后在后台腳本中執行以下方法：

function yourBackgroundMethod(parameter) {
   ...
}

如果您在彈出窗口中單擊某些內容，則可以從彈出窗口中使用Javascript來

1. 向元素添加點擊事件監聽器

2. 在點擊處理程序內，您可以訪問后台腳本（即其窗口對象）並直接在后台腳本上下文中執行代碼

    chrome.runtime.getBackgroundPage(function(bgWindow) { bgWindow.yourBackgroundMethod(yourParameter); });