使用Chrome扩展访问/操作实际DOM
“我的应用程序概述”--在浏览器中，当您单击应用程序图标时，会出现一个弹出式窗口，允许您向localStorage添加关键字
我有一个内置在js文件中的函数，它在dom中搜索本地存储中的关键字，并更改要隐藏的关键字的父项。扩展背后的想法是可定制的审查制度。
我的问题是，我最近学到了为了用扩展来访问dom，还有更多的内容。根据我的理解，您需要通过content.js传递dom，这将切换到backgrond.js，我可以在backgrond.js上执行隐藏关键字函数的父函数，然后使用回调函数，使用修改后的版本更新dom，筛选出所需的关键字。
我在这一点上非常迷茫，因为尽管大量的阅读或阅读表明，这是我们需要做的。但我找不到一个简单的例子来说明如何做到这一点。
基于我的代码，如何让我的popup.js执行我在每个页面上描述的操作--一个用户视图。
为了更好地说明我的情况，我将按文件包含我的所有代码，
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 functionbackground.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);
}
});content.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.回答 1
Stack Overflow用户
发布于 2015-12-24 01:41:06
弹出窗口和后台页面是两个独立的沙箱，您必须在它们之间传递内容。在您的popup.js中，使用：
window.addEventListener('DOMContentLoaded', function() {
var page = chrome.extension.getBackgroundPage();
// now you can access the background page objects / functions
});
});https://stackoverflow.com/questions/34445648
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号