使用 Chrome 扩展访问/操作实际 DOM答案

【问题标题】：Accessing / Manipulating the Actual DOM With a Chrome Extension使用 Chrome 扩展访问/操作实际 DOM
【发布时间】：2016-03-30 11:26:53
【问题描述】：

我的应用概览 - 在浏览器中，当您单击应用程序图标时，会出现一个弹出窗口，允许您将关键字添加到 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

background.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

那些也在寻找我的问题答案的人甚至在 cmets 中被告知要打开一个新问题。

我引用的答案来自 cmets，

The question was about getting the DOM content, not about accessing/manipulating the actual DOM.

【问题讨论】：

标签： javascript jquery dom google-chrome-extension

【解决方案1】：

弹出页面和背景页面是两个独立的沙箱，您必须调解它们之间传递的内容。在你的 popup.js 中，使用：

window.addEventListener('DOMContentLoaded', function() {
    var page = chrome.extension.getBackgroundPage();
    // now you can access the background page objects / functions
    });
});

【讨论】：

您是否介意添加其他每个文件的示例。
您不需要任何特殊的东西 - 这是您在弹出页面和背景页面之间建立通信所需要的。关键是等待 DOMContentLoaded 事件。