17
Chrome拡張機能を構築しています。私は、拡張機能の各ページと、ユーザーがブラウザで表示しているページとの通信をアプリにさせようとしています。私は拡張からdomにアクセスし、それを更新する必要があります。Chrome拡張機能でDOMコンテンツを変更する
manifest.json
popup.html
popup.js
background.js
content.js
と現在表示されているページ。
私の目標はページの負荷です。domを変更し、ユーザーに新しいバージョンのページを表示します。 のpopup.jsユーザーは、ポップアップにキーワードを入力することができます。キーワードはlocalStorageに保存され、ウェブを閲覧している間はキーワードが表示されているページに見つかった場合は、そのキーワードの親divを非表示にすることでキーワードを見落とします。
私はそれぞれのページが通信するのを助ける必要があります。私はpopup.jsの親divを隠している方法はうまくいかないと思います。私は正面からドームを操作する方法を混乱させる。
domをbackground.jsに送信 ページでキーワードを検索し、親divを非表示に変更します。 domを表示ページに戻します。
私はこのURLが私のアプリケーションを実行するURLが一致するが、私はわからないと言っていると思います。
"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);
}
});
背景のページに新しいDOMを作成してコンテンツスクリプトに送るのではなく、ほとんどのページを壊すでしょう。 DOMの操作は、（例えば、スクリプトを必要なロジックでページに挿入するなどして）実行されます。 – gkalpak
コンテンツスクリプトにDOM操作ロジックを置き、HTMLを送信したり、バックグラウンドページやポップアップページでフィルタリングしてコンテンツスクリプトに戻したりする代わりに、キーワードを送信するだけです。 – gkalpak
あなたの問題を完全に解決するわけではありませんが、このソリューションを見て、テキストコンテナhttp://stackoverflow.com/a/18089011/1705006を検索することをお勧めします。直接の親ノードを検索する方が、divノードより効率的で論理的です。 – karmiphuc