Accessing / Manipulating the Actual DOM With a Chrome Extension

Question

My App Overview - In the browser when you click the app icon a popup appears allowing you to add keywords to the localStorage

I have a function built into the js file which searches the dom for the keywords that are in the local storage and changes the parent of the keywords to be hidden. The idea behind the extension is customizable censorship.

My problem is that I have recently learned in order to access the dom with an extension there is more to it. From my understanding you need to pass the dom through content.js which will handoff to backgrond.js which I can perform the hiding the parent of the keywords function on the dom then with a callback function update the dom with the modified version censoring out the desired keywords.

I am very lost at that point because although plenty or reading says that is what needs to be done. But I cannot find a straightforward example of how to accomplish this.

Based on my code how can I get my popup.js to perform the actions that I have described on the dom of every page a user views.

I will include all of my code by files in order to illustrate my situation best,

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);
    }
});

The background.js and content.js come from this answer here

People who were also looking for the answer to my question were even told in the comments to open a new question.

I quote from the comments on the answer I reference,

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

score 0 · Accepted Answer · answered Dec 24 '15 at 01:41

0

The popup and the background page are two separate sandboxes and you have to mediate the content passing between them. In your popup.js, use:

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

answered Dec 24 '15 at 01:41

raduation

792
5
11

Would you mind adding the example of each of the other files. – wuno Dec 24 '15 at 02:50
You don't need anything special - this is what you need to establish communication between the popup and background page. The key is waiting for the DOMContentLoaded event. – raduation Dec 24 '15 at 04:38

Accessing / Manipulating the Actual DOM With a Chrome Extension

1 Answers1