Necesito crear una extensión de Chrome que manipule dom. Estoy siguiendo un tutorial y ahora tengo este manifest.json:
{ "manifest_version": 2, "name": "Getting started example", "description": "This extension shows a Google Image search result for the current page", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab", "https://ajax.googleapis.com/" ] }Esta es mi ventana emergente.html:
<!doctype html> <!-- This page is shown when the extension button is clicked, because the "browser_action" field in manifest.json contains the "default_popup" key with value "popup.html". --> <html> <head> <title>Getting Started Extension's Popup</title> <style> body { font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif; font-size: 100%; } #status { /* avoid an excessively wide status text */ white-space: pre; text-overflow: ellipsis; overflow: hidden; max-width: 400px; } </style> <!-- - JavaScript and HTML must be in separate files: see our Content Security - Policy documentation[1] for details and explanation. - - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy --> <script src="popup.js"></script> <script type="text/javascript">console.log('attempt #0 to console log something');</script> </head> <body> <div id="status"></div> <img id="image-result" hidden> </body> </html>Y este es mi popup.js:
document.addEventListener('DOMContentLoaded', function() { console.log('attempt #3'); }); chrome.tabs.onUpdated.addListener( function ( tabId, changeInfo, tab ) { if ( changeInfo.status === "complete" ) { chrome.tabs.executeScript({ code: "console.log('attempt #4');" }, function() { console.log("console.log(attempt #5)"); }); } });Como puede ver, probé varias formas de consolar el registro de algo después de cargar la página, pero ninguna de ellas funciona, ¿qué debo hacer?
Entonces, creo que la solución simple es simplemente crear un script de contenido y esperar hasta que se cargue la página:
manifiesto.json
{ "manifest_version": 2, "name": "Getting started example", "description": "This extension shows a Google Image search result for the current page", "version": "1.0", "content_scripts": [ { //Set your address you want the extension will work in mataches!!! "matches": ["http://mail.google.com/*", "https://mail.google.com/*"], "js": ["content.js"], "run_at": "document_end" } ], "permissions": ["activeTab", "https://ajax.googleapis.com/"], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } }contenido.js
window.onload=function(){ console.log("page load!"); }También puede usar el paso de mensajes entre background.js y su página de contenido y verificar que la pestaña esté cargada, pero para su caso creo que es suficiente.
Así es como lo hago:
manifiesto.json
... "background": { "scripts": [ "assets/js/background.js" ], "persistent": false }, ....fondo.js
function openOrFocusOptionsPage() { var optionsUrl = chrome.extension.getURL('popup.html'); chrome.tabs.query({}, function(extensionTabs) { var found = false; for(var i=0; i < extensionTabs.length; i++) { if(optionsUrl == extensionTabs[i].url) { found = true; chrome.tabs.update(extensionTabs[i].id, {"selected": true}); } } if(found == false) { chrome.tabs.create({url: "popup.html"}); } }); } chrome.extension.onConnect.addListener(function(port) { var tab = port.sender.tab; port.onMessage.addListener(function(info) { var max_length = 1024; if(info.selection.length > max_length) info.selection = info.selection.substring(0, max_length); openOrFocusOptionsPage(); }); }); chrome.browserAction.onClicked.addListener(function(tab) { openOrFocusOptionsPage(); });