Chrome扩展程序：显示隐藏的元素并点击它

我正在写一个Chrome扩展以从我订阅的网站获取一些数据（我确信我可以，我只想恢复我自己插入的数据）。到目前为止，内容脚本似乎足够用于我的扩展的体系结构。现在，如果我有一个像下面Chrome扩展程序：显示隐藏的元素并点击它

<button class="button btn btn-default paginateItems"> 
    ... 
</button>

简单的元素，我可以很容易地找到它（使用jQuery），并点击它，它做什么，当我点击它作为一个用户它。但我有这样的隐藏元素的问题：

<button id="dropdown01" class="btn btn-default text-center icon-punti font18" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    ... 
</button> 
... 
<ul class="dropdown-menu pull-right yellow-bg" aria-labelledby="dropdown01"> 
<li class="opensans_bold font12 align-center"> 
    <a href="#" class="edit-element" data-id="123123" data-toggle="modal" > 
    ... 
    </a> 
</li>

如果我选择并单击链接，则不会发生任何反应。好吧，我想，那肯定是因为它隐藏在隐藏的背后<li>，所以让我们点击下拉按钮弹出菜单。但如果我这样做，我可以看到点击已完成，因为按钮外观变化，但弹出窗口不显示。所以我想，嗯，让我们将按钮的aria-expanded属性更改为true：但没有任何效果，我甚至可以使用开发人员工具检查属性的值是而不是已更改。

我真的不知道我还能尝试什么，不知道我做错了什么，或者我可以尝试什么？

来源

2017-08-01 Francesco Marchetti-Stasi

检查devtools inspector中该元素的事件侦听器：也许该站点使用mousedown事件，您可以显式触发（）。 – wOxxOm

是的，我曾看过事件监听器：没有mouseup或mousedown事件。另一方面，有很多onclick附加到文档，也许这就是问题...也许我必须在正确的区域模拟文档点击？... –

...但这应该只是传播，除非传播停止，在这种情况下它不应该。 –

感谢@wOxxOm提供的解决方案。我必须做的是在我爬行的页面中注入JavaScript，当然还有我的javascript引用的库;所以我写了content-script.js包含以下代码：

var scripts = ['FileSaver.min.js', 'jszip.min.js', 'myscript.js'] ; 

for (var i = 0 ; i < scripts.length ; i++) { 
    var s = document.createElement('script'); 
    s.src = chrome.extension.getURL(scripts[i]); 
    s.onload = function() { 
     this.remove(); 
    }; 
    (document.head || document.documentElement).appendChild(s); 
}

即什么，我在由wOxxOm，using jQuery of the page itself建议的链接找到了一个简单的循环适应。我不得不注入的图书馆还曾被宣布为“网络访问的资源”，所以我不得不把在manifest.json如下：

"content_scripts": [ 
    { 
     "matches": ["http://*.anobii.com/*/profile"], 
     "js": ["content-script.js"] 
    } 
], 

"web_accessible_resources": [ "FileSaver.min.js", "jszip.min.js", "myscript.js" ],

没有必要改变我曾用于启动我的脚本techinique ，我会提到它的完整性：我选择了一个合理的位置在原始页面中插入一个新链接，然后我添加了一个可以运行函数的新链接。在myscript.js：

$(document).ready(function(){ 
    var newdiv = 
     '<div id="myscrit-link-div">\n' + 
     ' <a href="#" id="myscript-activate">Run script</a>\n' + 
     '</div>\n' ; 
}) ; 
$('#original-doc-div').append(newdiv) ; 
$('#myscript-activate').click(myscriptMainFunction) ;

正如你可以看到我在我的脚本使用jQuery，但没有必要注入它，因为它是在原来的页面也可使用。

来源

2017-08-02 13:54:26

Chrome扩展程序：显示隐藏的元素并点击它

回答

相关问题