Solución:
Los términos “página de fondo”, “ventana emergente”, “secuencia de comandos de contenido” todavía te confunden; Sugiero encarecidamente una mirada más profunda a la Documentación de extensiones de Google Chrome.
Con respecto a su pregunta, si los scripts de contenido o las páginas de fondo son el camino a seguir:
Guiones de contenido: Definitivamente
Los scripts de contenido son el único componente de una extensión que tiene acceso al DOM de la página web.
Página de fondo / Ventana emergente: Quizás (probablemente como máximo 1 de los dos)
Es posible que deba hacer que la secuencia de comandos de contenido pase el contenido DOM a una página de fondo o la ventana emergente para su posterior procesamiento.
¡Permítanme repetir que recomiendo encarecidamente un estudio más detenido de la documentación disponible!
Dicho esto, aquí hay una extensión de muestra que recupera el contenido DOM en las páginas de StackOverflow y lo envía a la página de fondo, que a su vez lo imprime en la consola:
background.js:
// Regex-pattern to check URLs against.
// It matches URLs like: http[s]://[...]stackoverflow.com[...]
var urlRegex = /^https?://(?:[^./?#]+.)?stackoverflow.com/;
// A function to use as callback
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:
// 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.all[0].outerHTML);
}
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
...
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["*://*.stackoverflow.com/*"],
"js": ["content.js"]
}],
"browser_action": {
"default_title": "Test Extension"
},
"permissions": ["activeTab"]
}
No es necesario utilizar el paso de mensajes para obtener o modificar DOM. solía chrome.tabs.executeScripten lugar de. En mi ejemplo, estoy usando solo el permiso activeTab, por lo tanto, el script se ejecuta solo en la pestaña activa.
parte de manifest.json
"browser_action": {
"default_title": "Test",
"default_popup": "index.html"
},
"permissions": [
"activeTab",
"<all_urls>"
]
index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="test">TEST!</button>
<script src="https://foroayuda.es/test.js"></script>
</body>
</html>
test.js
document.getElementById("test").addEventListener('click', () => {
console.log("Popup DOM fully loaded and parsed");
function modifyDOM() {
//You can play with your DOM here or check URL against your regex
console.log('Tab script:');
console.log(document.body);
return document.body.innerHTML;
}
//We have permission to access the activeTab, so we can call chrome.tabs.executeScript:
chrome.tabs.executeScript({
code: '(' + modifyDOM + ')();' //argument here is a string but function.toString() returns function's code
}, (results) => {
//Here we have just the innerHTML and not DOM structure
console.log('Popup script:')
console.log(results[0]);
});
});
Para aquellos que probaron la respuesta de gkalpak y no funcionó,
tenga en cuenta que Chrome agregará el script de contenido a una página necesaria solo cuando su extensión esté habilitada durante el inicio de Chrome y también es una buena idea reiniciar el navegador después de realizar estos cambios