Question

我的应用程序概述 - 在浏览器中单击应用程序图标时，会出现一个弹出窗口，允许您向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

那些也在寻找问题答案的人甚至在评论中被告知要提出一个新问题。

我引用了我引用的答案的评论，

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

Answer 1

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

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

使用Chrome扩展程序访问/操作实际DOM

1 个答案: