Я знаю, что об этом спрашивали в многочисленных сообщениях, но, честно говоря, я их не понимаю. Я новичок в JavaScript, расширениях Chrome и всем остальном, и у меня есть это назначение класса. Поэтому мне нужно создать плагин, который будет подсчитывать объекты DOM на любой странице с помощью междоменных запросов. До сих пор мне удавалось добиться этого с помощью API расширения Chrome. Теперь проблема в том, что мне нужно показать данные на моей странице popup.html из файла contentScript.js. Я не знаю, как это сделать. Я пробовал читать документацию, но при обмене сообщениями в хроме я просто не могу понять, что делать.
Ниже приведен код на данный момент.
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
});
Любая помощь будет оценена по достоинству, и, пожалуйста, избегайте каких-либо недомоганий, которые я сделал :)
источник
chrome.tabs.sendMessagepopupjs иchrome.runtime.onMessage.addListenercontent.js почему.tabsдля popupjs и.runtimecontent.jsДля этого вы можете использовать localStorage. Вы можете хранить любые данные в формате хэш-таблицы в памяти браузера, а затем обращаться к ним в любое время. Я не уверен, сможем ли мы получить доступ к localStorage из скрипта содержимого (раньше он был заблокирован), попробуйте сделать это самостоятельно. Вот как это сделать через фоновую страницу (сначала я передаю данные из сценария содержимого на фоновую страницу, а затем сохраняю их в localStorage):
в contentScript.js:
chrome.runtime.sendMessage({ total_elements: totalElements // or whatever you want to send });в eventPage.js (ваша фоновая страница):
chrome.runtime.onMessage.addListener( function(request, sender, sendResponse){ localStorage["total_elements"] = request.total_elements; } );Затем вы можете получить доступ к этой переменной в popup.js с помощью localStorage ["total_elements"].
Возможно, вы можете получить доступ к localStorage прямо из сценария содержимого в современных браузерах. Тогда вам не нужно передавать данные через фоновую страницу.
Хорошее чтение о localStorage: http://diveintohtml5.info/storage.html
источник
.extension.xxx, вместо того, чтобы просто указывать правильный путь (который некоторые люди могут подумать как " одинаково ж альтернатива "). Думаю, это больше вопрос стиля. Продолжайте хорошую работу !