在弹出窗口.html从后台.js的Onclicked事件

onclicked event in popup.html from background.js

本文关键字：js Onclicked 事件 后台 窗口 html      更新时间：2023-09-26

我想知道是否有一种方法可以设置背景。js做一些事情，如果在弹出窗口。html中的特定元素被点击，如:

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

我是开发Chrome扩展的新手。

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

  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事件)，所以它落在前两种方法上，让后台知道弹出窗口已经打开并准备好了。

我认为你应该"本末倒置"，即颠倒过来思考

假设，你想在你的后台脚本中执行以下方法，点击弹出窗口的一个元素:

function yourBackgroundMethod(parameter) {
   ...
}

如果你点击了弹出窗口中的内容，你可以在弹出窗口中使用Javascript到

  1. 添加一个点击事件监听器到元素

  2. 在click处理程序中，您可以访问后台脚本(即其窗口对象)并直接在后台脚本上下文中执行代码

    chrome.runtime.getBackgroundPage(function(bgWindow) {
   bgWindow.yourBackgroundMethod(yourParameter);
});
相关文章：