我的应用程序概述 -
在浏览器中，当您单击应用程序图标时，会出现一个弹出窗口，允许您将关键字添加到 localStorage
我在 js 文件中内置了一个函数，该函数在 dom 中搜索本地存储中的关键字，并将关键字的父级更改为隐藏。该扩展背后的想法是可定制的审查制度。
我的问题是，我最近了解到为了使用扩展访问 dom，还有更多内容。根据我的理解，您需要通过 content.js 传递 dom，它将移交给 backgrond.js，然后我可以在 dom 上执行隐藏关键字父函数的操作使用回调函数使用修改后的版本更新 dom，删除所需的关键字。
那时我非常迷失，因为尽管很多或阅读都说这就是需要做的事情。但我找不到如何实现这一目标的简单示例。
根据我的代码，如何让我的 popup.js 执行我在用户查看的每个页面的 dom 上描述的操作。
我将通过文件包含我的所有代码，以便最好地说明我的情况，
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="clear">Clear All</button>
</form>
<div id="alert"></div>
<ul id="keyWords"></ul>
</body>
</html>
popup.js
var keyWordArray = [];
keyWordArray = JSON.parse(localStorage["keyWords"]);
$(document).ready(function () {
$('#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;
}
$('#keyWords').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>");
$('#form')[0].reset();
var keyWords = $('#keyWords').html();
localStorage["keyWords"] = JSON.stringify(keyWordArray);
loadKeyWords();
return false;
});
function loadKeyWords() {
for(var i = 0; i < keyWordArray.length; i++) {
$("p:contains('"+keyWordArray[i]+"')").parent('div').hide();
}
}
if(localStorage.getItem('keyWords')) {
$('#keyWords').html(localStorage.getItem('keyWords'));
}
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});
loadKeyWords();
}); // End of document ready function
背景.js
// I have no clue how to handle this file
function doStuffWithDom(domContent) {
console.log('I received the following DOM content:\n' + domContent);
}
// When the browser-action button is clicked...
chrome.browserAction.onClicked.addListener(function (tab) {
// ...check the URL of the active tab against our pattern and...
if (urlRegex.test(tab.url)) {
// ...if it matches, send a message specifying a callback too
chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom);
}
});
内容.js
// I have no clue how to handle this file
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
// If the received message has the expected format...
if (msg.text === 'report_back') {
// Call the specified callback, passing
// the web-page's DOM content as argument
sendResponse(document.all[0].outerHTML);
}
});
background.js 和 content.js 来自this answer here
那些也在寻找我的问题答案的人甚至在评论中被告知提出一个新问题。
我引用了我引用的答案的评论，
The question was about getting the DOM content, not about accessing/manipulating the actual DOM.
最佳答案
弹出窗口和背景页面是两个独立的沙箱，您必须调解它们之间传递的内容。在您的 popup.js 中，使用:
window.addEventListener('DOMContentLoaded', function() {
var page = chrome.extension.getBackgroundPage();
// now you can access the background page objects / functions
});
});
关于javascript - 使用 Chrome 扩展访问/操作实际 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34445648/