The solution: You need a manifest file, a background script and a content script. This is not really clear in the documentation that you have to use it and also, how to use it. For alerting the full dom, see here. Because I have a hard time finding a complete solution that actually works and not just snippets that are useless for newbies, like me, I included a specific solution:
manifest.json
{ "manifest_version": 2, "name": "Test Extension", "version": "0.0", "background": { "persistent": false, "scripts": ["background.js"] }, "content_scripts": [{ "matches": ["file:///*"], "js": ["content.js"] }], "browser_action": { "default_title": "Test Extension" }, "permissions": ["activeTab"] }
content.js
/* Listen for messages */ chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { /* If the received message has the expected format... */ if (msg.text && (msg.text == "report_back")) { /* Call the specified callback, passing the web-pages DOM content as argument */ sendResponse(document.getElementById("mybutton").innerHTML); } });
background.js
/* Regex-pattern to check URLs against. It matches URLs like: http[s]://[...]stackoverflow.com[...] */ var urlRegex = /^file:\/\/\/:?/; /* A function creator for callbacks */ function doStuffWithDOM(element) { alert("I received the following DOM content:\n" + element); } /* 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); } });
index.html
<html> <button id="mybutton">click me</button> </html>
Just save the index.html somewhere and load in the folder as an extension, containing the three other files. Open the index.html and push the extension button. It should show "click me".
