Question

我正在制作一个完美的镀铬扩展，我想在一个想法中提供一些帮助。

我已将扩展程序设置为仅在我的网站中使用清单文件。

现在我希望用户在我的网站上按下

按钮时

keyup onchange

扩展程序应该打开一个带有我想要的链接的新标签页。

layerConfirm

如果我把这段代码放到“background.js”文件中，它会起作用吗？你有什么看法？

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

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

Answer 1

由于该按钮位于网站上，因此您无法在弹出式脚本或后台脚本中使用onclick处理程序，因为这些是完全独立的文档，请参阅the extension architecture文档。

现在，既然该网站是你的那么显而易见且最简单的解决方案就是将按钮包装在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"});
    }
});

Answer 2

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

Onclick事件要做点什么

2 个答案: