模擬Chrome擴展的頁面上的點擊元素？

我需要迭代並單擊頁面上類.star_gray的所有元素，並在重定向後保持迭代和點擊。運行JavaScript代碼不能滿足第二個要求，所以我打算編寫一個Chrome擴展。模擬Chrome擴展的頁面上的點擊元素？

但我未能通過擴展模擬網頁上的點擊事件。我的項目是如下：

manifest.json的

{ 
    "manifest_version": 2, 

    "name": "Check'em All", 
    "description": "", 
    "version": "1.0", 

    "browser_action": { 
    "default_popup": "popup.html" 
    }, 
    "background": { 
    "persistent": true, 
    "scripts": ["jquery.js", "background.js"] 
    }, 
    "content_scripts": [{ 
    "matches": ["file:///*"], 
    "js"  : ["popup.js"] 
    }], 
    "permissions": [ 
    "tabs", 
    "http://*/*", 
    "https://*/*" 
    ] 
}

popup.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Check'em All!</title> 
</head> 
<body> 
    <h1>Check'em All!</h1> 
    <button id="check-btn">BUTTON</button> 
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 
    <script src="popup.js"></script> 
</body> 
</html>

popup.js

document.addEventListener('DOMContentLoaded', function() { 
    var btn = document.getElementById('check-btn'); 
    btn.addEventListener('click', injectScript); 
}); 

function injectScript() { 
    alert('Handler called!'); 
    chrome.tabs.executeScript(null, { file: 'background.js' }); 
}

個background.js

$(document).ready(function(){ 
    $('.star_gray').click(); 
    $('a.btn.page_next').click(); 
});

通過上面的代碼，當我點擊彈出按鈕（#check-btn），沒有任何反應。

來源

2016-01-04 Jason Lam

'document.getElementById（'＃check-btn'）;'是錯誤的。刪除'＃'符號。你可以用'document.querySelector'來使用它，因爲它表示下面的文本是一個id。但是，使用僅查找元素標識的函數，這是多餘的和錯誤的。 – enhzflep

@enhzflep對不起，這是一個錯字。如果沒有'＃'，代碼仍然不起作用。 –

您無法在後臺頁面訪問DOM。根據您的代碼，您可能需要從Official Tutorial瞭解更多，因爲您似乎對「彈出」，「背景」和「內容」感到困惑。

假設您想要觸發內容頁面中所有類爲「.star_gray」的元素的click事件，則一旦單擊browserAction，以下代碼就會觸發這些事件。

的manifest.json

{ 
    "name": "Test", 
    "version": "1.0", 
    "permissions": [ 
    "tabs" 
    ], 
    "description": "Test", 
    "background": { 
    "persistent": false, 
    "scripts": [ 
     "background.js" 
    ] 
    }, 
    "content_scripts": [ 
    { 
     "matches": [ 
     "*://*/*" 
     ], 
     "js": [ 
     "jquery.js", 
     "content.js" 
     ], 
     "run_at": "document_end", 
     "all_frames": true 
    } 
    ], 
    "browser_action": { 
    "title": "Test" 
    }, 
    "manifest_version": 2 
}

background.js

chrome.browserAction.onClicked.addListener(function() { 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
     chrome.tabs.sendMessage(tabs[0].id, {command: "click"}, function(response) { 
      console.log(response.result); 
     }); 
    }); 
});

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
    $('.star_gray').click(); 
    $('a.btn.page_next').click(); 

    sendResponse({result: "success"}); 
});

來源

2016-01-04 10:22:12

感謝您的澄清。現在消息在內容和背景之間成功發送，但content_script中的'sendResponse'之外的代碼不起作用。 –

你爲什麼要爲[activeTab]（https://developer.chrome.com/extensions/activeTab）可以完成的事情建議'tabs'權限？ – minj

謝謝你提及！由於我在查詢標籤，我需要標籤權限。但是，您也可以聲明activeTab權限並使用「chrome.browser.Action.onClicked.addListener（function（tab）{...}）;」代替。 –

提高以前的答案被@灰原愛不使用tabs permission。

請注意，在您的情況下，您甚至不需要注意ready()，因爲腳本只在瀏覽器動作被觸發時運行，大概在DOMContentLoaded之後。

的manifest.json

{ 
    "name": "Test", 
    "version": "1.0", 
    "permissions": [ 
    "activeTab" 
    ], 
    "description": "Test", 
    "background": { 
    "scripts": [ 
     "background.js" 
    ] 
    }, 
    "browser_action": { 
    "title": "Test" 
    }, 
    "manifest_version": 2 
}

background.js

var files = [ 
    'jquery.js', 
    'content.js', 
]; 

chrome.browserAction.onClicked.addListener(function() { 
    for (var file of files) { 
     chrome.tabs.executeScript({ 
      file: file, 
      allFrames: true, 
     }); 
    } 
});

content.js

$('.star_gray').click(); 
$('a.btn.page_next').click();

但請注意，這只是解決了「模擬通過點擊網頁上的活動延伸'的問題。這並不意味着'保持迭代和重定向後的點擊'將起作用。最好你用詳細描述你的意思來創建另一個問題。

來源

2016-01-04 13:46:00 minj

模擬Chrome擴展的頁面上的點擊元素？

回答

相關問題