google-chrome-extension - 当页面操作有弹出窗口时如何判断何时单击页面操作

Question

来自https://developer.chrome.com/extensions/pageAction.html#event-onClicked：

chrome.pageAction.onClicked.addListener(function(tabs.Tab tab) {...});

单击页面操作图标时触发。如果页面操作有弹出窗口，则不会触发此事件。

那么，如果页面操作确实使用了弹出窗口，我该如何判断它何时被点击呢？

Answer 1

设置弹出窗口时，单击按钮会加载并显示弹出页面。同时，该onClicked事件不会被触发。因此，如果您想在设置弹出窗口时检测点击，请在 popup.js 中添加一些代码。

例如：如果您没有弹出窗口的代码如下所示：

// background/event page
chrome.pageAction.onClicked.addListener(function(tab) {
    // Do something
});

然后从后台/事件页面中去掉那段代码，把代码放到popup.js中：

document.addEventListener('DOMContentLoaded', function() {
    // Do something, e.g. send a message to content or background script
});

如果将逻辑保留在后台页面中很重要，例如，如果您正在发起 http 请求、数据库访问等，则使用消息传递来通知后台页面正在单击按钮：

// popup.js
chrome.runtime.sendMessage('pageActionClicked');

// background.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message === 'pageActionClicked') {
        // Do something
    }
});

如果您必须知道当前选项卡（如事件tab中的参数pageAction.onClicked），请使用chrome.tabs.query：

// Inside the DOMContentLoaded or onMessage event listener:
chrome.tabs.query({
    active: true,
    lastFocusedWindow: true
}, function(tabs) {
    var tab = tabs[0];
    // Do something with tab
});