Question

我想知道是否有一种方法可以设置background.js，以便在点击popup.html中的特定元素时执行某些操作，例如：

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

我是开发Chrome扩展程序的新手。

Answer 1

有两种方法可以达到你想要做的事情;两者都需要弹出窗口中的单独脚本。

Call background page（更容易实现）。它在概念上与您尝试做的相似，但在另一个方向。

（这由devnull69's answer）
Message背景页面。它结构更清晰（你可以分离弹出窗口和背景的工作方式），如果你从弹出窗口转移到内容脚本，它们将无法工作，因为它们不能直接调用背景。

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

向元素
在点击处理程序中，您可以访问后台脚本（即其窗口对象）并直接在后台脚本上下文中执行代码
```
chrome.runtime.getBackgroundPage(function(bgWindow) {
   bgWindow.yourBackgroundMethod(yourParameter);
});
```

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

2 个答案: