2015-11-14 83 views
-1

我curently做一个镀铬的扩展,它完美的作品,我想在一个念头一些帮助。onclick事件做一些事情

我已经把我的扩展只在我的网站工作,通过清单文件。

现在我想要的用户,当他们在我的网站上按下一个按钮,类

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/" 
     }); 
    }; 
}); 
+0

我已经尝试过,没有这两个打交道。 @wOxxOm –

+0

@wOxxOm nope,在调试器上没有错误 –

+0

@wOxxOm看看我只想做一个onclick监听器,所以无论何时有人点击网页上的按钮(example1.com),扩展程序应该打开一个新标签页(example2.com )这就是我试图在这里做的。 –

回答

2

由于该按钮位于网站上,因此您不能在弹出脚本或后台脚本中使用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"}); 
        } 
    }); 
    
0

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

+0

只有一个元件,当我尝试的。长度,但即使在[0]对象不工作。 –

+0

删除document.addEventListener('DOMContentLoaded',function(){})。可能这不是必需的。这里是一个演示http://jsfiddle.net/fj1o3h6r/1/.You将看到警告框,但因为我没有可能看到的扩展名无法在控制台中读取未定义错误的属性“创建” – brk