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擴展程序：顯示隱藏的元素並點擊它

回答

相關問題