Estoy trabajando en una extensión de Google Chrome que toma todos los párrafos (contenido de la etiqueta p) y coloca cada palabra en un botón. Es parte de un programa más amplio en el que estoy trabajando. Tengo una copia de trabajo de esa parte de la aplicación enJSFiddle.

Ahora, estoy tratando de transferir ese código a una extensión de Chrome. Pero tengo problemas para acceder al DOM desde mi script de fondo, para poder manipularlo con mi código (en mi funciónFormatText()) Ni siquiera he llamado a la función todavía, porque no puedo entender cómo se supone que debo editar el DOM en primer lugar dentro debackground.js.

Aquí está mi código:

manifest.json

{
  "manifest_version": 2,
  "name": "Test Extension",
  "version": "1",
  "background": {
    "persistent": false,
    "scripts": ["background.js","jquery-3.0.0.min.js","TextSplitter.js"]
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "browser_action": {
    "default_title": "Test Extension"
  },
  "permissions": ["activeTab","tabs"]
}

content.js

// Listen for messages
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);
    }
});

background.js

// A function to use as callback
function doStuffWithDom(domContent) {
    console.log('I received the following DOM content:\n');
    console.log(JSON.stringify(domContent));
    var domAccess = $(domContent);
    var myText = $(domAccess).find("p").text();
    console.log("THIS IS MY TEXT: " + myText);
}

chrome.tabs.onUpdated.addListener(function (tabID, info, tab) {
    console.log("Status: " + info.status);
    if (info.status == "complete") {
        chrome.tabs.sendMessage(tab.id, { text: 'report_back' }, doStuffWithDom);
    }
});

TextSplitter.js

function FormatText(domObject) {
    var pElements = []; // Holds the split paragraphs for each p tag
    var pElementIndex = 0;

    //Loop through each p tag in web page
    $("p").each(function (webPElementIndex, webPElement) {
        var jQObjWebPElement = $(webPElement);// Convert p element to jQuery Obj
        // split current paragraph element text into an array of seperate words
        pElements[webPElementIndex] = jQObjWebPElement.text().split(" ");
    });

    //Clear text out of all p elements
    $("p").empty();

    //Loop through p elements in the webpage to add back text with spans around each word
    $("p").each(function (webPElementIndex, webPElement) {
        // convert current web page element to jQuery Obj
        var jQObjWebPElement = $(webPElement);
        // Loop through each word stored in each stored paragraph element
        $.each(pElements[pElementIndex], function (pElementWordIndex, pElementWord) {
            var jQObjPElementWord = $(pElementWord); // convert element to jQuery object
            jQObjWebPElement.append($("<button>")
                            .text(pElements[pElementIndex][pElementWordIndex]));
        });
        pElementIndex = pElementIndex + 1;
    });
}

Perdone mi ignorancia, ya que soy muy nuevo en trabajar con DOM en general, especialmente en una extensión de Chrome.