Sto costruendo un'estensione per Chrome. Sto cercando di far comunicare la mia app con ogni pagina dell'estensione e la pagina che l'utente sta visualizzando nel browser. Devo accedere a dom dall'estensione e quindi aggiornarlo.Modifica contenuto DOM con estensione Chrome
manifest.json
popup.html
popup.js
background.js
content.js
e la pagina corrente che l'utente sta visualizzando.
Il mio obiettivo è sul caricamento della pagina modificare il dom e mostrare all'utente la nuova versione della pagina prima che lo vedano mai. in popup.js gli utenti sono autorizzati a inserire le parole chiave nel popup. Le parole chiave vengono salvate su localStorage e mentre visualizzano il web le parole chiave vengono censurate fuori dalla loro vista rendendo la div genitore delle parole chiave nascoste se viene trovata su qualsiasi pagina che stanno visualizzando.
Ho bisogno di aiuto per far sì che ogni pagina sia comunicata e penso che il modo in cui sto nascondendo le div parent in popup.js non funzionerà. Sono confuso su come eseguire l'azione sul dom dal fronte.
Invia dom a background.js Trova le parole chiave nella pagina e cambia le loro div parent in hidden. torna alla pagina di visualizzazione.
Penso che questa riga stia dicendo se abbino qualsiasi url quindi eseguo la mia app ma non ne sono sicuro.
"matches": ["*://*/*"],
mio manifest.json
{
"name": "Wuno Zensoring",
"version" : "1.0",
"permissions": [
"activeTab",
"tabs",
"storage"
],
"description": "This extension will search the document file for keywords and hide their parent div.",
"icons": {
"19": "icon19.png",
"38": "icon38.png",
"48": "icon48.png",
"128": "icon128.png"
},
"background": {
"persistent": false,
"scripts": ["jquery-1.11.3.min.js","background.js"]
},
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": true
}],
"web_accessible_resources": [
"popup.js", "content.js"
],
"browser_action": {
"default_icon": "icon.png128",
"default_popup": "popup.html",
"default_icon": {
"19": "icon19.png",
"38": "icon38.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"manifest_version": 2
}
popup.html
<!doctype html>
<html>
<head>
<title>Wuno Zensorship</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="icon48.png">
<section>
<form id="form" action="#" method="POST">
<input id="description" name="description" type="text" />
<input id="add" type="submit" value="Add" />
<button id="clearChecked">Clear Checked Items</button>
<button id="clear">Clear All</button>
</form>
<div id="alert"></div>
<ul id="keyWords"></ul>
</body>
</html>
popup.js
$(document).ready(function() {
localArray = [];
if (!localStorage.keyWords) {
localStorage.setItem('keyWords', JSON.stringify(localArray));
}
loadKeyWords();
function loadKeyWords() {
$('#keyWords').html('');
localArray = JSON.parse(localStorage.getItem('keyWords'));
for(var i = 0; i < localArray.length; i++) {
$('#keyWords').prepend('<li><input class="check" name="check" type="checkbox">'+localArray[i]+'</li>');
}
}
$('#add').click(function() {
var Description = $('#description').val();
if($("#description").val() === '') {
$('#alert').html("<strong>Warning!</strong> You left the to-do empty");
$('#alert').fadeIn().delay(1000).fadeOut();
return false;
}
$('#form')[0].reset();
var keyWords = $('#keyWords').html();
localArray.push(Description);
localStorage.setItem('keyWords', JSON.stringify(localArray));
loadKeyWords();
return false;
});
$('#clear').click(function() {
window.localStorage.clear();
location.reload();
return false;
});
$('#clearChecked').click(function() {
currentArray = [];
$('.check').each(function() {
var $curr = $(this);
if (!$curr.is(':checked')) {
var value = $curr.parent().text();
currentArray.push(value);
localStorage.setItem('keyWords', JSON.stringify(currentArray));
loadKeyWords();
} else {
$curr.parent().remove();
}
});
});
// Update the relevant fields with the new data
function setDOMInfo(info) {
$("div p:contains(localStorage.getItem('keyWords')).parent('div').hide()");
}
// Once the DOM is ready...
window.addEventListener('DOMContentLoaded', function() {
// ...query for the active tab...
chrome.tabs.query({
active: true,
currentWindow: true
}, function (tabs) {
// ...and send a request for the DOM info...
chrome.tabs.sendMessage(
tabs[0].id,
{from: 'popup', subject: 'DOMInfo'},
// ...also specifying a callback to be called
// from the receiving end (content script)
setDOMInfo);
});
});
}); // End of document ready function
background.js
chrome.runtime.onMessage.addListener(function (msg, sender) {
// First, validate the message's structure
if ((msg.from === 'content') && (msg.subject === 'showPageAction')) {
// Enable the page-action for the requesting tab
chrome.pageAction.show(sender.tab.id);
}
});
content.js
// Inform the background page that
// this tab should have a page-action
chrome.runtime.sendMessage({
from: 'content',
subject: 'showPageAction'
});
// Listen for messages from the popup
chrome.runtime.onMessage.addListener(function (msg, sender, response) {
// First, validate the message's structure
if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) {
// Collect the necessary data
// (For your specific requirements `document.querySelectorAll(...)`
// should be equivalent to jquery's `$(...)`)
var domInfo = {
total: document.querySelectorAll('*').length,
inputs: document.querySelectorAll('input').length,
buttons: document.querySelectorAll('button').length
};
// Directly respond to the sender (popup),
// through the specified callback */
response(domInfo);
}
});
Senza guardare l'intero codice, creando un nuovo DOM nella pagina di sfondo e inviandolo allo script di contenuto fa ** non ** suona liek un buon piano :) Si romperà la maggior parte delle pagine. La manipolazione del DOM dovrebbe avvenire sul posto (ad es. Iniettando uno script con la logica necessaria nella pagina). – gkalpak
Basta inserire la logica di manipolazione DOM in uno script di contenuto e inviare le parole chiave (anziché inviare l'HTML, filtrarlo in background o nella pagina popup e inviarlo nuovamente allo script di contenuto). – gkalpak
Non risolvere completamente il problema, ma ti suggerisco di dare un'occhiata a questa soluzione per cercare contenitori di testo http://stackoverflow.com/a/18089011/1705006. La ricerca di nodi padre diretti è più efficiente e più logica dei nodi div. – karmiphuc