Sé que esto se ha preguntado en numerosas publicaciones, pero honestamente no las entiendo. Soy nuevo en JavaScript, extensiones de Chrome y todo y tengo esta tarea de clase. Entonces, necesito crear un complemento que cuente los objetos DOM en cualquier página determinada utilizando solicitudes de dominio cruzado. He podido lograr esto hasta ahora usando las API de extensión de Chrome. Ahora el problema es que necesito mostrar los datos en mi página popup.html del archivo contentScript.js. No sé cómo hacerlo. Intenté leer la documentación, pero al enviar mensajes en Chrome, simplemente no puedo entender qué hacer.
el siguiente es el código hasta ahora.
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
});Cualquier ayuda será apreciada y por favor evite cualquier novato que hice :)
fuente
chrome.tabs.sendMessageen popupjs ychrome.runtime.onMessage.addListeneren content.js por qué.tabspara popupjs y.runtimeen content.jsPuede usar localStorage para eso. Puede almacenar cualquier dato en un formato de tabla hash en la memoria del navegador y luego acceder a él en cualquier momento. No estoy seguro de si podemos acceder a localStorage desde el script de contenido (estaba bloqueado antes), intente hacerlo usted mismo. Aquí se explica cómo hacerlo a través de su página de fondo (primero paso los datos del script de contenido a la página de fondo, luego los guardo en localStorage):
en contentScript.js:
en eventPage.js (su página de fondo):
Luego, puede acceder a esa variable en popup.js con localStorage ["total_elements"].
Tal vez pueda acceder a localStorage directamente desde el script de contenido en los navegadores modernos. Entonces no necesita pasar los datos a través de su página de fondo.
Buena lectura sobre localStorage: http://diveintohtml5.info/storage.html
fuente
.extension.xxx, en lugar de simplemente mostrar la forma correcta (que algunas personas podrían considerar como un " igualmente bien alternativa "). Supongo que es más una cuestión de estilo. ¡Sigan con el buen trabajo!