Tôi biết điều này đã được hỏi trong nhiều bài viết nhưng thành thật mà nói thì tôi không hiểu. Tôi chưa quen với JavaScript, Tiện ích mở rộng của Chrome và mọi thứ và tôi có bài tập trong lớp này. Vì vậy, tôi cần tạo một plugin có thể đếm các đối tượng DOM trên bất kỳ trang nhất định nào bằng cách sử dụng Yêu cầu tên miền chéo. Cho đến nay, tôi đã có thể đạt được điều này bằng cách sử dụng API tiện ích mở rộng của Chrome. Bây giờ vấn đề là tôi cần hiển thị dữ liệu trên trang popup.html của mình từ tệp contentScript.js. Tôi không biết làm thế nào để làm điều đó. Tôi đã thử đọc tài liệu nhưng nhắn tin trong chrome, tôi không thể hiểu phải làm gì.
sau đây là mã cho đến nay.
manifest.json
{
"manifest_version":2,
"name":"Dom Reader",
"description":"Counts Dom Objects",
"version":"1.0",
"page_action": {
"default_icon":"icon.png",
"default_title":"Dom Reader",
"default_popup":"popup.html"
},
"background":{
"scripts":["eventPage.js"],
"persistent":false
},
"content_scripts":[
{
"matches":["http://pluralsight.com/training/Courses/*", "http://pluralsight.com/training/Authors/Details/*", "https://www.youtube.com/user/*", "https://sites.google.com/site/*", "http://127.0.0.1:3667/popup.html"],
"js":["domReader_cs.js","jquery-1.10.2.js"]
//"css":["pluralsight_cs.css"]
}
],
"permissions":[
"tabs",
"http://pluralsight.com/*",
"http://youtube.com/*",
"https://sites.google.com/*",
"http://127.0.0.1:3667/*"
]popup.html
<!doctype html>
<html>
<title> Dom Reader </title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
<body>
<H1> Dom Reader </H1>
<input type="submit" id="readDom" value="Read DOM Objects" />
<div id="domInfo">
</div>
</body>
</html>eventPage.js
var value1,value2,value3;
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action == "show") {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.pageAction.show(tabs[0].id);
});
}
value1 = request.tElements;
});popup.js
$(function (){
$('#readDom').click(function(){
chrome.tabs.query({active: true, currentWindow: true}, function (tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "readDom"});
});
});
});contentScript
var totalElements;
var inputFields;
var buttonElement;
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse){
if(request.action == "readDom"){
totalElements = $("*").length;
inputFields = $("input").length;
buttonElement = $("button").length;
}
})
chrome.runtime.sendMessage({
action: "show",
tElements: totalElements,
Ifields: inputFields,
bElements: buttonElement
});Mọi sự giúp đỡ sẽ được đánh giá cao và vui lòng tránh bất kỳ hành động nào mà tôi đã làm :)