के साथ डोम सामग्री बदलें मैं क्रोम एक्सटेंशन बना रहा हूं। मैं अपने ऐप को एक्सटेंशन में प्रत्येक पृष्ठ और ब्राउजर में देख रहे पेज के साथ संवाद करने की कोशिश कर रहा हूं। मुझे एक्सटेंशन से डोम तक पहुंचने की आवश्यकता है और फिर इसे अपडेट करें।क्रोम एक्सटेंशन
manifest.json
popup.html
popup.js
background.js
content.js
और वर्तमान पृष्ठ जो उपयोगकर्ता देख रहा है।
मेरा लक्ष्य पृष्ठ लोड पर है डोम को संशोधित करें और उपयोगकर्ता को इसे देखने से पहले पृष्ठ का नया संस्करण दिखाएं। popup.js उपयोगकर्ताओं को पॉपअप में कीवर्ड दर्ज करने की अनुमति है। कीवर्ड localStorage पर सहेजे जाते हैं और जब वे वेब देखते हैं तो खोजशब्दों के मूल div को बनाकर कीवर्ड को उनके दृश्य से सेंसर किया जाता है, यदि वे किसी भी पेज पर देखे जाते हैं।
मुझे प्रत्येक पृष्ठ को संवाद करने में सहायता चाहिए और मुझे लगता है कि जिस तरह से मैं popup.js में पैरेंट divs छुपा रहा हूं, काम नहीं करेगा। मैं उलझन में हूँ कि सामने से डोम पर कार्रवाई कैसे करें।
पृष्ठभूमि को जेड भेजें .js पृष्ठ पर कीवर्ड खोजें और अपने मूल divs को छिपाएं में बदलें। डोम को वापस देखने वाले पृष्ठ पर दबाएं।
मुझे लगता है कि यह लाइन कह रही है कि अगर मैं किसी यूआरएल से मेल खाता हूं तो मेरा ऐप चलाएं लेकिन मुझे यकीन नहीं है।
"matches": ["*://*/*"],
मेरे 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);
}
});
पूरे कोड को देखे बिना, पृष्ठभूमि पृष्ठ में एक नया डोम बनाकर और सामग्री स्क्रिप्ट पर भेजना ** ** ** लगता है कि एक अच्छी योजना नहीं है :) यह अधिकांश पृष्ठों को तोड़ देगा। डीओएम हेरफेर जगह में होना चाहिए (उदाहरण के लिए पृष्ठ में आवश्यक तर्क के साथ एक स्क्रिप्ट इंजेक्शन द्वारा)। – gkalpak
बस एक सामग्री स्क्रिप्ट में डोम-मैनिपुलेशन तर्क डालें और इसे कीवर्ड भेजें (HTML भेजने के बजाय, इसे पृष्ठभूमि या पॉपअप पृष्ठ में फ़िल्टर करना और इसे सामग्री स्क्रिप्ट पर वापस भेजना)। – gkalpak
आपकी समस्या को पूरी तरह से हल नहीं करते हैं, लेकिन मेरा सुझाव है कि आप इस समाधान को टेक्स्ट कंटेनर http://stackoverflow.com/a/18089011/1705006 पर खोजने के लिए देखें। प्रत्यक्ष पैरेंट नोड्स के लिए खोज करना अधिक कुशल और div नोड्स से अधिक तार्किक है। – karmiphuc