向所有元素添加单击事件侦听器- Firefox插件

adding a click event listener to all elements - Firefox Add-on

本文关键字：侦听器 Firefox 插件 事件 单击 元素 添加      更新时间：2023-09-26

我想给页面中的所有HTML元素分配一个点击处理程序。但是在用户点击我的插件按钮之后，而不是在页面加载时。

为起始点。我无法分配一个全局点击处理程序。有什么想法?谢谢。

var buttons = require('sdk/ui/button/action');
var button = buttons.ActionButton({
  id: "fieldResolver",
  label: "Field Resolver",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});
function handleClick() {
}

当我使用jquery时，我得到这个错误，所以jquery不是一个选项:Message: ReferenceError: $没有定义

首先，您的附加组件的代码是生活在一个不同的，比页面的代码更特权的上下文中-在不久的将来，它们也将是两个不同的进程-所以您不能直接访问页面:您必须使用内容脚本。我建议你仔细阅读链接的页面，因为它将为你提供他们如何相互沟通。

说，我的想法是:当用户点击一个按钮，附加一个内容脚本到当前页面，如果还没有。在内容脚本中，监听click事件，并执行您的操作。

下面是main.js

的示例
const { ActionButton } = require("sdk/ui/button/action");
const { data } = require("sdk/self")
const tabs = require('sdk/tabs');
let button = ActionButton({
  id: "fieldResolver",
  label: "Field Resolver",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});
function handleClick() {
  // get the current tab
  let tab = tabs.activeTab;
  // you would probably want to store worker somewhere to be sure
  // that you won't attach more than once
  let worker = tab.attach({
    contentScriptFile: data.url("content.js")
  });
}

可以看到，您需要一个contentScriptFile，它必须位于附加组件的data文件夹中。您的content.js看起来像:

function clickHandler (event) {
  // do something with the element clicked
  console.log(event.target.outerHTML);
}
window.addEventListener("click", clickHandler);
// We want to clean the page if the worker is destroyed
self.port.on("detach", function() {
  window.removeEventListener("click", clickHandler);
})

可以随时移除调用worker.destroy()的worker。就像我说的，你可能想把worker存储在某个地方，像一个地图，这样你就可以附加脚本，只有当没有任何工人的标签/url。

添加点击监听器到窗口，然后检查event.target:

function handleClick() {
    //try using jquery here. if $ doesnt work try window.$
    window.addEventListener('click', intercept, false);
}
function intercept(e) {
    //try using jquery here. if $ doesnt work try window.$ or try e.target.ownerDocument.defaultView.$
    var elementClicked = e.target;
    console.log('elementClicked = ', elementClicked);
    elementClicked.style.border = '1px solid red';
}
相关文章：