单击事件以执行某些操作

Onclick event to do something

本文关键字：操作 执行 事件 单击      更新时间：2023-09-26

我正在制作一个非常完美的chrome扩展，我想在一个想法上得到一些帮助。

我已经通过清单文件将我的扩展设置为仅在我的网站中工作。

现在我想要用户，当他们在我的网站上用类按下按钮时

layerConfirm

扩展程序应该打开一个新的选项卡，其中包含我想要的链接。

   var element = document.getElementsByClassName('layerConfirm');
    element.onclick = function() {
        chrome.tabs.create({
            url: "http://example.com/"
        });
    };

如果我把这些代码放在文件"background.js"中，它会工作吗？你的意见是什么？

更新：或者我应该把以下代码放在popup.js文件中？

document.addEventListener('DOMContentLoaded', function() {
    var element = document.getElementsByClassName('layerConfirm');
    element.onclick = function() {
        chrome.tabs.create({
            url: "http://example.com/"
        });
    };
});

由于按钮在网站上，您不能在弹出脚本或后台脚本中使用onclick处理程序，因为它们是完全独立的文档，请参阅扩展架构文档。

现在，由于该网站是您的，显而易见且最简单的解决方案是将按钮包装在html:内的链接中

<a href="http://example.com/" target="_blank"><button class="layerConfirm">123</button></a>

完成！

否则，您将不得不使用消息传递，因为chrome.tabs.create在内容脚本中不起作用。

  • 在yoursite.com上注入的内容脚本：

    document.querySelector('.layerConfirm').addEventListener('click', function() {
    chrome.runtime.sendMessage({action: 'confirmed'});
});

  • 后台脚本：

    chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.action == 'confirmed') {
        chrome.tabs.create({url: "http://some.url"});
    }
});

document.getElementsByClassName返回具有该类的所有元素的数组列表，该列表附带元素。如果DOM中只有一个元素具有此类，则可以像document.getElementsByClassName('layerConfirm')[0]一样使用它，否则使用id属性

相关文章：